Ir para o conteúdo principal

Como adicionar CSS personalizado ao seu blog WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Há mais de uma maneira de adicionar código CSS personalizado a um blog 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 "<body>") ou usando o identificador da tag.

Felizmente, navegadores populares nos permitem ver as diferentes seleções e instruções aplicadas aos elementos da página em 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 do mouse, como no exemplo a seguir.

blogpascher-inspecção

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.

blogpascher-logo

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 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

É fato que os temas do WordPress são criados de maneira diferente. Portanto, lembre-se de que seu tema WordPress pode não estar em conformidade com o 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.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

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

menu do editor-in-picture-edge

Quando estiver na página do editor, você verá uma lista de arquivos em uma barra vertical no lado direito da página. Role 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.

Menu-wordpress-editor-código

A outra maneira de encontrar a folha de estilos é navegar pelo sistema operacional do seu provedor de hospedagem e localizar o arquivo na pasta de temas do WordPress (Usando um cliente FTP). A localização exata 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€, 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 ".

Boletim pai-pasta-800x401

2 Método #: Usando um Plugin para Alterar CSS

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

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

Aqui estão alguns plugins 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 ...).

Este plugin premium do WordPress criará estilos CSS em fundo enquanto você brinca com as cores como se fosse um jogo, desenvolvido para usuários iniciantes e experientes.

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

Nenhum conhecimento de codificação é necessário. No entanto, o plugin WordPress 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

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

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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 WordPress que oferece mais opções nesta lista. A coisa mais surpreendente sobre o último é que ele é gratuito. Este plugin do WordPress é o único não encontrado no personalizador.

Depois de instalar e ativar o plug-in, você precisa ir para o seguinte local " Aparência> CSS personalizado Para acessar a edição CSS do plug-in. Nesta página, você pode ver um editor de texto que não oferece visualização em tempo real.

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

Para acessar o ú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 exibirá um editor de código CSS visual que os fãs apreciarão. O ícone com as setas de extensão exibirá um editor de texto que envolverá o domínio de 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: gerenciamento de 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.

wp-add-custom

O plug-in foi baixado mais de uma vez o 10.000 e atualmente possui uma classificação de estrelas do 4,3.

Descarregar | Demo | hospedagem na web

6. Tema Junkie personalizado CSS

Se você estiver procurando uma solução que ofereça uma visualização ao vivo de suas alterações, considere usar Tema Junkie CSS personalizado.

tema-junkie-css

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

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.

Conclusão

Aqui! É isso aí para este tutorial, espero que você possa adicionar um código CSS personalizado ao seu blog WordPress em 2 métodos, se você tiver 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.

...

Este artigo contém 1 comentário
  1. Muito obrigado para todos os diferentes artigos em seu site !! É sempre muito clara e compreensível para um iniciante como eu ... eu penso muitas vezes !!

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
4 ações
ação2
chilrear
Enregistrer2