Como usar o Editor de aparência no WordPress

wordpress-aparecimento-editor.png


Até agora, você teve a chance de personalizar o WordPress CMS por meio de vários editores fáceis de usar. O Personalizador permitiu que você percorra diferentes opções de aparência suportadas pelo seu tema. Mas quando você decide personalizar seu site além das opções fornecidas, deve conhecer o Editor de aparência do WordPress.

Entre muitos arquivos no WordPress que podem ser modificados, existem dois arquivos particularmente interessantes. Estamos falando dos arquivos de modelo e folha de estilo do tema que você pode editar diretamente do WordPress.

Antes mesmo de começar a considerar a possibilidade de alterar o código por conta própria, devemos avisar que o WordPress não cria backups dos arquivos afetados. Portanto, quaisquer alterações são permanentes.

Como editar temas com o Editor de Aparências

Quando estiver pronto para aprender mais sobre o WordPress e sujar as mãos, digitando algum código personalizado, navegue até Aparência -> Editor. Este editor interno permite alterar o código mantido nos arquivos de modelo e folha de estilo do tema. Depois de aberto, o arquivo style.css que o seu tema atual está usando será exibido automaticamente à sua frente.

Editor de aparência do WordPress

Dependendo da configuração do seu site, talvez você não consiga acessar alguns arquivos. Nesse caso, o WordPress exibirá uma mensagem de aviso para informar que você precisa alterar as permissões de arquivo para esse arquivo específico. Para saber mais, consulte como alterar as permissões de arquivo no WordPress.

Como selecionar arquivos para edição

Assim que você abrir o Editor, o WordPress mostrará todos os arquivos de modelo e folha de estilo disponíveis do tema ativo. Se você deseja editar um tema inativo, vá para o topo da lista, escolha um item no menu suspenso e clique no botão “Selecionar”. O WordPress carregará todos os arquivos associados ao tema escolhido.

Modelos

Para selecionar um arquivo, navegue pela lista no lado direito da janela. Cada um tem um nome e um nome de arquivo mostrados entre colchetes abaixo. Para editar qualquer um dos arquivos, basta clicar nele e o código aparecerá no editor do lado esquerdo.

Seja cuidadoso

Embora a edição de arquivos da folha de estilo seja relativamente segura, a edição de arquivos PHP pode causar erros que podem tornar seu site inutilizável. Tenha muito cuidado se você decidir editar arquivos PHP no Editor de Aparências.

Exemplo: Como alterar o tamanho da fonte através do Editor de Aparências

Para mostrar como o editor funciona, estamos prestes a alterar o tamanho da fonte do texto nas postagens no tema Twenty Seventeen.

Antes de continuarmos, gostaríamos de desviar sua atenção por um breve momento. Na versão 4.7, o WordPress introduziu um novo recurso que permite adicionar CSS personalizado mais rapidamente. Em vez de editar o código através do Editor de Aparências, sugerimos abrir Aparência -> Personalizar -> CSS Adicional onde você pode escrever qualquer código CSS personalizado que desejar, sem afetar diretamente a folha de estilo.

Inspecionar elementos

Inspecionar elementos no Google Chrome

Se você ainda deseja editar a folha de estilo diretamente pelo Editor de Aparências, veja o que fazer:

  1. Abra qualquer postagem do seu blog
  2. Selecione o texto de uma postagem
  3. Clique com o botão direito do mouse na seleção e escolha “Inspecionar” ou “Inspecionar elemento” (dependendo do navegador que você usa)
  4. Na nova seção ou janela que se abriu, localize as opções destacadas

    elemento

Inspecionar elementos parágrafo

A classe também deve estar visível na guia “Estilos”. Se você clicar no estilo, seu navegador deverá abrir a folha de estilo e permitir que você edite o CSS diretamente do navegador. Você pode usar esta função para testar o código CSS personalizado antes de aplicar as alterações no seu site. Como desejamos modificar o tamanho da fonte do texto nas postagens, o seguinte código CSS é do nosso interesse:

p {
tamanho da fonte: 50 px;
}

Aplicar mudanças

Depois de testar alguns tamanhos de fonte no navegador, lembre-se do que você mais gostou. Em seguida, você pode prosseguir para o Editor e modificar a fonte:

  1. Navegar para Aparência -> Editor
  2. Se ainda não estiver selecionado, escolha Folha de estilo (style.css) arquivo da lista no lado direito
  3. Encontre a classe “p”
  4. Adicione “tamanho da fonte: 50 px;” (o código inteiro deve se parecer com o que escrevemos acima)
  5. Clique no botão “Atualizar arquivo”

Modificar o tamanho da fonte do parágrafo

O novo estilo é salvo e você está pronto para recarregar o site. Abra qualquer postagem para ver a alteração no tamanho do texto. Se você não vê a diferença e tem certeza de que ajustou o código corretamente, verifique se limpe o cache do navegador ou pressione CTRL + F5 para atualizar a página.

Tenha cuidado ao trabalhar com o Appearance Editor

O Appearance Editor é uma ferramenta incrível para fazer alterações rápidas nos arquivos de modelo e folha de estilo. Mas, para tirar o melhor proveito disso, é importante que você tenha certeza absoluta das mudanças que está fazendo. Qualquer alteração nos arquivos PHP pode bloquear seu site até você corrigi-los via FTP. Portanto, ao trabalhar com arquivos PHP, sugerimos que você trabalhe em um arquivo local que possa ser transferido via FTP, mantendo sempre o backup original. Se fizer modificações nas folhas de estilo, não se esqueça dos recursos CSS adicionais que foram introduzidos há alguns meses.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Liked Liked