Como personalizar seu site WordPress com CSS: 3 métodos fáceis

O WordPress evoluiu ao longo dos anos e hoje é uma plataforma bastante flexível e fácil de personalizar por meio de seu editor de blocos, o Gutenberg. Ainda assim, haverá momentos em que você precisará de um pouco mais de alcance do que o fornecido pelo editor de Gutenberg.

É aqui que o CSS personalizado se torna útil. O estilo CSS permite que você edite as cores, espaçamento, fontes, layouts e basicamente todos os outros elementos visuais do seu site WordPress, permitindo que você tenha a aparência exata que deseja.

Neste artigo, vamos guiá-lo pelos fundamentos da personalização de seu site WordPress com CSS.

Por que personalizar seu site com CSS?

Adicionar CSS personalizado é apenas um dos métodos que você pode usar para ajustar a aparência do seu site. Outros métodos incluem o uso de um tema premium WordPress bem caracterizadoou instalando um construtor de páginas.

Embora esses dois métodos sejam um pouco mais fáceis de usar para iniciantes e não exijam nenhum conhecimento de codificação, o uso de CSS personalizado é mais vantajoso de duas maneiras principais:

Custo Zero

Temas premium e criadores de páginas WordPress podem ser úteis, mas têm um custo - em dólares e centavos. Por outro lado, munido do conhecimento de como escrever CSS personalizado, você pode obter os mesmos efeitos sem incorrer em despesas extras.

Inchaço mínimo

Os construtores de páginas e temas bem apresentados são projetados para dar aos usuários mais flexibilidade e uma ampla gama de opções para personalizar seus sites. Por causa disso, eles tendem a aumentar o volume dos sites, tornando-os potencialmente mais lentos.

Ao escrever CSS customizado, por outro lado, você apenas adicionará os recursos necessários, geralmente resultando em sites mais leves e velocidades de carregamento mais rápidas.

3 métodos fáceis para personalizar seu site WordPress com CSS

Com sorte, você já sabe como escrever CSS. Depois de se familiarizar com o básico, você pode usar qualquer um dos seguintes métodos para adicionar CSS personalizado ao seu site WordPress:

Método 1: usar o WordPress Customizer

Com o WordPress 4.7 ou qualquer versão posterior, você pode adicionar CSS personalizado diretamente da área de administração. Este é o método mais direto e, como há uma visualização ao vivo disponível, você pode ver todas as alterações feitas em tempo real.

Também é o mais recomendado, pois todas as alterações que você fará são salvas no próprio WordPress. Isso significa que, mesmo se você alterar ou atualizar seu tema, não perderá seu CSS personalizado.

Aqui estão as etapas a serem seguidas:

Passo 1: Navegar para Aparência> Personalizar.

Isso abrirá o personalizador de tema do WordPress, que mostra uma visualização ao vivo do seu site à direita, junto com algumas opções de personalização à esquerda. Role para baixo até a parte inferior do painel esquerdo e você encontrará um CSS Adicional aba.

Passo 2: Clique no CSS Adicional Aba.

Isso abrirá uma pequena caixa no painel esquerdo onde você pode adicionar seu CSS personalizado. Você pode digitar quantas linhas de código CSS quiser. A grande vantagem deste editor é que ele valida seu código, alertando você se houver algum erro.

etapa 3: Publique suas alterações.

Qualquer regra CSS válida que você adicionar aparecerá na área de visualização ao vivo à direita. Para aplicar as alterações ao seu site, clique no Publicar botão no topo do painel esquerdo quando estiver satisfeito. Se não quiser que as alterações tenham efeito imediato, você também pode agendar a publicação em um momento posterior ou salvar seu trabalho como um rascunho.

É importante observar que todas as alterações feitas usando o personalizador estão vinculadas ao seu tema atual. Se você mudar para outro tema, as alterações serão perdidas, a menos que você copie seu CSS personalizado e o adicione ao novo tema. É uma boa prática salvar todos os CSS personalizados que você adicionar a um tema em um bloco de notas. Dessa forma, você pode simplesmente copiar o código e colá-lo na seção “CSS Adicional” de um tema diferente.

Se isso parecer muito trabalhoso e você preferir uma solução que permita aplicar seu CSS personalizado a qualquer tema WordPress que usar, o próximo método é para você.

Método 2. Use um Plugin

Os plug-ins CSS personalizados armazenam seu CSS personalizado separado do tema, permitindo que suas alterações sejam aplicadas independentemente do tema usado. Esses plug-ins também vêm com recursos extras, como preenchimento automático, que podem tornar a adição de CSS mais fácil.

A única desvantagem é que eles são softwares de terceiros, o que significa que podem tornar seu site mais lento. A maioria desses plug-ins são leves, portanto, geralmente têm pouco impacto no desempenho do seu site. Aqui estão alguns dos melhores plug-ins CSS personalizados que você pode usar:

• CSS personalizado simples

CSS personalizado simples é um dos plug-ins CSS personalizados mais populares. É leve, fácil de usar e oferece ótimos recursos. Configurá-lo é fácil. Tudo que você precisa fazer é instalar e ativar o plugin. Em seguida, navegue até o Aparência seção no painel esquerdo do seu painel.

Você verá uma nova opção chamada CSS customizado. Clicar nele abrirá um editor onde você pode adicionar seu CSS personalizado. Clique no Atualizar CSS personalizado botão para salvar suas alterações. Para ver as mudanças, basta atualizar seu site.

• CSS e JS personalizados simples

Se você quiser ainda mais recursos, o Plugin CSS e JS personalizado simples é uma ótima opção. Além de adicionar CSS, permite adicionar entradas de JavaScript.

• CSS Hero

Se você não quiser escrever uma única linha de código, o Plugin CSS Hero é perfeito para você. Este plugin oferece um editor CSS visual com menus suspensos e campos de entrada que permitem editar quase qualquer estilo CSS em seu site sem a necessidade de escrever nenhum código.

Método 3. Edite o código bruto

Os dois métodos descritos acima permitem que você adicione CSS personalizado ao seu site sem a necessidade de tocar em nenhum dos arquivos de tema. Mas, em alguns casos, você pode querer editar o CSS do seu tema ou adicionar CSS personalizado diretamente ao código do seu tema.

Para fazer isso, você precisará acessar a folha de estilo do seu site. Uma maneira fácil de acessar esta folha de estilo é por meio do Editor de Tema no painel do WordPress.

Antes de prosseguirmos, no entanto, existem algumas salvaguardas que você precisa implementar. Primeiro, faça backup do seu site. Ao editar seus arquivos de tema, é fácil cometer erros que podem travar seu site.

Um backup garante que você tenha um site funcional para o qual voltar. Próximo, criar um tema infantil. Se você fizer edições diretas em seu tema pai, as alterações serão perdidas sempre que o tema for atualizado.

Depois que essas proteções estiverem em vigor, faça login no back-end do WordPress. Vamos para Aparência> Editor de tema. Ao clicar na opção do editor de tema, você verá uma caixa pop-up avisando-o contra fazer alterações diretas em seus arquivos de tema. Se você seguir as etapas acima, está pronto para continuar.

Clique eu entendo para prosseguir.

Depois de clicar, você verá a folha de estilo do seu site por padrão. Caso contrário, basta olhar no painel direito e clicar em style.css debaixo de Folha de estilo opção.

A partir daqui, você pode fazer alterações diretas em seus arquivos de tema. Só não se esqueça de clicar Salvar e atualizar assim que terminar.

Assuma o controle da aparência do seu site com CSS personalizado

Aprender como escrever CSS personalizado no WordPress pode levar algum tempo para iniciantes, mas dará a você o controle real sobre a aparência do seu site. E isso a custo zero e com impacto mínimo no desempenho do seu site.

Se você preferir não fazer nenhum projeto manual, no entanto, existem outras maneiras de fazer o trabalho, como usando um dos principais construtores de páginas para WordPress.

5 construtores de páginas WordPress que podem ajudá-lo a construir sites incríveis

Quer fazer seu site WordPress parecer incrível, mas não pode pagar um desenvolvedor? Em vez disso, tente esses criadores de páginas do WordPress.

Leia a seguir

Sobre o autor