Há mais de uma maneira de adicionar código CSS personalizado a um blog do WordPress.

Hoje, explicarei os pontos fortes e fracos dos dois métodos diferentes que proponho, para que você possa escolher o que melhor lhe convier.

Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog 

Então, voltemos ao porquê de estarmos aqui.

Como encontrar os elementos que você deseja personalizar

Depois de isolar a parte do seu tema WordPress que você deseja alterar (por exemplo, o título de um artigo), você precisará determinar propriedades CSS aplicado a ele para que você possa fazer as alterações apropriadas. Felizmente, esse processo não é complicado.

O CSS usa longarinas para determinar quais elementos serão afetados pelas alterações específicas. Geralmente, isso é feito especificando um " classe "De um elemento (ou elemento DOM). No entanto, o CSS também pode ser usado para definir o layout de um elemento inteiro (por exemplo, a tag " ") ou usando o identificador da tag.

Felizmente, os navegadores populares nos permitem ver os diferentes seletores e declarações que são aplicados aos elementos da página com apenas alguns cliques. No Google Chrome, por exemplo, você só precisa destacar uma parte específica do documento e clicar com o botão direito, como no exemplo abaixo.

Ao clicar em " Inspecione o elemento No menu suspenso exibido, você verá o código HTML da página em uma nova janela com o item inspecionado destacado na janela no lado direito (ou inferior). Você pode ver um exemplo a seguir.

Os textos desses elementos (ou atributos) Realçado em vermelho, mostra os diferentes estilos específicos aplicáveis ao elemento destacado pela inspeção do código.

Leia também: Como adicionar um menu drop-down com o CSS em seu Editor Visual

Por exemplo, o elemento " tamanho da fonte "Informa que a fonte exibida no elemento destacado é dimensionada para pixels 13. Os descritores são cercados por chaves e precedidos por longarinas. O nome do arquivo da folha de estilos correspondente é exibido à direita dos jogadores.

Depois de ter essas informações em mente, mudar o estilo fica fácil. Por exemplo, se você deseja alterar a fonte de 13px para 14px, basta procurar o arquivo da folha de estilos, a sequência correspondente à do item destacado. Geralmente é desta forma: (« # Informações .block-plugin-content"). Você pode então modificar os diferentes valores dos atributos.

Você pode fazer o mesmo no Firefox, apenas realçar uma parte específica da página, clicar com o botão direito do mouse no elemento e selecionar "Firefox« ,,,,,,,,,,,,,,, ". Inspecione o elemento No menu que aparece.

Como WordPress e CSS trabalham juntos

É um fato que o Temas do WordPress são criados de forma diferente. Portanto, lembre-se de que seu tema WordPress pode não cumprir 100% com o que você lê nas seções a seguir.

Dito isso, é mais do que provável que o CSS usado no seu blog WordPress esteja localizado em um arquivo chamado " style.css " Este é o nome comum para uma folha de estilos para qualquer tipo de site, não apenas para o WordPress.

Veja também: Como redimensionar imagens Gravatar em WordPress

Agora é hora de passar pelos vários processos de edição.

Método nº 1: Editando o arquivo de estilo do seu tema WordPress

Existem duas maneiras de acessar o arquivo style.css do seu tema.

O primeiro é fazê-lo no seu painel do WordPress. No menu do lado esquerdo, selecione o menu « apparence E depois Editor ".

Quando estiver na página do editor, você verá uma lista de arquivos em uma barra vertical no lado direito da página. Percorra a lista de arquivos. Você verá um arquivo chamado " style.css estilo Na parte inferior da página.

Se você clicar no nome desse arquivo, ele será carregado e exibido no editor localizado no meio. Você pode usar esta tela para editar o arquivo.

A outra maneira de encontrar a folha de estilo é navegar pelo sistema operacional do seu provedor de hospedagem e localizar o arquivo na tema WordPress (usando um cliente FTP). A localização exata irá variar dependendo do seu provedor de hospedagem. No exemplo mostrado abaixo, o nome do site (no nosso caso thecare) É uma pasta sob a pasta public_html.

Como o WordPress está instalado, você pode ver a pasta wp-content em "thecare". A subpasta wp-content é outra pasta chamada " wp-temas", que é onde todos os Temas do WordPress estão instalados.

Neste site, usa um tema chamado " Newsletter », O arquivo de estilo« style.css »Está localizado na pasta« Boletim pai ".

Método 2: usando um plug-in para modificar CSS

Talvez a maneira mais conveniente de editar o CSS do seu blog WordPress seja o uso de um plugin.

Uma das principais vantagens de usar um plug-in é semelhante à dos temas filhos. sim você atualiza o tema WordPress, suas alterações não serão sobrescritas, pois serão armazenadas separadamente e não entre os arquivos do tema. A outra vantagem, claro, é que você não precisa criar um tema filho.

Aqui estão alguns plug-ins premium que você também pode usar para modificar o código CSS do seu tema WordPress :

1. Lápis Amarelo: Editor de Estilo Visual CSS

Yellow Pencil é um editor de estilo visual que você pode usar com qualquer tema para personalizar seu site em minutos (fontes, cores, animações e muito mais ...).

Ce WordPress Plugin premium criará estilos CSS por fundo enquanto você joga com as cores como se fosse um jogo. Foi projetado tanto para iniciantes quanto para usuários experientes.

Descubra também o nosso Plugins 5 WordPress para mostrar notificações

Nenhum conhecimento de codificação é necessário. No entanto, o WordPress Plugin tem um bom editor de CSS para quem gosta de codificar. Você pode codificar ao vivo com este editor e personalizar seu CSS.

Descarregar | Demo | hospedagem na web

2. JS e CSS personalizados para Gutenberg

Le WordPress Plugin JS e CSS personalizados premium para Gutenberg permitirá que você adicione um número ilimitado de estilos personalizados ao editor WYSIWYG para seus posts e páginas do WordPress. É totalmente compatível com a versão Gutenberg do WordPress.

Você pode simplesmente criar um novo estilo com um editor CSS fácil de usar. Este plugin do WordPress estende os recursos do campos personalizados do seu site e permite modificar seus campos personalizados com um módulo de personalização dinâmico e poderoso. e a funcionalidade de visualização em tempo real deste plugin WordPress o torna muito confortável e fácil de usar.

Descarregar | Demo | hospedagem na web

3. SiteOrigin CSS

É de longe o plugin do WordPress que oferece a maioria das opções nesta lista. A coisa mais surpreendente sobre este último é que é gratuito. Este plugin do WordPress é o único que não pode ser encontrado no personalizador.

Depois de instalar e ativar o plugin, você precisa navegar para o seguinte local “ Aparência> CSS personalizado Para acessar a edição CSS do plugin. Nesta página, você pode ver um editor de texto que não oferece visualização ao vivo. 

Leia também nosso artigo sobre 10 WordPress plugins para impulsionar as vendas do seu site

Para acessar este último, você deve clicar em um dos dois botões que aparecem à esquerda, logo acima do editor. O botão com um ícone de olho trará um editor de código CSS visual que os entusiastas irão apreciar. O ícone com as setas de extensão exibirá um editor de texto que implicará um domínio dos códigos CSS.

Descarregar | Demo | hospedagem na web

4. Custom CSS simples

Custom CSS simples é um dos plugins mais populares.

Descubra também o nosso Como tornar seu blog mais rápido: gerenciando arquivos CSS e JS.

Foi instalado mais de 100 vezes e recebeu uma classificação de cinco estrelas.

Descarregar | Demo | hospedagem na web

5. WP Adicionar CSS personalizado

WP Adicionar CSS personalizado é um plugin que permite que você alterar o layout de um blog WordPress artigos inteiros ou apenas individuais. Essa é uma ótima opção se você estiver procurando flexibilidade na personalização de itens.

O plugin foi baixado mais de 10.000 vezes e atualmente tem uma classificação de 4,3 estrelas.

Descarregar | Demo | hospedagem na web

6. Tema Junkie personalizado CSS

Se você está procurando uma solução que oferece uma visualização ao vivo de suas alterações, você pode considerar o uso Tema Junkie CSS personalizado. 

Esta solução adiciona um gerenciador de CSS personalizado ao seu painel, onde você pode adicionar seus próprios estilos. Também oferece uma alternativa para usando um tema filho.

Descarregar | Demo | hospedagem na web

Outros recursos recomendados

Também convidamos você a consultar os recursos abaixo para aprofundar o controle e controle do seu site e blog.

• 10 WordPress plugins compartilhando em redes sociais
• Como exibir campos personalizados fora do circuito em WordPress
• 5 WordPress plugins para rentabilizar o seu blog com anúncios
• Como proteger seu blog raspadores de conteúdo

Conclusão

Aqui! É isso para este tutorial, espero que você consiga adicionar código CSS personalizado ao seu blog WordPress em 2 métodos, se você tiver algum Comentários ou sugestões, não hesite em nos informar na seção reservada para eles.

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Se você gostou deste artigo, nnão hesite em compartilhe em suas redes sociais favoritas. 

...