Como personalizar um tema WordPress com CSS
quando você quer aprender como personalizar um tema WordPress com CSS, uma das primeiras coisas que você precisa saber é como editar arquivos dentro do próprio tema.
o processo de edição de arquivos de tema é efetivamente o mesmo se você está olhando para personalizar CSS ou HTML, e em tutoriais anteriores nesta série já cobrimos este processo, com a finalidade de modificar HTML.
Então, para evitar a recauchutagem, o mesmo chão, dê uma olhada no “Como Editar o HTML em um Tema WordPress” e “Como Instalar o WordPress Localmente Com XAMPP” para saber sobre:
- Edição de arquivos através do editor de temas
- Download e upload de arquivos através de FTP ou remoto de conexão
- Por que você deve considerar fazer as alterações dentro de um tema filho
- Edição off-line via XAMPP
Com os métodos de edição de ficheiros de temas já abordados, neste tutorial vamos ficar focado sobre como editar o css em WordPress por aprender a respeito desses tópicos:
- Como adicionar CSS personalizado através do tema personalizador
- Como identificar a folha de estilos(s) tema está usando
- Como identificar o CSS que precisa ser mudado, e onde, a fim de personalizar uma parte específica de um tema
Observação: Este artigo pressupõe que você tenha um conhecimento básico de CSS, mas não necessariamente de como editar o CSS e jquery.
Premium WordPress Temas e Plugins
Antes de começar, não se esqueça que você pode explorar os milhares de temas WordPress no ThemeForest e WordPress plugins no CodeCanyon. Compre esses temas e plugins WordPress de alta qualidade e melhore a experiência do seu site para você e seus visitantes.
como editar CSS no Personalizador de tema WordPress
o WordPress tem uma área dedicada na qual você pode adicionar seu próprio código CSS personalizado. Este código será carregado no momento certo para garantir que ele substitua o estilo padrão do tema, e usar essa abordagem não faz alterações diretas nos arquivos de tema.
Na barra vertical do lado esquerdo do seu painel de administração WordPress vá para Aparência > Personalizar:
Isso fará com que você o tema de área de personalização, onde você pode clicar no item de menu CSS Adicionais:
UM grande campo aparecerá, na qual você pode adicionar qualquer um CSS personalizado que você gosta:
Salve as alterações clicando em azul botão Publicar no topo da barra lateral esquerda quando tiver concluído a adição de código personalizado.
como identificar a(S) Folha (s) de estilo de um tema
se você não quiser usar a área CSS Additonal no Personalizador de tema e, em vez disso, quiser editar o CSS do tema diretamente, você precisará de uma maneira de descobrir quais arquivos um tema está realmente usando para estilizar.
na maioria dos casos, os temas usarão a estrutura padrão para WordPress e terão um arquivo chamado “estilo.css ” no diretório raiz do tema. Na verdade, este é um arquivo de tema essencial para que você sempre o encontre em qualquer tema.
no entanto, ao abri-lo para edição, você pode achar que está vazio de código e o desenvolvedor está carregando o estilo de outro lugar no tema. Ou, você pode até achar que eles estão carregando em vários arquivos de folha de estilo.
existem duas maneiras de verificar quais folhas de estilo estão sendo usadas por um tema.
inspecionando o código da cabeça
o primeiro método é inspecionar o código <head> do tema. Você pode fazer isso clicando com o botão direito do mouse em qualquer lugar da página e escolhendo Exibir a fonte da página e, em seguida, localizando as tags <head>...</head>.
entre essas tags, procure elementos <link> que também tenham rel='stylesheet'. Em seguida, veja quais deles estão vindo do diretório do seu tema. Os URLs das folhas de estilo informarão onde na estrutura do tema encontrá-los.
Note que se você estiver executando um plugin que combina e minifies todos do seu site folhas de estilo para um arquivo, esta técnica não irá funcionar, porque tudo o que você verá é a URL do arquivo único. Em vez disso, use a técnica dois, verificando o arquivo de funções.
verificando o arquivo de funções
sempre que um tema usa uma folha de estilo, ele deve informar ao WordPress Qual arquivo deseja usar, por meio de uma função chamada wp_enqueue_style(). Assim, podemos ver exatamente quais folhas de estilo o tema carrega encontrando seu uso desta função.
cada tema tem um arquivo chamado “funções.php ” localizado em seu diretório raiz. A utilização da função wp_enqueue_style() normalmente está neste arquivo, portanto, abra-o e comece a procurar o nome da função.
quando você localizar instâncias da função wp_enqueue_style(), procure entre os parênteses o segundo parâmetro, ou seja, o bit de texto após a primeira vírgula. Esse texto mostra a localização da folha de estilo. Por exemplo:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
no código acima, o segundo parâmetro é:
get_template_directory_uri() . '/css/mainstyle.css')
isso nos diz que a folha de estilo está em um subdiretório de tema chamado “css” e que seu nome de arquivo é “mainstyle.Forum”.
como identificar qual CSS alterar
depois de saber como adicionar ou editar o CSS do tema, a próxima coisa a aprender é como descobrir qual código você realmente precisa alterar.
a melhor maneira de fazer isso é usar as ferramentas do desenvolvedor em seu navegador, idealmente Chrome ou Firefox devido à qualidade de suas ferramentas.
digamos, por exemplo, que você deseja alterar o tamanho da fonte de seus títulos de postagem. Clique com o botão direito em um dos títulos da postagem e selecione a opção inspecionar:
isso abrirá o painel Ferramentas do desenvolvedor. Procure na guia Estilos uma propriedade font-size.
Se você não vir um, o navegador pode mostrar-lhe um pai ou filho elemento, então na guia Elementos tente clicar no próximo elementos até encontrar um elemento que, com precisão, destaca a forma do título do post de texto e tem um font-size propriedade:
Agora, no separador de Estilos, tente alterar o valor para font-size propriedade. Se você vir o tamanho da alteração de texto na janela do navegador, você sabe que encontrou o CSS correto.
para saber onde está na folha de estilo este CSS, procure no canto superior direito do local onde você acabou de editar o valor font-size. Você deve ver um nome de arquivo, depois dois pontos e um número.
o nome do arquivo informa em qual folha de estilo o código está e o número após os dois pontos informa em qual linha você encontrará esse código. Por exemplo, a imagem acima mostra o código do ” estilo.css ” arquivo na linha 4054. Se você estiver editando diretamente a folha de estilo do tema, agora pode abri-la, vá para o número da linha em questão e altere o CSS.
se você estiver trabalhando no campo CSS adicional do personalizador de tema, ou dentro de um tema filho, Você também precisará segmentar o mesmo seletor que o CSS original, para que você possa substituí-lo com seu próprio estilo.
de volta às ferramentas de desenvolvedor do navegador, procure o seletor que está acima da propriedade font-size que você acabou de alterar. É à esquerda do arquivo de folha de estilo e especificação de número de linha que acabamos de olhar.
Copie esse seletor inteiro e cole-o em seu código personalizado e use-o para direcionar corretamente seu valor font-size modificado.
sempre verifique se há opções de tema Baked-in
Antes de se dar ao trabalho de personalizar CSS, sempre verifique no Personalizador de Tema as opções que o desenvolvedor já pode ter incorporado no tema.
os temas geralmente têm opções de personalização bastante abrangentes que não exigem código personalizado. Portanto, antes de editar qualquer CSS, você pode economizar muito tempo vendo se já existe uma maneira de fazer a alteração necessária.
Como personalizar um tema WordPress passo a passo
agora que falamos sobre como personalizar CSS e HTML de um tema WordPress, você pode se sentir um pouco inseguro de onde começar. Então, vamos resumir as coisas em uma lista básica de etapas a seguir:
- Verifique o Tema Personalizador para ver se já existe disponível uma opção que pode facilitar a mudança que você deseja para fazer
- Se não, e você precisará adicionar algumas simples CSS personalizado, use o CSS Adicionais de campo no Tema Personalizador
- Se você precisa fazer personalizações mais abrangentes para HTML ou CSS, considere torná-los dentro de um tema filho
- Para fazer pequenas alterações diretamente para o tema, uso o WordPress em construção editor de temas
- mais aprofundada a alterações diretamente para um tema, usar FTP, uma conexão remota, ou trabalho completamente offline com o XAMPP
- depois de selecionar o método de edição, identifique a(s) Folha (s) de estilo do tema inspecionando o código
<head>do seu site ou procurando as funções “do tema.php” para uso dowp_enqueue_style()função - Localize as linhas específicas de CSS, você precisará modificar, e seus relacionados seletores, usando a Inspecionar função do Chrome ou do Firefox developer tools
Quando você cavar em todos os acima e conhecer, você vai começar a ver como é personalizável WordPress é.
Antes de conhecê-lo, você estará fazendo seus próprios temas filhos completamente originais e criando designs todos os seus.
e acontece que aprender “como fazer um tema filho no WordPress” é o próximo tutorial que está chegando nesta série. Fique atento!