Embora escrever seu pr\u00f3prio CSS do zero possa ser um desafio, adicionar trechos pr\u00e9-escritos deve ser simples.<\/p>\n
Neste tutorial, voc\u00ea aprender\u00e1 a abordagem mais simples e melhor para adicionar CSS personalizado ao seu site para que possa alterar os estilos em seu tema WordPress.<\/p>\n
Como adicionar CSS personalizado<\/h2>\n
No passado, eu recomendava o plugin Simple Custom CSS<\/a>, mas voc\u00ea n\u00e3o precisa mais de um plugin para adicionar CSS ao seu site.<\/p>\n Em vez disso, voc\u00ea pode usar a se\u00e7\u00e3o CSS adicional integrada no Customizador. Para acessar este recurso, comece clicando no item de menu Personalizar encontrado em Apar\u00eancia.<\/p>\n Em seguida, abra a se\u00e7\u00e3o CSS adicional, que deve estar localizada pr\u00f3ximo \u00e0 parte inferior do painel Personalizador.<\/p>\n Dentro, voc\u00ea pode simplesmente colar o CSS que precisa adicionar ao seu site.<\/p>\n O que \u00e9 \u00f3timo sobre o recurso CSS adicional \u00e9 que voc\u00ea obt\u00e9m uma visualiza\u00e7\u00e3o ao vivo de como isso afetar\u00e1 seu site. A visualiza\u00e7\u00e3o \u00e9 atualizada instantaneamente e os visitantes n\u00e3o ver\u00e3o suas altera\u00e7\u00f5es at\u00e9 que voc\u00ea clique no bot\u00e3o Publicar na parte superior.<\/p>\n Muitos usu\u00e1rios do WordPress s\u00e3o tentados a editar a folha de estilo do tema diretamente por meio do menu Editor de temas.<\/p>\n Nunca fa\u00e7a isso.<\/strong><\/p>\n O maior problema em fazer altera\u00e7\u00f5es dessa maneira \u00e9 que todo o seu trabalho \u00e1rduo ser\u00e1 perdido quando voc\u00ea atualizar o tema. Por exemplo, se voc\u00ea estiver usando a vers\u00e3o 1.38 do Mission News<\/a> e amanh\u00e3 1.39 for lan\u00e7ada, o processo de atualiza\u00e7\u00e3o copia todos os novos arquivos sobre os arquivos antigos. O tema certamente n\u00e3o incluir\u00e1 as mesmas personaliza\u00e7\u00f5es que voc\u00ea fez e, portanto, elas ser\u00e3o perdidas permanentemente (a menos que voc\u00ea tenha um backup recente<\/a> ).<\/p>\n Isso pode ser evitado usando a se\u00e7\u00e3o CSS adicional no Customizador, que n\u00e3o \u00e9 afetada pelas atualiza\u00e7\u00f5es do tema.<\/p>\n O \u00fanico desafio do recurso CSS adicional \u00e9 que, \u00e0s vezes, fazer com que seu CSS entre em vigor pode ser um pouco mais dif\u00edcil.<\/p>\n Sem entrar nas ervas daninhas, o CSS usa um sistema de especificidade<\/a> para decidir quais regras de estilo se sobrep\u00f5em.<\/p>\n Uma maneira de garantir que seus estilos substituam os estilos do tema \u00e9 usar uma Veja este snippet CSS, por exemplo:<\/p>\n Em todos os nossos temas<\/a>, esse c\u00f3digo tornaria o t\u00edtulo do site 28px. Se voc\u00ea n\u00e3o vir nenhuma altera\u00e7\u00e3o ap\u00f3s implementar este c\u00f3digo, tente adicionar a Com essa atualiza\u00e7\u00e3o, o c\u00f3digo tem essencialmente garantia de efeito, desde que seja direcionado ao seletor certo. Apenas tente reservar isso para ocasi\u00f5es especiais, pois us\u00e1-lo dezenas de vezes em seu c\u00f3digo pode tornar mais dif\u00edcil substituir estilos no futuro.<\/p>\n Um problema comum que os usu\u00e1rios enfrentam ao usar esse recurso \u00e9 que seu c\u00f3digo funcionar\u00e1 ao usar o Live Customizer, mas uma vez que visualizam o site normalmente, as altera\u00e7\u00f5es n\u00e3o aparecem.<\/p>\n Isso quase sempre ocorre devido ao armazenamento em cache, e abordo a solu\u00e7\u00e3o em todos os detalhes aqui:<\/p>\n Como corrigir altera\u00e7\u00f5es do WordPress que n\u00e3o aparecem<\/a><\/p>\n Deve levar apenas um ou dois minutos para resolver as coisas.<\/p>\n Mesmo que voc\u00ea n\u00e3o tenha ideia de como escrever seu pr\u00f3prio CSS, o recurso CSS Adicional facilita a colagem de c\u00f3digo em seu site.<\/p>\n Se voc\u00ea quiser aprender mais sobre a personaliza\u00e7\u00e3o de temas WordPress com CSS, eu recomendaria meu guia sobre como encontrar seletores CSS a<\/a> seguir.<\/p>\n E se voc\u00ea gostou de aprender algo novo sobre o WordPress hoje, talvez goste do meu curso gratuito por e-mail:<\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e4c6d6cd.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e4f0f93d.png\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e510ba49.png\")
<\/a><\/p>\nPor que voc\u00ea nunca deve editar style.css<\/h2>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e5335117.png\")
<\/a><\/p>\nDicas para fazer seu CSS personalizado funcionar<\/h3>\n
!important<\/code>tag.<\/p>\n.site-title {\n font-size: 28px;\n}<\/code><\/pre>\n!important<\/code>tag, desta forma:<\/p>\n.site-title {\n font-size: 28px !important;\n}<\/code><\/pre>\nE se for exibido apenas na visualiza\u00e7\u00e3o ao vivo?<\/h2>\n
Personalize facilmente com CSS<\/h2>\n