Quer alterar as cores ou fontes do seu site WordPress, mas tem medo de quebrar algo? Muitos iniciantes assumem que isso requer a edição de arquivos de tema, onde até mesmo um pequeno erro pode causar grandes problemas.
Nos primórdios do WordPress, a única maneira de adicionar CSS personalizado era editando esses arquivos diretamente. Lembramos como isso era estressante e como um caractere mal colocado poderia travar um site inteiro.
Felizmente, esse não é mais o caso. O WordPress agora oferece maneiras seguras e amigáveis para iniciantes de adicionar CSS personalizado usando o Personalizador de Tema, o Editor de Site Completo (FSE) ou um plugin como o WPCode.
Neste guia, vamos mostrar três métodos simples para adicionar CSS personalizado ao seu site WordPress, passo a passo. 🙌
Por que adicionar CSS personalizado no WordPress?
Você adiciona CSS personalizado no WordPress para ter mais controle sobre o design do seu site do que as configurações do seu tema permitem. Por exemplo, você pode ajustar tamanhos de fonte, alterar cores de botões ou adicionar espaçamento extra a seções específicas.
CSS (Folhas de Estilo em Cascata) é a linguagem que estiliza seu site, cuidando de coisas como cores, fontes, espaçamento e layouts. Ao escrever seu próprio CSS, você pode ajustar a aparência do seu site sem alterar temas ou instalar plugins extras.
Essa flexibilidade significa que você pode personalizar posts individuais, estilizar categorias de produtos em sua loja, ou até mesmo otimizar a aparência do seu site em dispositivos móveis em comparação com desktops.
Neste guia, mostraremos as diferentes maneiras de adicionar CSS personalizado ao seu site WordPress.
Você pode clicar no link abaixo para pular para qualquer seção de seu interesse:
- Método 1: Adicionando CSS Personalizado Usando o Personalizador de Tema (Temas Clássicos)
- Método 2: Adicionando CSS Personalizado Usando o Plugin WPCode (Todos os Temas)
- Método 3: Adicionando CSS Adicional com o Editor de Site Completo (Temas de Bloco)
- Dica Bônus: Usando um plugin de CSS personalizado vs. Adicionando CSS no Personalizador de Tema
- FAQs: Adicionando CSS Personalizado ao Seu Site WordPress
- Mais Dicas e Truques de CSS para o Seu Site WordPress
Pronto? Vamos começar.
Método 1: Adicionando CSS Personalizado Usando o Personalizador de Tema (Temas Clássicos)
Desde o WordPress 4.7, os usuários podem adicionar CSS personalizado diretamente da área de administração do WordPress. Isso é super fácil e você pode ver suas alterações instantaneamente com uma prévia ao vivo.
Observação: Este método é apenas para temas clássicos. Se você estiver usando um tema de bloco, precisará escolher um dos outros métodos.
Primeiro, você precisará ir para a página Aparência » Personalizar no seu painel do WordPress.
Isso iniciará a interface do personalizador de tema do WordPress.
Nesta página, você pode ver a prévia ao vivo do seu site com várias opções de personalização no painel esquerdo. Dependendo do seu tema WordPress, o layout deste menu pode variar ligeiramente. Em nosso exemplo, estamos usando o tema Sydney.
Basta encontrar a aba ‘CSS Adicional’ para começar a editar.
A aba deslizará para mostrar uma caixa simples onde você pode adicionar seu CSS personalizado.
Assim que você adicionar uma regra CSS válida, poderá vê-la aplicada no painel de visualização ao vivo do seu site.
Você pode continuar adicionando código CSS personalizado até ficar satisfeito com a aparência das alterações em seu site.
Não se esqueça de clicar no botão ‘Publicar’ no topo quando terminar.
ℹ️ Observação: Qualquer CSS personalizado que você adicionar usando o personalizador de tema só estará disponível com aquele tema específico. Se você quiser usá-lo com outros temas, precisará copiá-lo e colá-lo em seu novo tema usando o mesmo método.
Método 2: Adicionando CSS Personalizado Usando o Plugin WPCode (Todos os Temas)
O primeiro método permite salvar CSS personalizado apenas para o tema atualmente ativo. Se você mudar de tema, talvez precise copiar e colar seu CSS personalizado para o novo tema.
Se você quer que seu CSS personalizado seja aplicado independentemente de qual tema do WordPress você esteja usando, este método é para você.
WPCode é o melhor plugin de snippets de código personalizado do mercado, com mais de 2 milhões de usuários. Além de facilitar a adição de código personalizado no WordPress, ele vem com recursos como uma biblioteca de snippets de código integrada, lógica condicional, pixels de conversão e muito mais.
Usamos o WPCode para adicionar e gerenciar snippets de código em algumas marcas parceiras. Para uma análise aprofundada de seus recursos e benefícios, confira nossa análise completa do WPCode.
Agora, a primeira coisa que você precisa fazer é instalar e ativar o plugin WPCode. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.
ℹ️ Observação: Este tutorial funciona com a versão gratuita do plugin WPCode, para que você possa começar imediatamente. Se decidir fazer o upgrade para o WPCode Pro, você desbloqueará recursos úteis como snippets agendados, histórico completo de revisões e acesso à biblioteca completa de snippets prontos para uso e aprovados por desenvolvedores.
Após a ativação, basta ir em Code Snippets » + Add New na área administrativa do WordPress.
Em seguida, você pode passar o mouse sobre a opção ‘Adicionar seu código personalizado (Novo Snippet)’ na biblioteca de snippets de código e clicar em ‘Usar snippet’.
Na próxima tela, você selecionará o tipo de código para seu snippet CSS personalizado.
Clique em ‘Snippet CSS’ como o tipo de código.
Em seguida, na parte superior da página, você pode adicionar um título para o seu trecho de CSS personalizado. Pode ser qualquer coisa que ajude você a identificar o código.
Depois de inserir um título, você pode escrever ou colar seu CSS personalizado na caixa ‘Pré-visualização do código’.
Vamos agora rolar para baixo até a seção ‘Inserção’ e selecionar o método ‘Inserção Automática’ se você quiser executar o código em todo o seu site WordPress.
Se você quiser executar o código apenas em páginas ou posts específicos, pode escolher o método ‘Shortcode’.
Agora, você vai querer voltar para o topo da página.
Em seguida, simplesmente alterne o interruptor para ‘Ativo’ e clique no botão ‘Salvar Snippet’.
É isso! Você pode visitar seu site WordPress para ver o CSS personalizado em ação.
Método 3: Adicionando CSS Adicional com o Editor de Site Completo (Temas de Bloco)
Se você estiver usando um tema de blocos moderno, o melhor lugar para adicionar seu CSS personalizado é diretamente no Editor de Site Completo. Este método mantém seu CSS com as configurações de estilo do seu tema e permite que você veja uma prévia ao vivo.
Primeiro, você precisa navegar para Aparência » Editor no seu painel do WordPress.
Isso abrirá o Editor de Site Completo.
No menu do lado esquerdo, clique na aba ‘Estilos’.
Agora você deve ver o painel ‘Estilos’ para o seu site, bem como a prévia da sua página.
A partir daqui, vamos clicar na prévia para abrir o editor de blocos.
No editor de conteúdo, clique no ícone ‘Estilos’. Ele se parece com um círculo metade preto e metade branco.
Depois disso, prossiga e selecione ‘CSS Adicional’.
No painel lateral do CSS, você encontrará o campo ‘CSS Adicional’.
Você pode inserir seu CSS aqui e verá as alterações instantaneamente na prévia ao vivo.
Assim que estiver satisfeito com tudo, não se esqueça de clicar em ‘Salvar’ no canto superior direito para publicar suas alterações.
Dica Bônus: Usando um plugin de CSS personalizado vs. Adicionando CSS no Personalizador de Tema
Todos os métodos descritos acima são recomendados para iniciantes. Usuários avançados também podem adicionar CSS personalizado diretamente aos seus temas.
No entanto, adicionar trechos de CSS personalizado ao seu tema pai não é recomendado. Suas alterações de CSS serão perdidas se você acidentalmente atualizar o tema sem salvar suas alterações personalizadas.
A melhor abordagem é usar um tema filho em vez disso. No entanto, muitos iniciantes evitam criar um tema filho porque acham o processo intimidador. Além disso, os iniciantes geralmente não entendem como usarão o tema filho além de apenas adicionar CSS personalizado.
Usar um plugin de CSS personalizado permite que você armazene seu CSS personalizado independentemente do seu tema. Dessa forma, você pode trocar de tema facilmente e seu CSS personalizado permanecerá.
Outra ótima maneira de adicionar CSS personalizado ao seu site WordPress é usando o plugin CSS Hero. Este plugin maravilhoso permite que você edite quase todos os estilos CSS do seu site WordPress sem escrever uma única linha de código.
Você também pode adicionar CSS personalizado com o plugin SeedProd, o melhor construtor de páginas WordPress com arrastar e soltar.
Com o SeedProd, você pode criar temas personalizados do WordPress e páginas de destino para o seu site WordPress. Você pode editar facilmente as configurações globais de CSS; nenhum código é necessário.
Algumas de nossas marcas parceiras projetaram seus sites inteiros com o SeedProd. Certifique-se de ler nossa análise detalhada do SeedProd para ver por que ele é uma escolha principal para construir sites impressionantes.
FAQs: Adicionando CSS Personalizado ao Seu Site WordPress
Quer tornar seu site WordPress verdadeiramente seu com estilos personalizados? Aqui estão algumas perguntas comuns sobre como adicionar CSS personalizado com segurança e como fazê-lo sem quebrar seu site:
Adicionar CSS personalizado é arriscado para o meu site?
Não se você fizer do jeito certo. Ferramentas como o Personalizador de Temas do WordPress, WPCode, ou SeedProd permitem que você visualize suas alterações antes de publicá-las. Isso ajuda você a evitar erros e a manter seu site seguro.
Minhas alterações de CSS desaparecerão se eu mudar de tema?
Se você adicionou o CSS através do Personalizador de Temas, suas alterações estão vinculadas a esse tema específico. Neste caso, sim, seu CSS adicional desaparecerá se você mudar seu tema WordPress.
Para manter seu CSS consistente em todos os temas, você pode usar um plugin de snippets de código como o WPCode. Ele armazena seu código separadamente, para que permaneça ativo mesmo se você trocar de tema.
Posso reverter as alterações se algo der errado?
Sim, especialmente se você estiver usando um plugin de snippets de código como o WPCode. Você pode facilmente desativar ou excluir qualquer snippet que tenha adicionado. É sempre uma boa ideia visualizar suas alterações primeiro ou testá-las em um site de staging se você não tiver certeza.
E se eu quiser ainda mais controle sobre meu CSS?
Para edições mais avançadas, você pode criar um tema filho. Isso lhe dá controle total e mantém suas alterações seguras durante as atualizações do tema. Mas isso requer um conhecimento básico de como os temas do WordPress funcionam.
Preciso de habilidades de codificação para adicionar CSS personalizado?
Você não precisa ser um desenvolvedor, mas precisará saber um pouco de CSS, pelo menos o suficiente para copiar e colar o código certo ou seguir um tutorial.
A boa notícia é que existem muitos recursos amigáveis para iniciantes (como o WPBeginner!) para ajudá-lo a aprender ajustes simples de CSS passo a passo. Com as ferramentas certas, adicionar CSS ainda pode parecer gerenciável – mais como reorganizar móveis do que reconstruir a casa.
Mais Dicas e Truques de CSS para o Seu Site WordPress
Esperamos que este artigo tenha ajudado você a aprender como adicionar CSS personalizado ao seu site WordPress. Se você achou isso útil, talvez também queira ver nossos guias sobre:
- Como minificar arquivos CSS / JavaScript no WordPress
- Como Otimizar Facilmente a Entrega de CSS do WordPress
- Como Aplicar CSS para Funções de Usuário Específicas no WordPress
- Como adicionar o primeiro e o último CSS aos itens de menu do WordPress
- Como Remover CSS Não Utilizado no WordPress (Da Maneira Certa)
- Como Corrigir CSS Quebrado no Painel de Administração do WordPress
- Guia Rápido de CSS Gerado pelo WordPress Padrão para Iniciantes
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Mrteesurez
Com base no método que você usou ao adicionar CSS personalizado em um site de blocos, percebo que o site ainda usa algum elemento do personalizador clássico através do link que você compartilhou?
Quero perguntar se alguém pode simplesmente instalar o plugin de widget clássico em um tema de blocos para ter acesso fácil ao personalizador para adicionar CSS e outras coisas sem usar nenhum link personalizado?
WPBeginner Support
Dependeria muito do seu tema específico. Se o seu tema não tiver a opção no personalizador, recomendamos usar uma das alternativas deste artigo.
Admin
Mrteesurez
Bem, a maioria dos temas tem a opção no personalizador, não sei sobre temas de blocos. Obrigado.
Mas eu recomendaria usar um construtor de páginas em vez disso para funcionalidades completas de personalização. Assim que eu aprender a usar um construtor de páginas, raramente uso CSS personalizado em páginas.
Dennis Muthomi
Apenas para esclarecer – quando você menciona (na MÉTODO 1) que o CSS adicionado através do Personalizador está disponível apenas para aquele tema em particular, isso significa que o código CSS personalizado é realmente adicionado aos arquivos do tema atual?
Eu não sou muito experiente em tecnologia, então quero ter certeza de que entendi corretamente antes de começar.
Comentários WPBeginner
Em vez de ser adicionado aos arquivos do tema, o Personalizador armazena o CSS no banco de dados e o associa ao tema.
Mrteesurez
Não sei disso, obrigado. Isso significa que o CSS personalizado adicionado não fica nos arquivos do tema, mas sim no banco de dados, então, por que precisamos copiar e colar o código CSS personalizado ao mudar de tema quando ele reside no banco de dados?
WPBeginner Support
Ao adicionar o código CSS, ele é conectado ao próprio tema quando você salva. Ao carregar um novo tema, ele carregaria qualquer CSS conectado a esse tema.
Jiří Vaněk
Obrigado, mrteesurez, por perguntar, pois eu estava tão confuso quanto você, e obrigado ao WPBeginner pela explicação que me ajudou a entender como o CSS adicionado funciona com o tema. Eu também pensei que os códigos CSS eram armazenados apenas no tema, mas agora finalmente entendo como funciona nos bastidores.
Qasim Saeed
Olá, se eu quiser adicionar um CSS personalizado em uma página específica sem nenhum plugin, então o que? Acho que adicionamos isso via função? você pode me dizer como adicionar CSS via functions.php e qual é a melhor e mais segura maneira de adicionar CSS para uma página específica
WPBeginner Support
Você não precisa usar funções para adicionar CSS a páginas específicas, você pode direcionar a página específica no seu seletor CSS para que ela afete apenas uma única página no seu site.
Admin
Jiří Vaněk
É melhor inserir seu próprio CSS no WordPress usando um template ou usando WPCode?
WPBeginner Support
Ambas as opções são escolhas válidas, depende da preferência pessoal e se o tema tem a opção no editor.
Admin
Jiří Vaněk
Obrigado pelo esclarecimento, eu não tinha certeza se, por exemplo, um snippet usando WPCode seria mais rápido para a resposta do site do que integrá-lo ao próprio template. Então, se não importa, provavelmente seguirei as melhores práticas e o manterei integrado ao template.
Bavi
A adição de CSS não está mais disponível para o plano gratuito, alguma alternativa??
WPBeginner Support
Nossos tutoriais são para sites WordPress.org, não temos especificidades para WordPress.com no momento. Recomendamos dar uma olhada em nosso guia abaixo para a comparação entre os dois e se você quisesse transferir seu site do WordPress.com para um site WordPress.org auto-hospedado.
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Admin
Ben
Eu nunca soube do truque example.com/wp-admin/customize.php. Obrigado! Funcionou perfeitamente!
WPBeginner Support
Glad we could share this trick with you!
Admin
Dani
Olá,
Quero adicionar CSS personalizado, mas como posso removê-lo se algo der errado?
Bogdan
Olá, este artigo é muito bom. Uma pergunta, porém: Eu não preciso ver a página HTML para adicionar CSS personalizado? Como adiciono CSS personalizado se não sei os seletores e tudo mais?
WPBeginner Support
Temos um guia sobre como usar o Inspetor de Elementos que você pode conferir abaixo para saber como encontrar os seletores:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
cymon
Sou um novo blogueiro. Existe uma maneira de adicionar código CSS específico para a página?
WPBeginner Support
Você precisaria adicionar o ID da página como parte do CSS, mas sim, você pode.
Admin
Jitin Mishra
Ótimo artigo para adicionar CSS personalizado em um site WordPress. Estamos ansiosos por mais posts informativos como este.
WPBeginner Support
Glad you found our guide helpful
Admin
Mohsin
Quero mudar meu menu do WordPress para um mega menu com código. Posso converter o menu do meu site para mega menu usando HTML, CSS e JS? Não quero usar um plugin para este trabalho. Se adicionarmos nova funcionalidade a um site WordPress com codificação personalizada, quais são as melhores práticas para que este trabalho personalizado não seja perdido ao atualizar o tema ou o WordPress. Obrigado!
WPBeginner Support
Você gostaria de criar um tema filho para manter suas alterações seguras, mas pode precisar de um pouco de código PHP. Temos um guia sobre como criar um tema filho que você pode conferir abaixo:
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
Admin
vijay v
podemos adicionar um arquivo CSS externo (movendo o CSS personalizado) para aumentar a velocidade da página (depois que adicionei o CSS personalizado, a velocidade de carregamento diminuiu), se sim, como fazer?
obrigado antecipadamente
WPBeginner Support
Se estamos entendendo corretamente o que você procura, você gostaria de dar uma olhada em nosso artigo abaixo:
https://www.wpbeginner.com/wp-tutorials/how-wordpress-plugins-affect-your-sites-load-time/
Admin
billy king
CSS “não ortodoxo” é permitido no Tema Filho ou CSS Personalizado?
WPBeginner Support
Desde que o CSS seja direcionado ao que está em seu site, você pode usar qualquer CSS que desejar.
Admin
Latonya Moore
Isso é ótimo, mas há alguma maneira de adicionar CSS apenas a uma página? Por exemplo, eu só quero mostrar ou ocultar por hover ou mouseover em um texto.
WPBeginner Support
Você precisaria adicionar uma classe CSS ao objeto específico ou adicionar o ID da página ao seu CSS para limitá-lo a essa página específica. Para saber como encontrar essa informação, você deve dar uma olhada em nosso artigo abaixo sobre como usar o inspetor de elementos:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
shiva
Fiz algumas alterações em meu site editando alguns códigos CSS no editor de temas. O que acontecerá se eu atualizar meu WordPress para a próxima versão? Ele dará erro ou voltará ao tema base ou meu código aparecerá mesmo após a atualização do meu WordPress, assim como antes da atualização?
WPBeginner Support
Se você adicionou seu CSS na área Aparência>Personalizador>CSS Adicional, suas alterações de CSS permanecerão quando você atualizar seu site.
Admin
Jo
Ainda não terminei de construir meu site, mas atualizei da versão gratuita para poder usar CSS para fazer alterações. Meu site ainda não está no ar. Com a atualização para a versão premium, o botão de atualização agora mudou para publicar. Isso significa que, quando eu clicar em publicar para salvar quaisquer alterações, meu site ficará no ar?
Além disso, não me lembro qual tema usei, como descubro qual tema estou usando?
Obrigado
WPBeginner Support
Parece que você está no WordPress.com. Se você publicar uma postagem, ela ficará visível para quem pode ver seu site. Com o WordPress.com, para um site privado, você está limitado a: https://en.support.wordpress.com/settings/privacy-settings
Você deve conseguir ver o tema ativo em Aparência > Temas.
Admin
Bruce William Taylor
“A aba deslizará para mostrar uma caixa simples onde você pode adicionar seu CSS personalizado. Assim que você adicionar uma regra CSS válida, poderá vê-la aplicada na prévia ao vivo do seu site.”
Eu já sei ONDE adicionar o CSS. Como sei qual CSS adicionar? Como sei quais são as “regras CSS válidas”?
WPBeginner Support
Olá Bruce,
Para isso, você precisará aprender o básico de CSS. Existem vários sites que oferecem tutoriais de CSS passo a passo para iniciantes. Recomendamos o w3schools, pois eles permitem que você pratique CSS com uma caixa de "tente você mesmo" ao vivo.
Admin
Ali
Onde está o armazenamento do Código CSS Personalizado porque eu o perdi durante uma transferência para um novo provedor?
mahaveer
eu quero adicionar css externo e adicionar imagens em css…..
Muhammad Adil
Qual foi o método do Bônus?
É algum Plugin que eu não entendi. Você pode me perguntar, por favor?
Obrigado
Aditya Khuteta
Olá! Quero alterar o tamanho do texto do preço no meu site porque o texto do preço está muito pequeno. Por favor, me guie como fazer isso.
Obrigado
Frank Lurz
2 Perguntas:
1. Só para eu entender, "plugins" são substitutos para escrever CSS, uma tarefa difícil para aqueles de nós que não sabem nada sobre CSS — é isso mesmo?
2. Os plugins listados para download na página de plugins do WP estão disponíveis para instalação apenas para assinantes que pagaram pelo Plano "Business", é isso mesmo?
WPBeginner Support
Olá Frank,
1. Não, os plugins não são substitutos para escrever CSS personalizado. Você pode escrever CSS personalizado sem instalar plugins. Por favor, veja nosso guia sobre o que são plugins do WordPress e como eles funcionam para mais detalhes.
2. SE você estiver usando WordPress.com, então sim, você precisará fazer o upgrade para o plano business. Por favor, veja nosso guia sobre a diferença entre WordPress.org auto-hospedado vs blog gratuito WordPress.com.
Admin
Annie Mitchell
Olá,
Sou novata em construção e design de sites e não tenho conhecimento de CSS. Estou usando o tema Sydney no meu site – e de alguma forma consegui deixar a fonte do meu parágrafo branca. Pesquisei e notei que um colega teve o mesmo problema. Ele consertou baixando um plugin e usando um CSS personalizado, mas eu tentei e não tive sorte.
O CSS que ele aconselhou usar é –
.entry-page p, .entry-post p { color: black !important; margin: 0 !important; padding: 0 !important; }
mas não tenho certeza por que não está funcionando para mim. Qualquer ajuda seria muito apreciada.
Obrigado,
Annie
WPBeginner Support
Olá Annie,
Primeiro, recomendamos que você desative todos os seus plugins do WordPress desativando-os. Depois disso, visite seu site para ver se isso resolveu seu problema. Se resolveu, então isso significa que uma configuração em um de seus plugins estava causando o problema. Se não resolver o problema, tente mudar para um tema padrão como o Twenty Seventeen. Se isso resolver seu problema, então significa que em algum lugar do seu tema você alterou as configurações de fonte.
Se nada funcionar, você pode tentar este CSS personalizado:
p { color:#000; }1-click Use in WordPress
Admin
Jose
Um dos plugins (Simple Custom CSS) não é atualizado há 2 anos, o que no mundo dos plugins do WordPress é muito tempo. Isso é um risco de segurança, então eu pessoalmente procuraria uma alternativa.
Rebecca
Oi
Desculpe, não sei nada sobre CSS e estou tentando resolver um problema de não conseguir pesquisar plugins, mas essa é outra história! Estou postando aqui agora porque estou recebendo esta mensagem quando vou em aparência / editar css / css adicional
" Há 1 erro que deve ser corrigido antes que você possa salvar.
Atualizar mesmo assim, mesmo que possa quebrar seu site?"
Isso é algo com que devo me preocupar?
o texto na caixa abaixo diz...
e bem aqui há um ponto final vermelho
Espero que alguém possa ajudar.
Obrigado
WPBeginner Support
Olá Rebecca,
Você pode copiar o CSS e colar em um arquivo de texto e salvá-lo como backup. Agora delete tudo na caixa CSS Adicional e comece a adicionar seu CSS personalizado uma regra de cada vez até que o erro apareça novamente. Isso o ajudará a localizar o erro e corrigi-lo.
Admin
James
Isso não funciona mais para contas gratuitas. A opção de CSS não está mais lá e você precisa de uma conta empresarial para instalar um plugin relevante.
WPBeginner Support
Oi James,
Você provavelmente está usando WordPress.com. Por favor, veja nosso guia sobre a diferença entre WordPress.org auto-hospedado vs blog gratuito WordPress.com.
Admin
scott
Antes da versão 4.9 do WP, eu conseguia copiar e colar meu CSS personalizado (do personalizador do WP) e colar no Bloco de Notas do Windows (e ele mantinha a formatação. Eu fazia isso com frequência para salvá-lo como backup quando estava adicionando um novo CSS personalizado — caso eu cometesse um erro.
Agora, ao colar no Bloco de Notas, ele junta todo o CSS sem a formatação linha por linha no Bloco de Notas.
Alguma ideia do porquê ou como posso consertar isso? Eu já tenho o modo "quebra de linha" ativado no Bloco de Notas.
Obrigado.
WPBeginner Support
Olá Scott,
Você pode tentar salvar o código em outros editores de texto como o Notepad++. Se o problema persistir, tente as dicas de solução de problemas do WordPress.
Admin
Joe MacMillan
Este site é muito bom. Meu site não tinha nenhuma cor de link, então usei este código /* link não visitado azul */
a:link { Color: #196380; }
/* link visitado verde */
a:visited { color: #248f24; }
/* link em destaque laranja */
a:hover { color: #ff3300; }
/* link selecionado vermelho */
a:active { color: #cc0000; }
mas ele ativou cores para tudo que é link, como menus, em uma cor.
Eu só quero as cores para os links.
Agradeceria qualquer ajuda com isso. Obrigado
WPBeginner Support
Olá Joe,
Em seu CSS, você não definiu quais áreas devem ter links nessas cores, o que faz com que elas se apliquem ao corpo inteiro. Para descobrir quais áreas você precisa segmentar, você precisará usar a Ferramenta de Inspeção para descobrir a classe CSS usada pelo seu tema para o bloco de conteúdo.
Vamos supor que o bloco de conteúdo no seu tema tenha uma classe CSS site-content, você a usará em seu CSS assim:
.site-content a:link { color: #196380; } .site-content a:visited { color: #248f24; } .site-content a:active { color: #cc0000; } .site-content a:hover { color: #ff3300; }1-click Use in WordPress
Hope this helps
Admin
Rob
Eu amo seu site!
Obrigado por todos os artigos úteis.
Tenho uma pergunta sobre meu plano premium do WordPress.
Quero adicionar o seguinte script ao meu site.
var refTagger = { settings: { bibleVersion: “NKJV” }
Posso adicionar isso ao CSS personalizado?
Eu não tenho a capacidade de acessar o cabeçalho ou rodapé neste plano
Obrigado,
Rob
WPBeginner Support
Olá Rob,
Não, você não pode. Por favor, consulte nosso guia sobre a diferença entre WordPress.org auto-hospedado vs blog gratuito WordPress.com.
Admin
sammy
este é realmente um ótimo artigo, terei que começar a aprender a fazer meu próprio CSS para o meu site
Thomas
Olá,
este recurso não está ativo para o administrador do site em uma rede WordPress multisite.
Você acha que ativá-lo para o administrador do site (com este plugin, por exemplo:) criaria um problema de segurança?
Obrigado!
WPBeginner Support
Olá Thomas,
Sim, você pode usar um plugin para adicionar CSS personalizado.
Admin
Thomas
Olá,
sim, eu sei (já usei o ótimo plugin Simple Custom CSS), mas eu preferiria usar a função nativa, já que ela está implementada no WordPress.
No entanto, esta função está disponível apenas para o administrador da rede e não para o administrador do site em uma instalação multisite.
As permissões podem ser facilmente alteradas para permitir que o administrador do site adicione seu próprio CSS personalizado no personalizador (com a função nativa do WP) (veja este plugin: http://www.wordpress.org/plugins/multisite-custom-css/), e eu me pergunto se isso criaria um problema de segurança (com base na suposição de que não posso confiar no administrador do site)?
WPBeginner Support
Olá Thomas,
Sorry, we totally misunderstood your question
Concordamos que isso será uma preocupação, é por isso que o recurso está desativado. Se você ativá-lo, os usuários poderão adicionar CSS não filtrado. Você deve mantê-lo desativado.
Brice
Eu não entendo muito de código, então estou apenas me perguntando se eu fizer alterações e clicar em "salvar e publicar", há alguma maneira de recuperar o código original se eu não gostar das alterações ou preciso copiar e salvar o código original caso eu queira restaurá-lo?
Ruth Billheimer
This is probably really naive, I don’t know much about code, so bear with me.. In the customise additional css, can you put in different things? I mean I have already put something in there that will change some of the colours. Now I want to put in something that will change the width of the page. (I am getting these bits of code from very helpful people, I know nothing!)
So will both of these things work? Or can you only change one thing? It doesn’t look like the page width has changed
Jos Schuurmans
Olá,
Costumava ser possível editar style.css de dentro do painel do WP, no menu Aparência.
No multisite do WP, era através do submenu de temas da rede. Esse recurso foi descontinuado?
Saudações,
Jos
Judy
Ótimo post, obrigado!
Alguém pode me ajudar com isso? Fiz uma pequena personalização no meu logo usando o CSS Hero. Em seguida, copiei essas 9 linhas exatas de código para o meu plugin Simple Custom CSS, após desativar o CSS Hero. Pensei que poderia reproduzir a mesma personalização do CSS Hero no meu logo usando o Simple Custom CSS, mas em vez disso, não está funcionando.
Atualizei a página e limpei o cache, mas a personalização ainda não surte efeito. Por quê?
Obrigado,
Judy
Robin
Isso é tudo que há na minha Folha de Estilo CSS.
/*
Bem-vindo ao CSS personalizado
Para aprender como isso funciona, veja
*/
Eu apago o dele e adiciono meu novo código de fonte? Ajuda????
WPBeginner Support
Sim. Estes são apenas comentários para ajudar novos usuários a começar.
Admin
Paul H.
PLUGIN EXCEPCIONAL!!!
Passei muito tempo tentando fazer com que o editor integrado do WP "estilizasse" minha página personalizada, sem sucesso...
Procurei um plugin para ver se havia algum e encontrei o seu... em poucos minutos instalei seu plugin e o ativei, depois inseri meu CSS, cliquei em atualizar e depois atualizei minha página personalizada... ficou perfeito!
A+++
Ian
Olá pessoal,
Instalei o plugin Simple custom CSS & ativei-o. Tenho uma tabela criada em uma das minhas páginas da web que eu queria que tivesse uma borda ao redor dela.
Como resultado, adicionei o seguinte código ao meu plugin Simple custom CSS
table { border: 2px solid black; }
e atualizei o CSS Personalizado, mas nada aconteceu – eu ainda não tenho nenhuma borda na tabela da minha página da web.
Alguma sugestão?
Atenciosamente
Ian
Molly Setzer
Olá Ian,
É provável que você não esteja chamando pelo seletor CSS correto. Use o seletor mais definido para capturar o elemento. Por exemplo, se sua tabela tiver uma classe "info", chamar por table.info mais específico ajudará você a alcançar o elemento. Verifique se há mais seletores no HTML.
ramneet
Obrigado por compartilhar. É uma maneira maravilhosa de aprender WordPress, eu gosto.
Estee Peter
Como adiciono CSS personalizado através do meu plugin de site específico existente
este é o seguinte código
.mobileonly { display: none; }
@media screen and (max-width: 480px) { .mobileonly { display: inline; } }
.hidemobileonly { display: inline; }
@media screen and (max-width: 480px) { .hidemobileonly { display: none; } }
Gary Zielke
O plugin Custom CSS funciona em páginas individuais? Ou seja, posso adicionar estilo a uma única página e não a todo o tema?
Obrigado
WPBeginner Support
Não, não funciona em páginas individuais.
Admin
Tori Tran
obrigado ^^
Russell Bruce
Não seria útil explicar o que o CSS faz e por que ele é útil?
Joey
Obrigado, eu gostaria de ter percebido isso antes porque fiz todas as minhas alterações de CSS no arquivo style.css, já que estou fazendo as alterações localmente, mas você está dizendo que, se por algum motivo o Genesis decidir atualizar o tema filho específico que usei, perderei essas alterações? Não sei se já vi eles atualizarem seus temas filhos, embora eu esteja usando o Genesis há apenas alguns meses, então suponho que seja totalmente possível que eles atualizem certos temas aqui e ali. Acho que, daqui para frente, farei minhas alterações no plugin, especialmente se o site estiver no ar.
suzie
Use o tema que você gosta e crie um ‘tema filho’
O tema filho é então exclusivo para o seu site.
Faça quaisquer alterações apenas no seu tema filho.
O designer do tema pode atualizar o tema dele, mas suas alterações permanecerão. (Dependendo da atualização do designer, você pode precisar ajustar suas alterações, mas isso é improvável).
Rodney
Ótimo artigo.
Eu só queria adicionar aqui. Há muitas opções aqui, especialmente em sites que rodam em WordPress, criar CSS personalizado é simples. A maioria dos temas do WordPress geralmente suporta a adição de CSS personalizado sem a necessidade de criar ou adicionar plugins adicionais.
Eu também concordo, e a melhor opção aqui é usar um tema filho em vez disso.
obrigado