Guias/Criar conteúdo/Páginas e posts/Usar o editor clássico

Usar o editor clássico

Neste guia, você descobrirá como usar o editor clássico, a experiência de edição legada no WordPress. O editor do WordPress é moderno e faz tudo que o editor clássico pode fazer e muito mais, então mesmo que o editor clássico ainda esteja disponível, ele não é recomendado.

Como acessar o editor clássico

💡

Você sabia? O editor do WordPress inclui o bloco clássico, que replica grande parte das funcionalidades do editor clássico no editor moderno. Você pode usar o bloco clássico para aproveitar todas as funcionalidades do editor do WordPress e manter a experiência de escrita clássica.

Se preferir, você ainda pode acessar o editor clássico. As etapas para acessá-lo dependem de se seu site usa plugins ou não:

Sites sem plugins

Para editar uma página ou post no editor clássico, siga estas etapas:

  1. Acesse o painel do seu site.
  2. Em Configurações → Geral, verifique se Estilo da interface de administração está definido como Padrão em vez de Clássico.
  3. Navegue até Páginas ou Posts.
  4. Passe o mouse sobre a página ou post que você quer editar. Depois, selecione o editor clássico.
Uma lista de páginas com uma seta apontando para o link do editor clássico.
Como acessar o editor clássico na visualização padrão no WordPress.com

Sites com plugins

Se você tem um site com plugin ativado e quer acessar o editor clássico, basta ativar o plugin do editor clássico. O plugin é instalado automaticamente para você.

  1. Acesse o painel do seu site.
  2. Na barra lateral, acesse Plugins → Plugins instalados.
  3. Procure o plugin instalado do editor clássico.
  4. Clique no link Ativar abaixo do nome do plugin.
  5. Quando você criar um novo post ou página, o editor clássico será usado como padrão.

Se o plugin do editor clássico estiver ativo e a edição de uma página ainda levar você ao editor do WordPress, verifique o seguinte (isso não se aplica a sites que não usam o plugin):

  1. Acesse o painel do seu site.
  2. No lado esquerdo, vá para Configurações Escrita.
  3. Confirme se você está na visualização clássica: clique na guia Visualização no canto superior direito, e selecione Visualização clássica.
  4. Verifique se Editor padrão para todos os usuários está definido como “Editor clássico”.
  5. Role para baixo e clique no botão Salvar alterações para aplicar as alterações feitas nas configurações.
As opções "Editor padrão para todos os usuários" e "Permitir que os usuários troquem de editor" nas configurações de escrita.

Sobre o editor clássico

Você pode usar o editor clássico para criar, editar e formatar seu conteúdo em uma visualização parecida com a de um processador de texto. Também é possível usar o moderno editor do WordPress para criar tudo o que o editor clássico pode fazer, de posts de blog simples e artigos a sites únicos, repletos de mídia e responsivos para dispositivos móveis.

O editor clássico tem duas visualizações: visual e HTML. Se você não estiver confortável editando em HTML, selecione a guia Visual no canto superior direito da área do editor:

O editor clássico com uma caixa desenhada ao redor da guia "Visual".
Guia visual do editor clássico

O conteúdo do editor clássico terá o estilo do CSS (um tipo de código que define o estilo em HTML, como cor, espaçamento, largura etc.) do tema que você escolheu. O que você vê no editor talvez não corresponda com precisão ao que é visto no site ativo. Para conferir a aparência do post ou página no site ativo, use o botão Visualização.

Explicação dos botões do editor clássico

O editor clássico tem duas linhas de botões de edição. Para descobrir o que cada botão faz, passe o mouse sobre eles. Isso fará com que apareça uma breve dica de ferramenta, descrevendo o ícone e sua finalidade.

Primeira linha de botões de edição

Assim que é aberto, o editor clássico exibe apenas uma linha de ícones:

A seção superior do editor clássico com diferentes botões e ícones para aplicar formatação.
Formatação do editor clássico

Da esquerda para a direita, esses ícones são:

  1. Adicionar mídia (imagens, vídeos e muito mais)
  2. Estilo (diversos estilos de formatação definidos pelo tema)
  3. Negrito
  4. Itálico
  5. Lista com marcadores
    • Item 1
    • Item 2
  6. Lista numerada
    1. Item 1
    2. Item 2
  7. Bloco de citação destacada (uma forma de exibir um texto de citação no estilo do respectivo tema)
  8. Alinhar à esquerda
  9. Alinhar ao centro
  10. Alinhar à direita
  11. Inserir/edita/remover link
  12. Inserir a tag Leia mais
  13. Alternar barra de ferramentas (abre a segunda linha dos ícones de edição)
  14. Adicionar formulário de contato

Segunda linha de botões de edição

Para exibir a segunda linha de ícones, use o botão Alternar barra de ferramentas à direita na primeira linha (botão 13 na imagem acima). Essa ação abrirá uma segunda barra de ferramentas com a seguinte aparência:

Uma seta do ícone Alternar da barra de ferramentas para a segunda linha de ícones de edição.
Ferramentas de edição adicionais

Da esquerda para a direita, esses ícones são:

  1. Tachado
  2. Linha horizontal
  3. Cor do texto (altera a cor do texto)
  4. Colar como texto
  5. Limpar formatação
  6. Caracteres especiais
  7. Diminuir a indentação (move o texto para a esquerda)
  8. Aumentar a indentação (move o texto para a direita)
  9. Desfazer (desfaz a última ação)
  10. Refazer (refaz a última ação)
  11. Ajuda (exibe os atalhos do teclado)

Alinhamento

É possível alinhar tanto os textos quanto as imagens usando os botões apropriados:

Esquerda

Alinhar à esquerda
Alinhar à esquerda

Direita

Alinhar à direita
Alinhar à direita

Centro

Alinhar ao centro
Alinhar ao centro

Estilos

Use o menu suspenso de estilo para alterar a formatação de qualquer texto selecionado. Isso inclui diversos estilos de títulos e outros predefinidos, que estão incorporados ao tema.

Observe que modificações de estilo mais complexas necessitam de CSS Personalizado (e o conhecimento apropriado em CSS).

Estilos de texto no editor clássico
Estilos de texto no editor clássico

Cor do texto

Para alterar a cor do texto, primeiro destaque um trecho:

Ao clicar na seta para baixo ao lado do botão “Cor do texto”, um seletor de cores será exibido. Enquanto o seletor de cores estiver sendo aberto, a seta apontará para cima. Você pode clicar nela para fechar o seletor sem selecionar outra cor:

Imagem da opção de seleção de cores

A cor escolhida será aplicada ao texto selecionado e ficará como cor padrão no botão “Cor do texto”.

Se você clicar direto no botão “Cor do texto”, a cor padrão mais recente será aplicada.

Imagem do botão de seleção de cores com a cor padrão

Como colar texto

Ao copiar e colar um texto de outro lugar, nem sempre esse texto será exibido como esperado. O motivo é que o texto copiado de outro programa (como de um e-mail ou documento Word) carrega algumas formatações indesejadas.

Usar o botão Colar como texto faz com que seja executado um processo especial de limpeza para remover qualquer formatação especial e tags HTML que poderiam alterar a formatação do texto.

Veja abaixo como fica o ícone da barra de ferramentas no modo “Texto simples desativado”. Observe que não ele não está em uma caixa:

Imagem do botão "Colar como texto" quando não está ativo

Agora, veja a diferença no ícone da barra de ferramentas quando está no modo “Texto simples ativado”. Observe que o ícone está dentro de uma caixa e o botão está sombreado em preto:

Imagem do botão "Colar como texto" quando ativado

Limpar formatação

Botão "Limpar formatação"

O botão “Limpar formatação” remove toda a formatação (negrito, itálico, cores etc.) de um trecho destacado do texto. Primeiro, selecione o texto:

Imagem do texto formatado

Toda a formatação será removida quando você clicar no botão:

Imagem do texto após clicar no botão "Limpar formatação"

Caracteres especiais

É possível inserir caracteres especiais em um post ou página. Posicione o cursor onde você quer inserir um caractere e clique no botão “Caracteres especiais”. Uma janela pop-up será exibida:

Imagem dos caracteres especiais

Clique em qualquer caractere e ele será inserido onde o cursor estiver posicionado.

Diminuir/aumentar a indentação

O botão “Aumentar a indentação” move o texto em um nível, enquanto o botão “Diminuir a indentação” remove um nível.

exemplo-de-diminuir-a-indentacao
exemplo-de-aumentar-a-indentacao

Espaçamento

Pressionar a tecla Enter (Return) encerra o parágrafo em que você está escrevendo e inicia um novo. Se quiser começar uma nova linha sem criar um novo parágrafo, mantenha a tecla Shift pressionada ao pressionar Enter.

Atalhos do teclado

O editor clássico tem diversos atalhos de teclado, ou hotkeys, incorporados.

Para ver uma lista com todos os atalhos disponíveis, ative a exibição da segunda linha de ícones na barra de ferramentas. Depois, clique em Atalhos do teclado (ícone de ponto de interrogação) no final da segunda linha.

Uma janela aparecerá com a lista de atalhos de teclado disponíveis no editor.

Imagem dos atalhos do teclado

Para usar os atalhos padrão, pressione Command + tecla no Mac ou Control + tecla no Windows:

TeclaAçãoTeclaAção
CCopiar x Cortar
VColaraSelecionar tudo
ZDesfazerYRefazer
BNegritoIItálico
USublinhadoKInserir/editar link

Para usar outros atalhos, pressione Control + Option + tecla no Mac ou Control + Alt + tecla no Windows:

TeclaAçãoTeclaAção
1Título 12Título 2
3Título 34Título 4
5Título 56Título 6
LAlinhar à esquerdaCAlinhar ao centro
RAlinhar à direitaJJustificar
DTachadoQCitação
ULista de marcadoresOLista numerada
aInserir/editar linkSRemover link
MInserir/editar imagemTInserir a tag Leia mais
HAtalhos do teclado x Código
PInserir tag de quebra de página

Copied to clipboard!