Como adicionar facilmente CSS personalizado simples ao WordPress

Você está procurando uma maneira fácil de adicionar CSS personalizado simples ao seu site? Normalmente, você teria que editar seus arquivos de tema ou plug-ins para personalizá-los com CSS. Para iniciantes, isso pode dar muito trabalho, mas tenho uma solução.

Em vez de localizar e editar esses arquivos, você pode usar o plugin Simple Custom CSS e JS. Isso permite que você adicione CSS e JS personalizados diretamente ao seu site. É rápido, fácil e, o mais importante, conveniente de fazer.

O que o CSS personalizado faz?

Editar o CSS do seu tema ou plugin permite que você personalize a aparência deles de várias maneiras. Isso ajuda a fazer com que os temas tenham a aparência desejada e garante que todos os plug-ins adicionados corresponderão ao seu tema.

Afinal, alguns plugins tendem a não combinar com o design do seu site.

Adicionar CSS personalizado pode alterar as cores, fontes e até mesmo o layout de um tema ou plugin, mas é importante notar que às vezes você só pode fazer isso. Isso ocorre porque você está simplesmente adicionando ou alterando o CSS de um item específico. Você não está criando um novo.

Porém, se você for talentoso o suficiente, é possível alterar o código real do tema ou plugin para ainda mais personalização.

Ler:  Como usar o Product Feed Pro para WooCommerce no WordPress

Mas, em geral, você está apenas ajustando alguns valores, mas não os cria do zero.

Como adicionar CSS personalizado simples no WordPress

Etapa 1: instalar CSS e JS personalizados simples

O CSS e JS personalizados simples O plugin é um ótimo complemento para qualquer site que deseja ajustar a aparência de seu site. Ele permite que você adicione CSS e JS sem sair do seu site. Possui um editor de texto, adições ilimitadas, a capacidade de manter as alterações mesmo quando você altera os temas e muito mais.

No entanto, você deve estar se perguntando quanto conhecimento de codificação precisa para aproveitar ao máximo este plugin, e a resposta provavelmente irá surpreendê-lo.

Na realidade, você não precisa de nenhum conhecimento de codificação. O plugin se encarrega de adicionar o código ao seu site. Você só é responsável por fornecer o código, e a boa notícia é que a internet contém uma variedade de CSS e JS para personalizar o WordPress.

Dito isso, recomendo fortemente que você aprenda o básico de CSS. Isso lhe dará mais opções e facilitará o ajuste do código. Mais importante ainda, ajudará você a identificar quaisquer problemas no código que possam causar problemas.

Vamos começar clicando em Plugins e selecionando a opção Adicionar Novo no painel de administração esquerdo.

Pesquise Simple Custom CSS e JS na caixa de pesquisa disponível. Isso abrirá plug-ins adicionais que podem ser úteis.

Ler:  7 melhores plug-ins da comunidade WordPress para 2024

Role para baixo até encontrar o plugin Simple Custom CSS e JS e clique no botão “Instalar agora” e ative o plugin para uso.

Passo 2: Entenda o Editor de Texto

Este plugin permite adicionar CSS, JS e HTML, que cobre todas as linguagens que você precisa no WordPress para editar sua aparência. O plugin é extremamente simples de usar, e é por isso que se tornou tão popular ao longo dos anos.

Observação: Vou me concentrar em CSS neste tutorial, mas o processo é idêntico para JS e HTML, mas em uma linguagem de codificação diferente.

No painel de administração esquerdo, clique em CSS e JS personalizados e selecione a opção Adicionar CSS personalizado.

Este é um editor de texto básico e, por padrão, há um comentário que você pode excluir com segurança e sem problemas. Você pode adicionar um título na parte superior e, no canto superior esquerdo, você notará um pincel. Esta é a opção Embelezar Código. Tudo o que ele faz é remover espaços extras entre as linhas de código.

Observação: Eu pessoalmente recomendaria não usar esse recurso porque torna o código mais difícil de ler. No entanto, a escolha é sua.

No lado direito, existem algumas opções que você pode escolher. Isso inclui se você deseja que o código seja um arquivo externo ou interno, se ele está no cabeçalho ou rodapé e para onde ele vai no site.

Todas as outras opções nesta página só estarão disponíveis se você atualizar para a edição Pro do plugin.

Ler:  Hostinger e BigCommerce anunciam parceria de comércio eletrônico

Isso é tudo o que o próprio editor tem a oferecer em termos de recursos.

Lembre-se de que se o código não apresentar o resultado desejado ao ser inserido no editor, você simplesmente o inseriu incorretamente. Você pode editar livremente qualquer código adicionado a qualquer momento e a alteração no seu site acontece imediatamente.

Etapa 3: adicionar CSS, JS e HTML personalizados

Existem vários recursos que você pode usar para aprender CSS ou qualquer outra linguagem em profundidade em um período de tempo razoável. Como tal, este tutorial não irá cobrir isso. No entanto, o que quero aumentar a conscientização é a quantidade de CSS personalizado disponível online que você pode usar em seu site.

Um ótimo exemplo disso pode ser encontrado no Blog ThemeIsle.

E como sempre, se você simplesmente pesquisar no Google o que procura, provavelmente está online. Contanto que você consiga encontrar o código, tudo o que você precisa fazer é copiá-lo e colá-lo no editor de texto do plugin. Realmente não há nada complicado nisso.

Parabéns por aprender como adicionar CSS personalizado no WordPress. Se você estiver interessado em aprender a linguagem CSS, recomendo fortemente usar Escolas W3 como um recurso. Ele contém tudo que você precisa para dominá-lo. O site também possui recursos para outros idiomas.

Plugins precisam de mais CSS

Em muitos casos, os recursos dos plug-ins tendem a se destacar no seu site. Embora isso tenha melhorado ao longo dos anos, com muitos deles usando o esquema de cores do seu tema por padrão, ainda há muitos que não o fazem.

Ler:  Como colocar seu negócio online: pela primeira vez

E alguns deles podem realmente se destacar como uma dor no polegar.

Alguns plug-ins já possuem maneiras integradas de adicionar CSS para personalizar sua aparência, mas alguns ainda não possuem essa funcionalidade. A maioria das alterações que você faz serão apenas alterações de cores, fontes, tamanhos de fonte e outras pequenas coisas para combinar com seu site.

Este plugin corrige perfeitamente esse problema, facilitando a adição de CSS personalizado, portanto, certifique-se de que cada recurso adicionado corresponda ao resto do seu site.

Preciso codificar no WordPress?

O WordPress é frequentemente apresentado como o CMS para o qual você não precisa escrever uma única linha de código, e isso é verdade até certo ponto.

Embora você possa criar um site muito bom sem qualquer codificação, há limites para o que você pode alcançar. E é exatamente aí que conhecer CSS, JS ou HTML pode ajudá-lo. São linguagens poderosas, mas simples, que permitem personalizar a aparência do seu site.

Sem eles, quase todos os sites que usam o mesmo tema pareceriam quase idênticos.

Isso ajuda a destacar seu site da concorrência e, o mais importante, faz com que ele tenha a aparência exata que você deseja.

Qual CSS personalizado você planeja adicionar ao seu site? Você achou fácil usar o plugin Simple Custom CSS e JS?

Novas publicações:

Recomendação