Como usar o editor WordPress

O WordPress como um CMS possui um conjunto de recursos incrivelmente robusto. Os plug-ins e widgets atraem as pessoas para a plataforma, mas uma vez lá dentro, o verdadeiro poder vem do próprio editor do WordPress. Independentemente de qual seja o seu objetivo com a plataforma, você usará o editor de postagem / página em sua capacidade principal. Portanto, queremos mostrar a você como usar o editor do WordPress ao máximo para que seu conteúdo brilhe e seu site prospere.

Inscreva-se no nosso canal no Youtube

O que é o Editor do WordPress?

Tecnicamente, existem três editores de WordPress para você escolher. Com o lançamento do WordPress 5.0, o editor mudou do então padrão TinyMCE para o Editor de Bloco que temos hoje. Em meio a essa mudança, o plug-in do editor Gutenberg foi lançado como uma ponte para testar os novos recursos do Block Editor antes de torná-lo no WordPress Core.

Embora o Editor de bloco seja o padrão no WP a partir do 5.0, você pode escolher usar qualquer um dos três que desejar. Você pode instalar o plugin do Editor Clássico para manter o TinyMCE antigo, o plugin do Gutenberg para manter os recursos mais recentes (embora potencialmente instáveis) em seu editor, ou você pode manter o Editor de Bloco padrão.

Dadas as etapas extras envolvidas no uso de qualquer coisa, exceto o editor padrão (e a instabilidade inerente e a natureza mutável do plugin Gutenberg), vamos nos concentrar apenas no Editor de Bloco padrão neste artigo. No entanto, você deve notar que os fundamentos são os mesmos com Gutenberg, e o TinyMCE contido no plugin do Editor Clássico tem paridade de recursos básicos com qualquer editor de texto rico ou software de processamento de texto - sem mencionar qualquer funcionalidade específica do WP que discutimos carrega acabou, geralmente diferindo apenas na estética, não na função.

Com tudo isso dito, vamos aprender a usar o editor WordPress.

O básico do editor WordPress

Sempre que criar uma página ou postagem (ou um tipo de postagem personalizado), você usará o Editor de bloco. É apresentado a você um tutorial modal sobre como abri-lo e você pode aprender o básico seguindo-o através dos 4 slides que ele oferece. Feche-o e você poderá ver o editor básico.

O Editor de blocos do WordPress básico consiste em 5 elementos. Mais podem ser adicionados por vários plug-ins, mas eles fornecem a funcionalidade básica com a qual você trabalhará dia após dia.

1. Bloco de título - tudo o que você inserir aqui será exibido como a tag H1 principal da postagem / página.
2. Bloco / Área de Conteúdo - Esta é a área na qual você adicionará os vários blocos que compõem o conteúdo de sua postagem ou página.
3. Botão Adicionar Bloco - Sempre que vir um + em um círculo, você pode clicar nele para adicionar um novo bloco. Um menu suspenso aparecerá, no qual você escolhe o tipo que deseja inserir. Todos eles funcionam exatamente da mesma forma, portanto, independentemente de clicar em um à direita de um bloco, abaixo de um bloco ou no canto da tela, você obtém as mesmas opções.
4. Guia de opções do documento - nesta guia, você encontrará tudo, desde categorias, tags, permalink, botões de ativação / desativação de comentários e muito mais. Os plug-ins podem adicionar opções aqui, mas sempre se aplicam à página geral ou à própria postagem.
5. Guia de opções de bloco - esta guia lida com as opções de qualquer bloco que você realçar. Se clicar em um bloco de parágrafo, você edita as opções apenas para aquele bloco . Nenhum outro bloco, nem o próprio documento mudam.

A seguir, mostraremos as especificidades dessas áreas e como você pode usá-las para criar o melhor conteúdo possível.

O que são blocos?

Você já nos viu mencionar Blocos neste post, mas o que são? Um bloco é um elemento único e personalizável de uma página ou postagem. Pode ser um único parágrafo, uma lista, uma imagem ou uma galeria. Esses blocos podem ser movidos e ajustados como quiser, personalizados individualmente e fornecem controle granular sobre o conteúdo de uma forma que um editor WYSIWYG simplesmente não pode. (Se você é um usuário Divi, já está familiarizado com o conceito porque nossos Módulos funcionam da mesma maneira.)

Como você pode ver acima, cada elemento da página está contido em seu próprio bloco. Você pode ver uma lista completa de blocos do WordPress na documentação de suporte do WordPress.

Como Criar um Grupo de Blocos

Um grupo de blocos é uma coleção de blocos que você define para funcionar como um único bloco. Você os move e estiliza como se fossem uma única unidade, mas o Grupo é composto de vários elementos.

Criar um grupo é fácil. Basta clicar em um bloco, segurar a tecla Shift ou CTRL e clicar em outro. Se você quiser agrupar todos os blocos na postagem, você pode pressionar CTRL / CMD-A para selecionar todos. Então, quando você vir o ícone no canto superior esquerdo mudar para um quadrado feito de pequenos blocos, você pode clicar nele e selecionar Transformar em grupo .

Se precisar desagrupá-los, basta clicar no botão suspenso de três pontos e selecionar desagrupar.

Os blocos agora funcionarão como indivíduos novamente.

O que são blocos reutilizáveis?

Você pode transformar qualquer bloco de um bloco único em um bloco reutilizável no menu de configurações. Um bloco reutilizável não é um modelo, mas sim um bloco global para o seu site. Você cria um bloco ou grupo de blocos e, em seguida, clica em Adicionar aos blocos reutilizáveis .

Quaisquer alterações ou edições feitas nesse bloco reutilizável são refletidas em todo o site, alterando cada instância do bloco em vez de apenas aquela que você editou. Temos um guia completo de blocos reutilizáveis ​​que você pode conferir para mais informações sobre o assunto.

O Bloco de Título

O bloco de título, conforme mostrado acima, é a sua postagem ou a tag H1 principal da página. Ele também irá gerar o slug de permalink para a postagem, mas isso pode ser editado depois que você salvou a postagem pelo menos uma vez. Isso também será o que os seletores CSS como .post-title e .entry-title extrairão . (Seus plug-ins de SEO permitem que você defina o que é exibido nos mecanismos de pesquisa, no entanto.)

Este é o único bloco no editor do WordPress que você não pode remover ou reposicionar. Você deve usar CSS ou configurações do construtor de página externo para ajustar mais.

Bloco / Área de Conteúdo

Fundamentalmente, você pode considerar que a área de conteúdo é onde você digita. Se quiser, você pode começar a digitar, escrever uma postagem inteira sem nem mesmo considerar os blocos. Em todos os aspectos principais, isso substitui a área WYSIWYG simples do TinyMCE e é a maior mudança no editor do WordPress desde ... bem ... de todos os tempos.

No entanto, com o Editor de bloco, você pode fazer muito mais do que isso. Cada vez que você clicar em “Enter” ou “Return”, você adicionará um novo bloco de Parágrafo. Para adicionar um tipo diferente de bloco (de qualquer tipo), clique no + em um círculo e você verá uma lista suspensa de cada bloco disponível. Certifique-se de rolar porque eles também estão configurados em categorias diferentes. Você também pode pesquisar um bloco específico se souber o tipo que deseja.

Você pode adicionar blocos de vídeo do YouTube, imagens, galerias, reprodutores de áudio, listas, citações e muito mais. Cada um deles tem suas próprias configurações e opções de estilo. Além disso, quanto mais você usa um bloco, o editor do WordPress irá reconhecê-lo como um bloco comumente usado e listá-lo em Mais usado para que você não precise rolar ou pesquisá-lo mais. Blocos reutilizáveis ​​e Grupos de blocos também podem aparecer em Mais usados.

Se você olhar as imagens nesta seção, o (1) aponta para os botões de reordenamento que você obtém para cada bloco quando é selecionado (basta clicar nele para selecionar). O (2) aponta para a lista suspensa que permite excluir o bloco, bem como editar seu conteúdo como HTML, cloná-lo ou adicionar novos blocos ao seu redor.

Essas opções e configurações, entretanto, são diferentes da guia Block Options no canto superior direito da tela que mencionamos acima e discutiremos na próxima seção abaixo.

Esboço do documento, contagem de palavras e outras informações

Na barra de ferramentas superior da página, você tem um i em um círculo. Clique nele e você verá um resumo completo do que consiste o seu documento.

Contanto que você tenha usado os blocos de Título, você terá um Esboço do Documento exibido além da contagem de palavras, número de parágrafo e contagem de blocos. Se você não tiver blocos de título, essa seção não estará lá. Você pode clicar em qualquer um dos elementos do Esboço do Documento para ir diretamente para aquele bloco. Esse recurso é inestimável em documentos mais longos.

Se você clicar no ícone de lista aninhada ao lado daquele, verá uma lista ordenada de todos os blocos da postagem também, em vez de apenas os títulos de um esboço.

Novamente, você pode clicar em qualquer coisa na lista para navegar diretamente e selecionar esse bloco.

Guia Opções de Bloqueio

No canto superior direito do editor do WordPress, você verá uma guia que diz Bloquear . Contanto que você tenha um bloco selecionado, você obterá um conjunto contextual de opções para aquele tipo de bloco. No entanto, quaisquer alterações feitas afetarão apenas o bloco único que você selecionou.

Você pode alterar o tamanho da miniatura de uma imagem nesta guia, adicionar uma cor de fundo a um parágrafo para criar um alerta ou ajustar o tamanho da fonte em um título, por exemplo. Se você estiver com a guia Bloco aberta, as opções mudam para o bloco específico selecionado. Se você tiver o Bloco de Parágrafos destacado, você verá isso.

Ter um Bloco de imagem selecionado mudará a guia Bloco para este.

Cada bloco terá opções específicas que você pode ajustar dentro deles, que se aplicam apenas a esse tipo de bloco (e só serão renderizadas naquele bloco específico). Cada bloco, no entanto, tem uma seção Avançado na guia que permite aplicar classes CSS a esse bloco. Você pode então estilizá-los como achar melhor, usando folhas de estilo externas e código.

Guia de opções do documento

À esquerda da guia Block Options está a guia Document Options . Se você já usou o WordPress no passado, eles serão familiares para você. Aqui, você poderá ajustar as categorias de sua postagem, as tags, adicionar uma imagem em destaque, ajustar o slug do permalink, adicionar um trecho para uso de tema / SEO e habilitar ou desabilitar comentários.

Cada uma dessas seções é praticamente idêntica a onde e o que estavam no editor TinyMCE WYSIWYG. Eles se aplicam a todo o post ou página e não a um único bloco ou todo o site. Além disso, como você pode ver na imagem acima, há uma caixa de opções do foguete WP. Alguns plug-ins aplicarão caixas a esta área, mas sempre pertencerão diretamente ao próprio documento, não tanto ao conteúdo ou aos blocos.

Post Metaboxes Adicionais

As metaboxes para a postagem são onde os plug-ins adicionarão novas opções e recursos para o próprio conteúdo. Eles aparecem no final da área de conteúdo, abaixo dos blocos.

O que aparece nesta seção (se houver alguma) dependerá de quais plug-ins você instalou (ou quaisquer recursos de tema que podem fazer uso da área). Os plug-ins de SEO aproveitam muito essa área e qualquer outra coisa que permita que você interaja de alguma forma com o conteúdo da página, ao invés dos detalhes do documento.

Lista suspensa de opções do editor WordPress

Se você clicar no ícone suspenso de três pontos no canto superior direito da tela, um grande menu suspenso vertical aparecerá. Você pode ajustar várias configurações aqui, todas as quais se aplicam ao próprio editor, em vez do documento, blocos ou conteúdo.

Na maioria das vezes, são opções bastante simples, como gerenciar seus blocos reutilizáveis ​​ou fornecer uma lista de atalhos de teclado ou reabrir o guia de boas-vindas que mencionamos no início.

Algumas das opções usadas com mais frequência, no entanto, estão perto do topo. Especificamente, alterna entre os modos Barra de Ferramentas Superior , Modo Tela Cheia e Visual / Editor de Código .

A alternância da barra de ferramentas superior significa que, em vez de as opções de um bloco selecionado aparecerem como um menu contextual próximo ao canto superior esquerdo do bloco, como mencionamos acima, ele estará em uma área fixa na parte superior da tela.

O modo de tela inteira ativa ou desativa o painel de administração do WordPress. Se você desativar o modo de tela inteira, verá a barra lateral esquerda que inclui as opções típicas do painel, como postagens, páginas, aparência, configurações, ferramentas, etc.

E os alternadores Visual / Code Editor funcionam exatamente como no editor TinyMCE. Os exemplos neste post até agora foram com o Editor Visual. Ou seja, você vê uma representação visual da postagem à medida que a escreve. Você obtém botões para pressionar, menus de contexto e uma renderização em tempo real das configurações conforme você as altera. No entanto, o Editor de código é apenas isso - código. Você terá uma caixa de texto simples na qual escreverá em texto simples e HTML.

Isso geralmente é feito para solucionar problemas com o editor ou para ajustar uma única área ou bloco. Ou talvez para colar o conteúdo que foi escrito em um editor externo que não seria formatado corretamente em vários blocos.

O editor de blocos usa tags HTML específicas para informar ao WordPress que tipo de blocos renderizar, portanto, certifique-se de manter qualquer código que se pareça com <! - wp: paragraph -> intacto. Caso contrário, as coisas podem ficar muito complicadas.

Atalhos globais do Editor de blocos do WordPress

O Editor de bloco também vem com seu próprio conjunto de atalhos bacanas. Eles não são todos iguais aos do TinyMCE, mas são igualmente úteis e tão importantes quanto aprender. Memorizar os mais úteis vai economizar muito tempo e problemas, falando por experiência própria. Você pode pressionar Shift + Alt + H para exibir a seguinte lista de atalhos no próprio editor do WordPress.

Atalhos de documentos

• Alternar entre o editor visual e o editor de código - Ctrl + Shift + Alt + M
• Abra o menu de navegação do bloco - Shift + Alt + O
• Mostrar ou ocultar a barra lateral de configurações - Ctrl + Shift +,
• Navegue para a próxima parte do editor - Ctrl + ` ou Shift + Alt + N
• Navegue até a parte anterior do editor - Ctrl + Shift + ` ou Shift + Alt + P
• Vá para a barra de ferramentas mais próxima - Alt + F10
• Salve suas alterações - Ctrl + S
• Desfaça suas últimas alterações - Ctrl + Z
• Refaça seu último desfazer - Ctrl + Shift + Z

Atalhos de Seleção

• Selecione todo o texto ao digitar. Pressione novamente para selecionar todos os blocos - Ctrl + A
• Limpar seleção - ESC

Bloquear atalhos

• Duplique o (s) bloco (s) selecionado (s) - Ctrl + Shift + D
• Remover o (s) bloco (s) selecionado (s) - Shift + Alt + Z
• Insira um novo bloco antes do (s) bloco (s) selecionado (s) - Ctrl + Alt + T
• Insira um novo bloco após o (s) bloco (s) selecionado (s) - Ctrl + Alt + Y
• Remover vários blocos selecionados - del ou backspace
• Altere o tipo de bloco após adicionar um novo parágrafo - /

Atalhos de Texto

• Coloque o texto selecionado em negrito - Ctrl + B
• Tornar o texto selecionado em itálico - Ctrl + I
• Converta o texto selecionado em um link - Ctrl + K
• Remover um link - Ctrl + Shift + K
• Sublinhar o texto selecionado - Ctrl + U

Empacotando

O editor do WordPress percorreu um longo caminho na última década, e o Editor de blocos atual é definitivamente poderoso o suficiente para nos levar até a próxima. Com o poder de controlar granularmente cada elemento da página, você pode criar conteúdo de forma mais rápida, fácil e eficiente do que era possível antes. No entanto, se o Editor de bloco atual não for para você, o plug-in Editor Clássico existe, e se você estiver na vanguarda, o plug-in Gutenberg fica alguns lançamentos à frente do editor padrão no núcleo do WordPress. Portanto, não importa como você prefere criar, o WordPress tem o que você precisa.

Tem dicas e truques que gostaria de compartilhar sobre o editor do WordPress? Deixe-nos saber nos comentários!