Um blog atrativo e bonito consegue aumentar seu tráfego, gerar novas vendas e impactar sua audiência da forma correta. Porém, nem sempre é possível alterar todas as propriedades do tema instalado por meio de suas opções no painel, sendo necessário recorrer à utilização de CSS personalizado no WordPress.
Personalizar o CSS do seu blog permite ir além dos limites definidos previamente pelo desenvolvedor do tema escolhido, te dando muito mais poder de alteração, caso conheça a linguagem de estilos Cascading Style Sheets.
Nesse artigo, mostraremos diversas opções de utilização do CSS personalizado, tanto para blogs comuns, quanto para aplicações que utilizam o WordPress. Ao final da leitura, será possível realizar a alteração que desejar na parte visual do seu site, com a possibilidade dessas alterações permanecerem mesmo após a mudança de tema.
O que é CSS?
CSS (Cascading Style Sheets) é uma linguagem de marcação utilizada para estilizar a aparência visual de páginas da web. Ela permite definir cores, fontes, tamanhos, margens, posicionamento e outros aspectos visuais dos elementos HTML de um site.
O CSS trabalha em conjunto com o HTML, separando o conteúdo (HTML) da sua apresentação visual (CSS), o que facilita a manutenção e o design consistente de um site.
Com o CSS é possível personalizar cores, bordas, fontes e diversos outros atributos, sendo necessário em todos os elementos visuais de uma página web. Por exemplo, se quiser aumentar a fonte do título de uma publicação, é através do CSS que se faz isso.
Para realizar tal alteração, é necessário saber o seletor (nome do item HTML que deseja alterar) e indicar as propriedades dele entre chaves. A estrutura principal pode ser vista abaixo:
h1{ font-size: 35px }Definimos que o seletor h1 (título de posts) terá a fonte de 35 píxels. Outros atributos podem ser modificados também, se necessário.
O que é CSS personalizado?
Todo site possui uma folha de estilos própria em que todas as propriedades visuais estão descritas com exatidão. CSS personalizado é a adição de outro código CSS, muitas vezes sobrescrevendo a folha de estilos padrão e alterando as propriedades pré-definidas, um recurso muito útil para design.
Se a cor da fonte do seu blog é preta e você gostaria de alterar para um cinza mais claro, será necessário um CSS personalizado para isso, por exemplo.
Por que usar CSS personalizado?
Com o CSS personalizado, é possível alterar o elemento que desejar. Dessa forma, há a possibilidade de corrigir bugs, implementar novas funcionalidades e customizar o site para estar 100% conforme o que deseja.
Essa flexibilidade de alterações é muito útil para criar blogs que se diferenciem um do outro e tenham identidade própria, fugindo dos temas comuns e recorrentes do nicho.
Quais as vantagens de usar CSS personalizado?
Existem diversas vantagens, as mais citadas são:
Personalização
Provavelmente o motivo mais citado, é a extrema personalização que pode ser feita através do CSS personalizado. Há, inclusive, quem transforme blogs completamente através deles.
Reutilização de estilos
Muitas vezes, se quer alterar vários elementos de uma só vez. Fazer isso página por página é contraproducente. Com os estilos, é possível, com poucas linhas de código, alterar diversos elementos diferentes.
Quais as desvantagens de usar CSS personalizado?
Nem só de vantagens vive o CSS personalizado. Citamos alguns pontos negativos que, a depender do contexto, podem te impedir de utilizá-lo.
Necessidade de aprender uma nova linguagem
Para usar CSS personalizado, logicamente, é necessário saber CSS. Isso pode ser uma desvantagem ou não dependendo da sua intimidade com HTML e criação de páginas web, de forma geral. Adiantamos ser uma linguagem de estilo muito fácil de aprender.
Risco das alterações se perderem em atualizações de tema
Usar CSS personalizado é muito simples e, com isso, acabamos editando muitos elementos. Mas imagine todo o seu trabalho indo por água abaixo, se não projetado da forma correta.
Quando um tema atualiza, pode ser que suas folhas de estilos sejam alteradas e até mesmo elementos HTML tenham a classe ou ID alterados, invalidando suas modificações.
Felizmente, mostraremos como criar uma folha de estilos “à prova de falhas”. Dessa forma, todas as alterações suas permanecerão, independente de troca de tema.
Como adicionar CSS personalizado em um blog WordPress
Se o seu site não é WordPress, feito apenas em HTML simples, siga os passos abaixo para inserir o seu CSS personalizado.
1. Crie uma nova folha de estilos
Via gerenciador de arquivos ou cliente FTP, crie um novo arquivo CSS com qualquer nome e o deixe no mesmo diretório do arquivo index.html. No nosso caso, utilizamos o csspersonalizado.css. Você pode criar esse arquivo via programas de edição de código como Sublime Text ou NotePad++.
2. Vincular a nova folha de estilos
Encontre o cabeçalho do seu site e antes da tag </head> insira o código abaixo:
<link rel="stylesheet" href="csspersonalizado.css">Atente para o nome do arquivo CSS dentro do atributo “href”. Se utilizou um diferente do nosso, não esqueça de alterar no blog.
3. Inserir os estilos que deseja
Depois, insira todos os arquivos que quiser no csspersonalizado.css que ele aparecerá no site, sobrescrevendo os outros estilos já aplicados. Porém, isso só funcionará se o inserir exatamente antes da tag </head>.
Como adicionar CSS personalizado em blog WordPress
Para adicionar CSS personalizado no WordPress, o passo a passo é tão simples quanto o anterior, necessitando apenas da instalação de um plugin e utilização dele. Mostraremos como fazer abaixo:
1. Instale o plugin
O plugin que utilizaremos para criar o CSS personalizado no WordPress é o Simple Custom CSS and JS. O instale e ative no seu painel.
2. Crie um novo estilo
Para criar um novo estilo, no menu lateral do WordPress vá em Custom CSS & JS → Add Custom CSS.
Fazendo isso, será aberta uma tela de edição de código. Defina o título do seu CSS personalizado e insira os códigos que achar necessário.
A vantagem de utilizar o plugin é a identação do código e as diferentes cores para atributos e seletores, tornando tudo bem mais fácil de visualizar.
3. Visualize as alterações no blog
Por último, para ter a certeza que as alterações estão efetivas no site, salve o código CSS personalizado e vá até a página principal do seu site.
Cheque se o código está funcionando como deveria. Caso não esteja, o Inspecionar Elemento do seu navegador pode te ajudar a entender o que deu errado.
Outros métodos de adicionar CSS personalizado no WordPress
Existem outras formas de adicionar CSS personalizado no WordPress. Todas elas funcionam muito bem, mas possuem desvantagens que falaremos nos tópicos abaixo.
Menu personalizar
Para inserir CSS personalizado pelo menu personalizar, vá em Aparência → Personalizar.
Na barra lateral esquerda, desça até a última opção “CSS adicional”. Ao clicar nela, será aberto um editor de código, similar ao mostrado com o plugin.
Digite o codigo CSS que achar necessário e depois clique no botão azul “Publicar”. Como esse modo do WordPress possui visualização em tempo real, conseguirá ver suas modificações imediatamente.
A desvantagem desse método é que todas as alterações feitas são vinculadas ao tema atual. Se for trocar de template, perderá todas as modificações já incluídas.
Child theme
Outra maneira interessante e um pouco mais complexa de adicionar CSS personalizado é a utilização de child themes.
O que é child theme
Um child theme é um tema filho que possui, por meio de herança dos atributos, toda a aparência e funcionalidade de um tema pai. Ao falar nisso, muitos se perguntam: “Por que utilizar um tema filho? Não é só alterar o tema pai que já está pronto”.
Sim, é possível só alterar o tema pai. O problema é que se ele for atualizado, pode ser que todas as alterações sejam perdidas.
Se for utilizado um tema filho, as atualizações se manterão, apesar das atualizações que podem ocorrer. Além disso, utilizá-los têm uma série de outros benefícios além do CSS personalizado, como:
- Modificação de arquivos de templates: com o child theme, há a possibilidade de criar novos templates para personalizar a estrutura do blog Por exemplo, caso deseje um novo cabeçalho, basta implementá-lo e ele estará disponível para ser utilizado, independente de atualizações futuras.
- Adição de funcionalidades novas: é possível adicionar novas funções ao tema filho, fazendo com que suas funcionalidades internas sejam mais específicas que no tema pai. Isso abre uma margem enorme para criação de novos temas baseados em outros.
Como implementar um child theme
Siga os passos abaixo para criar um tema filho no WordPress:
- Crie uma nova pasta no diretório wp-content/themes através de um cliente FTP ou gerenciador de arquivos. A pasta pode ter o nome que desejar, mas a recomendação é de usar o nome do tema pai, com um “-child” depois.
- Crie um arquivo style.css dentro da pasta do child theme. Abra esse arquio e insira as seguintes informações abaixo:
/*
Theme Name: Meu Child Theme
Template: nome-do-tema-pai
*/- Isso servirá de indicação dentro do painel do WordPress para saber que tema está alterando. Importante: no campo “nome-do-tema-pai” insira o nome da pasta do tema pai.
- Crie um novo arquivo chamado functions.php. Dentro dele insira o código abaixo. Ele é responsável por enfileirar a folha de estilos do tema pai, para que ela tenha efeitos também no tema filho.
/* script para enfileirar a folha de estilo do tema pai */
function childtheme_parent_styles() {
wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');Com isso, para adicionar CSS personalizado, basta inserir as alterações que desejarem no style.css do tema filho.
Dicas para implementação de CSS personalizado
Existem algumas dicas interessantes para aproveitar ao máximo o uso do CSS personalizado e evitar erros.
Use Inspecionar Elemento
Uma boa forma de saber como alterar determinado item HTML é utilizar a opção de Inspecionar Elemento, presente em todos os navegadores modernos.
Por exemplo, para alterar o botão “Pesquisa Google” da página inicial do Google, clicamos com o botão direito → Inspecionar Elemento e com isso temos acesso a todas as propriedades dele.
Caso quiséssemos alterar, via CSS personalizado, bastaria copiar a ID e realizar nossas alterações., como pôde ser visto na imagem abaixo.
Evite o uso do !important
O !important é uma declaração CSS que dá alta prioridade a um estilo definido, ignorando a ordem dos estilos. Quando se usa o !important, esse estilo irá sobrepor todos os outros.
Se o seu CSS personalizado exige o uso do !important para funcionar, provavelmente houve algum erro no enfileiramento de estilos ou a folha de estilos do tema também utilizou bastante o !important, sendo uma prática não recomendada.
Teste as alterações em outros navegadores
Após utilizar o CSS personalizado, teste a visualização do blog em outros navegadores. Esse teste simples garante que o estilo definido foi uniforme independente do dispositivo do usuário.
Prefira a utilização de plugins
Criar um child theme ou inserir estilos por conta própria em uma nova folha CSS do tema pode ser uma solução interessante, mas pensando em alterações de fácil manutenção e até mesmo trocas de temas futuras, a utilização de plugins é a melhor solução, justamente por ser mais fácil de aplicar.
Conclusão: como adicionar CSS personalizado
Nesse artigo, mostramos como inserir CSS personalizado no seu site da forma mais fácil possível. Ensinamos também outras maneiras de inserir CSS customizado.
Todo o conteúdo acima te ajudou a realizar as alterações que gostaria no seu blog? Se ajudou, nos deixe saber através do formulário de comentário.
Obrigado por ler até aqui. Um forte abraço. Nos vemos no próximo conteúdo.
