Ir para o conteúdo principal

Como adicionar um CSS personalizado para seus métodos de blog WordPress 2

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.

Como encontrar os elementos que você deseja personalizar

Depois de isolar uma parte do seu tema, você deseja editar (por exemplo, o título de um artigo), será necessário determinar as propriedades CSS aplicadas 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.

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.

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]

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  ». Esse é o nome comum de uma folha de estilos para qualquer tipo de site, não apenas no 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 ".

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 do tema (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.

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

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]

Boletim pai-pasta-800x401

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

A maneira mais fácil de editar o CSS do seu blog WordPress é provavelmente o uso de um plugin.

Um dos principais benefícios do uso de um plug-in é semelhante ao dos temas infantis. Se você atualizar o tema, suas alterações não serão substituídas, pois serão armazenadas separadamente e não entre os arquivos do tema. O outro benefício, é claro, é que você não precisa criar um tema filho.

Aqui estão alguns plugins que você pode usar para modificar o código CSS do seu tema:

1. Custom CSS simples

Custom-single-css

Descarregar

CSS personalizado simples é um dos plugins mais populares. Ele foi instalado mais do que o 100 000 e recebeu uma classificação de cinco estrelas.

2. WP Adicionar CSS personalizado

wp-add-custom

Descarregar

O WP Add Custom CSS é um plugin que permite editar a apresentação de um blog WordPress completo ou apenas artigos individuais. É uma ótima opção se você estiver procurando flexibilidade na personalização de itens.

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

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. [FREE]

3. Tema Junkie personalizado CSS

tema-junkie-css

Descarregar

Se você estiver procurando por uma solução que ofereça uma visualização ao vivo de suas alterações, considere usar o CSS personalizado do Theme Junkie. Esta solução adiciona um gerenciador de CSS personalizado ao seu painel, onde você pode adicionar seus próprios estilos. Ele também oferece uma alternativa ao uso de um tema infantil.

Isso é tudo para este tutorial sobre como personalizar o estilo do seu blog WordPress. Não hesite em compartilhar este artigo com seus amigos 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