Personalizando temas do WordPress com CSS

Os temas são um dos maiores pontos de venda do WordPress. O tema certo pode fazer seu site realmente se destacar. No entanto, você geralmente desejará fazer pelo menos algumas alterações personalizadas em qualquer tema que usar, a fim de obter tudo certo.

Na maioria dos casos, você precisará usar Cascading Style Sheets (CSS) para personalizar o estilo do seu tema. Com o WordPress, existem várias maneiras de fazer isso. Mesmo que você não tenha nenhuma experiência em lidar com código, você pode facilmente adicionar seus próprios ajustes de CSS ao tema do WordPress.

Neste guia, veremos três métodos que você pode usar para adicionar e editar CSS personalizado no WordPress. Nós o guiaremos por todo o processo e falaremos sobre quando faz sentido usar cada técnica. Vamos começar!

Adicionar CSS personalizado com o personalizador de tema

Nível de Experiência: Iniciante

O WordPress Customizer permite que você faça alterações no design do seu site e visualize-as em tempo real. Para acessá-lo, faça login no painel do WordPress e navegue até a guia Aparência > Personalizar :

Há muitas configurações com as quais você pode brincar aqui. No entanto, agora procure a guia CSS adicional . Depois de clicar nele, uma nova seção será aberta, com um campo onde você pode adicionar CSS personalizado:

Se você é novo em CSS, pode ler mais sobre como usá-lo com o WordPress no Codex oficial. Há também muitos outros recursos excelentes sobre os fundamentos do CSS, e recomendamos verificar alguns deles.

O CSS pode ser um pouco complexo, mas há muito que você pode realizar apenas conhecendo o básico. O melhor de usar o WordPress Customizer é que ele permite que você visualize instantaneamente todas as alterações feitas usando CSS. Isso significa que essa abordagem é perfeita para aprender como o CSS funciona.

Observação : as alterações feitas usando o Personalizador não serão mantidas se você alterar os temas. Além disso, atualizar seu tema atual pode acabar com seu CSS personalizado. Portanto, não recomendamos essa abordagem se você pretende fazer muitas alterações ou opções intermediárias de tema.

Adicionar CSS personalizado com um plug-in

Nível de Experiência: Iniciante a Intermediário

O método acima funciona bem, mas você pode expandir suas opções usando plugins. Nas seções a seguir, exploraremos três plug-ins que permitem personalizar seu tema WordPress.

Observação : o nível de experiência para editar CSS do WordPress usando plug-ins dependerá de qual ferramenta você usa. Recomendamos testar todos eles e ver qual deles se sente mais confortável.

Editor de CSS Avançado

Se você gosta de usar o WordPress Customizer, mas deseja que ele ofereça mais opções, vale a pena dar uma olhada neste plugin. Com o Advanced CSS Editor, você poderá adicionar CSS personalizado para desktops, telefones e tablets. Dessa forma, você pode ajustar a aparência do seu site em cada tipo de dispositivo.

Depois de instalar o plug-in do WordPress, navegue até a guia Aparência > Personalizador em seu painel. Você deve ver uma nova opção do Advanced CSS Editor , fornecendo acesso a vários editores para cada tipo de dispositivo:

Tudo o que você precisa fazer é adicionar o CSS personalizado que deseja, testar para garantir que está funcionando corretamente e salvar as alterações no seu tema.

Prós:

• Você obtém controle total sobre a aparência do seu site em todos os dispositivos.
• Você ainda pode editar seu tema por meio do Personalizador.

Contras:

• Adicionar CSS personalizado para vários tipos de dispositivos pode dar muito trabalho.

Avaliação média: 4,5/5

Nota: Este plug-in também inclui uma opção para reduzir seu CSS, o que pode ajudar a diminuir o tempo de carregamento do seu site.

CSS personalizado modular

O CSS personalizado modular permite que você adicione CSS ao seu tema por meio do WordPress Customizer. No entanto, ele também adiciona alguns recursos muito bem-vindos ao editor CSS padrão. Para ser mais específico, este plug-in permite criar CSS personalizado para temas individuais e fazer alterações globais que persistem em qualquer tema que você configurar:

Para acessar esses campos, você precisa retornar à seção Aparência > Personalizador > CSS adicional . Quando estiver lá, você pode começar a fazer alterações.

Prós:

• Você pode adicionar CSS personalizado apenas para temas específicos e fazer alterações que persistirão mesmo se você trocar de tema.

Contras:

• O CSS 'global' pode não funcionar bem com todos os temas, então você precisa ter cuidado ao mudar para um novo.

Classificação média: 5/5

CSS de Origem do Site

SiteOrigin CSS é diferente dos plug-ins sobre os quais falamos até agora. Em vez de adicionar novos recursos ao Personalizador, ele oferece um editor CSS independente do WordPress. Você pode acessar esse novo editor navegando até a guia Aparência > CSS personalizado após instalar o plug-in:

À primeira vista, este editor de CSS não parece muito. No entanto, se você clicar no ícone do olho, abrirá um editor visual. Aqui, você pode clicar em qualquer elemento do seu tema e editá-lo facilmente usando CSS:

O plug-in CSS do SiteOrigin pode ser um pouco complicado no começo. No entanto, também pode economizar muito tempo, já que você não terá que procurar os seletores corretos. Tudo o que você precisa fazer é clicar no elemento que deseja modificar e adicionar o código CSS de sua preferência.

Prós:

• Você pode editar qualquer elemento que desejar em seu site clicando nele.
• Este plug-in permite que você altere alguns aspectos simples do seu tema sem precisar usar CSS, como suas fontes.

Contras:

• Pode ser difícil acompanhar todo o CSS personalizado que você adiciona ao seu tema se ajustar vários elementos.

Classificação média: 4,9/5

Editar CSS com folha de estilo de tema filho

Nível de Experiência: Avançado

Um tema filho é uma cópia de um tema existente (conhecido como 'pai'). Os temas filhos permitem que você faça alterações no seu site WordPress com segurança. Isso porque você ainda pode atualizar o tema pai, sem perder nenhum de seus ajustes personalizados de CSS. Além disso, se você adicionar qualquer CSS que afete seu site negativamente, basta desativar o tema filho.

Qualquer CSS personalizado que você adicionar a um tema filho substituirá os estilos de seu pai. No entanto, para que isso funcione, você precisará saber como criar um tema filho em primeiro lugar. Assim que seu 'filho' estiver pronto, você poderá acessar seus arquivos usando um cliente FTP como o FileZilla.

Depois de se conectar ao seu site via FTP, você desejará localizar sua pasta raiz, que geralmente é chamada de public_html ou www , ou recebe o nome do seu site:

Em seguida, navegue até o diretório wp-content/themes . Lá, você encontrará pastas individuais para todos os seus temas, incluindo o filho que você configurou. Abra a pasta do tema filho e procure o arquivo style.css dentro:

Clique com o botão direito do mouse no arquivo do tema e selecione a opção Visualizar/Editar . Isso abrirá o arquivo usando seu editor de texto padrão, permitindo que você faça alterações nele. Isso significa que você pode adicionar CSS personalizado ao seu tema, só que agora você está usando um editor de texto completo em vez do WordPress Customizer.

Quando terminar, salve as alterações no arquivo e feche o editor. Em seguida, você pode visitar seu site para ver se as alterações feitas funcionaram conforme o esperado. Caso contrário, você pode retornar ao seu arquivo style.css e continuar ajustando seu CSS.

Observação: esta é uma visão geral de alto nível e há muito mais para configurar e usar um tema filho. Sugerimos proceder com cuidado se você for novo neste processo.

CSS personalizado com personalizador de tema versus plug-ins CSS versus folha de estilo de tema filho

Como você pode ver, você tem muitas opções quando se trata de adicionar CSS personalizado ao WordPress. No entanto, escolher a abordagem certa pode ser um desafio. Vamos detalhar as escolhas, de acordo com seu nível de experiência com a plataforma e com CSS em geral:

• Você é novo no WordPress e não está acostumado a usar CSS. Nesse cenário, sua melhor aposta é ficar com o WordPress Customizer. Com ele, você poderá visualizar as alterações instantaneamente e se acostumar a usar CSS.
• Você tem alguma experiência com WordPress e CSS. Nesta fase, você desejará mais opções do que o personalizador padrão oferece. Portanto, recomendamos o uso de plugins que melhorem sua funcionalidade para editar CSS personalizado no WordPress.
• Você é um veterano do WordPress que se sente confortável usando CSS. Se você não se intimida com CSS e snippets de código, provavelmente desejará configurar um tema filho e editar sua folha de estilo manualmente.

Lembre-se de que essas são apenas diretrizes e você deve se sentir à vontade para usar qualquer abordagem que seja mais confortável para você.

Melhore a experiência digital com um ótimo design e hospedagem de alto nível

O design do seu site desempenha um papel significativo no que os visitantes pensam sobre ele. Com o WordPress, você obtém acesso a milhares de temas e pode editar qualquer um deles usando CSS personalizado.

No entanto, administrar um site de sucesso não é apenas uma questão de aparência. Você também precisará de hospedagem na web WordPress que forneça excelente desempenho, segurança e suporte. Com o WP Engine, você terá acesso a todos esses recursos com cada um de nossos planos!