Melhores códigos CSS para personalizar sites WordPress

Publicados: 2022-03-15

Você está olhando para alguns dos melhores códigos CSS para personalizar o WordPress ? Nesse caso, mostraremos alguns dos scripts CSS mais usados ​​que você pode usar para editar seu site WordPress.

Sabemos que existem muitas opções para personalizar o WordPress com plugins, opções de temas e configurações padrão. Mas você também pode editar várias áreas do seu site usando códigos CSS. Então, vamos ver por que você pode precisar deles para personalizar seu site primeiro.

Por que os códigos CSS são usados ​​no WordPress para personalizar sites?

Scripts ou códigos CSS são usados ​​no WordPress para alterar a aparência visual de um site. Se você deseja fazer algumas alterações de design específicas que não estão incluídas nas opções de tema ou nas configurações padrão do WordPress, os scripts CSS podem ser muito úteis para você.

Você pode instalar um plug-in do WordPress para personalizações, mas os plug-ins adicionam um certo peso à estrutura do seu site que pode desacelerá-lo. Usar um plugin para realizar uma pequena mudança na aparência do site não compensa a queda no desempenho. Portanto, se você tem conhecimento básico em codificação, usar códigos CSS é a melhor opção.

Para garantir que você não perca a velocidade do site ao fazer as modificações visuais, recomendamos que você use códigos CSS para personalizar seu site WordPress. Além disso, pode haver alguns designs exclusivos que você deseja implementar em seu site às vezes. E se não houver plugins personalizados criados para isso, os scripts CSS são sua única opção.

Melhores códigos CSS para personalizar um site WordPress

Embora existam muitos códigos CSS para personalizar um site WordPress, apresentaremos os melhores scripts CSS que encontramos. Eles são alguns dos códigos mais usados ​​para resolver todos os tipos de problemas e obter designs excelentes ao trabalhar no front-end de um site WordPress.

No entanto, a lista de scripts a seguir destina-se a fins de demonstração, eles podem não funcionar em seu site porque os seletores usados ​​são relativos a um site de amostra. Na maioria dos casos, você precisará editar os seletores, por isso você precisará de um conhecimento básico de CSS para aplicar esses scripts ao seu site. Confira este post se quiser saber mais sobre como aplicar scripts CSS a um site WP usando a ferramenta do desenvolvedor.

Além disso, você encontrará uma seção extra no final, onde aprenderá a aplicar seus scripts CSS ao WordPress de três maneiras diferentes. Agora, vamos passar pelos scripts

1. Ocultar Elementos

Esta é provavelmente a regra CSS mais usada. É bastante útil quando você precisa remover qualquer elemento no front-end ou no back-end.

1.1. Ocultar cabeçalho:

 cabeçalho{
    Mostrar nenhum;
}

1.2. Ocultar o botão "adicionar ao carrinho"

 .single_add_to_cart_button.button{
    Mostrar nenhum;
}

1.3. Ocultar migalhas de pão

 .woocommerce-breadcrumb{
    Mostrar nenhum;
}

Observação: isso não é recomendado em alguns casos, pois um elemento oculto pode se tornar visível com um conhecimento básico do console do navegador. Por exemplo, pode ser necessário remover um formulário para que os usuários não possam preenchê-lo. Então, você não quer fazer isso com um script CSS porque qualquer pessoa com conhecimento básico pode torná-los visíveis e enviar o formulário de qualquer maneira.

No entanto, ele oferece uma solução rápida e fácil para problemas de estilo ou design e ainda podemos usá-lo sem nenhum problema.

Se você quiser mais ajuda sobre como ocultar e remover o botão adicionar ao carrinho, também temos um guia detalhado sobre isso. Da mesma forma, você também pode encontrar mais informações sobre como editar cabeçalho e breadcrumbs no WordPress, se necessário, em nossos blogs.

2. Mover Elementos

Se você precisar mover algum elemento para ajustar o design de uma página, poderá movê-lo facilmente em qualquer direção usando algo assim:

 #qlwapp{
    inferior:45px;
    esquerda:25px;
    posição: relativa;
}

Você pode precisar definir position:relative em alguns casos, se o elemento tiver sido posicionado antes.

Nota: Isso é útil apenas para pequenos ajustes, os elementos não devem ser movidos para fora de seus contêineres. Você pode usar top, right, bottom, left e dar um valor a cada um.

3. Códigos CSS para o modo móvel

Também podemos aplicar CSS apenas para dispositivos móveis. Isso pode ser feito usando consultas de mídia.

Eles funcionam como uma instrução condicional. Todas as regras CSS na consulta de mídia serão aplicadas somente se o tamanho da tela for inferior a 768 pixels.

A largura de tela fornecida é retirada do padrão aceito para dispositivos móveis, que é 768px. Você pode editar esse valor para aplicar em dispositivos de tamanho de tela maior ou menor.

 @media only screen e (max-width:768px){
    div.masthead{
        exibição: bloco em linha;
        largura: 50%;
        margem:auto;
    }
}

4. Editar texto

Pseudo seletores CSS são ótimos recursos para personalizar um site WordPress. E com o uso inteligente deles, podemos realizar muitas modificações em seu site também. Portanto, também podemos usar esses códigos CSS para personalizar o texto do seu site WordPress.

Os :before e :after nos permitem inserir um “pseudo-elemento” logo antes ou depois de qualquer outro elemento HTML. Desta forma, podemos ocultar um texto e substituí-lo por qualquer outro:

 p.text{
    visibilidade:oculto;
}
p.texto::antes{
    visibilidade:visível;
    content:'texto novo aqui';
    exibição: bloco;
}

5. Traduções usando códigos CSS

A pseudo-classe :lang() nos permite aplicar regras CSS dependendo do idioma da página. Mesmo que seja traduzido com um dos plugins de tradução como WPML ou Polylang, o atributo lang atual sempre estará na tag principal <html> da saída HTML do site.

Melhores scripts CSS para WordPress

Portanto, se usarmos o pseudo seletor :before como visto no script de exemplo anterior, em combinação com a :lang() , poderemos traduzir qualquer string em um site.

Isso também funcionará em sites multilíngues.

 p.text:lang(pt){
    visibilidade:oculto; 
} 
p.text:lang(pt)::antes{ 
    visibilidade:visível;
    content:'texto traduzido';
    exibição: bloco; 
}

6. Adicione uma barra de rolagem

Uma barra de rolagem pode melhorar a experiência do usuário em um site quando você tem algum conteúdo grande, como listas, galerias de imagens ou seções. Eles também ajudam a manter posts e páginas sem um comprimento excessivo.

Isso é especialmente útil para usar em uma barra lateral ou em qualquer outra área de widget. Além disso, pode ajudar a corrigir problemas de widgets ausentes ou cortados quando a altura também excede o tamanho disponível.

Também podemos inserir uma barra de rolagem em posts e páginas:

Este script adicionará uma barra de rolagem à lista, tornando todos os documentos muito mais curtos.

 ul {
    altura:370px;
    estouro-y:scroll;
}

Melhores scripts CSS para WordPress

7. Códigos CSS para usar imagens como ícones

Você pode adicionar qualquer tipo de imagem com um script CSS e isso pode ser feito de algumas maneiras. Mas usando o pseudo seletor :before , podemos adicionar uma imagem e fazer com que pareça um ícone também.
Certifique-se de fazer upload de uma imagem para a biblioteca de mídia e use o link permanente da imagem como o url('image-link-here')

 .entry-content > p:nth-child(3)::before{
    content:url('http://localhost/Sampler/wp-content/uploads/2022/03/fish-icon.png');
}

Ou podemos usar ícones reais, também usando o mesmo seletor:

 .entry-content > p:nth-child(3)::before{
	font-family: "Font Awesome 5 Free"; 
        peso da fonte: 400; 
        conteúdo: "\f0f3";
}

Para usar ícones reais, a tag HTML do link do ícone está configurada para a fonte awesome 5 Free em nosso exemplo. Ele deve ser carregado na seção <head> da página da web.

8. Alterar fontes

Você também pode personalizar as fontes de um site WordPress com códigos CSS. Semelhante aos ícones, as fontes também devem ser carregadas no cabeçalho do tema para que possamos usá-las. Podemos verificar se o conjunto de fontes está disponível dando uma olhada na seção <head> da página.

Aqui, o link do Google Fonts já foi adicionado com a ajuda de um script PHP.

melhores scripts CSS para WordPress

Depois de confirmar que o ícone ou conjunto de fontes que você deseja usar já está carregado na seção HTML <head> , você pode usá-lo livremente em todo o site

 h1,h2,h3,p,a,li{
    família de fontes: 'Hubballi', cursiva;
}

Bônus: 3 maneiras de aplicar CSS a um site WordPress

Fornecemos alguns dos códigos CSS mais usados ​​para personalizar seu site WordPress. Mas você também precisa saber como adicioná-los ao seu site também. Para isso, também mostraremos um breve tutorial como bônus neste artigo.

Então, aqui estão as 3 maneiras comuns de aplicar CSS a um site WordPress.

1. Personalizador de temas

Para adicionar o script CSS por meio do personalizador de temas, tudo o que você precisa fazer é colar seus scripts CSS no personalizador de temas. Geralmente pode ser aplicado para pequenas customizações ou correções.

Vá para Aparência > Personalizar > CSS Adicional para abrir o editor de estilo. Em seguida, cole seus scripts CSS aqui.

melhores scripts css para wordpress

Os scripts aqui serão salvos no banco de dados após clicar no botão “ Publicar ”. Você poderá ver as alterações em seu site depois de visualizá-lo.

2. Arquivo CSS do tema filho

Para esta etapa, você terá que criar um tema filho para seu site programaticamente ou usando um dos plug-ins de tema filho antes de começarmos. Em seguida, certifique-se de que seu site tenha um tema filho ativo e adicione os códigos CSS no arquivo style.css . É melhor fazer backup de todo o seu site também, pois modificaremos os delicados arquivos principais do seu site.

Abra seu editor de código para colar seus scripts lá ou use o editor WP embutido em Appearance > Theme Files Editor . Agora, abra a folha de estilo ou o arquivo style.css do tema filho.

Este é o local onde você deve colar todos os seus scripts personalizados. Depois de adicionar os códigos CSS, clique em Atualizar arquivo . Mas se ele se transformar em um arquivo grande, pode ser uma boa ideia criar um novo arquivo ou vários.

3. arquivo functions.php de um tema filho

Você também pode inserir estilos CSS usando uma função PHP. Todos os estilos aplicados desta forma serão inseridos como estilos embutidos na frente.

Assim como na abordagem anterior, certifique-se de que o tema filho esteja ativo para o seu site. Em seguida, abra o arquivo functions.php do editor de temas e cole os seguintes códigos aqui.

 add_action('wp_head','QuadLayers_headlink');
function QuadLayers_headlink(){
	echo '<estilo>
    .entry-content > p:nth-child(3)::before{
	    font-family: "Font Awesome 5 Free"; 
	    peso da fonte: 400; 
	    conteúdo: "\f0f3";
    }
    h1,h2,h3,p,a,li{
	    família de fontes: "Hubballi", cursiva;
    }</style>';
}

A grande vantagem de usar essa maneira é que você pode aplicar condicionais PHP, aproveitando todo o poder dos ganchos e funções do WP.

Se você quiser saber mais sobre como aplicar CSS ao seu site, consulte nosso guia sobre como aplicar CSS ao WordPress também.

Conclusão

Estes são todos os códigos CSS mais usados ​​para personalizar um site WordPress . Mostramos todos os scripts populares com os quais você pode alterar a aparência visual do seu site e adicionar designs exclusivos a ele. Para resumir, cobrimos as seguintes modificações usando scripts CSS:

  1. Ocultar elementos
  2. Mover elementos
  3. CSS para dispositivos móveis
  4. Editar texto
  5. Traduções
  6. Adicionar uma barra de rolagem
  7. Use imagens como ícones
  8. Alterar fontes

Você pode facilmente usar códigos CSS para personalizar esses elementos do seu site WordPress. Para ajudá-lo com isso, mostramos algumas maneiras de aplicar CSS no WordPress.

Além disso, se você quiser aprender sobre CSS no WordPress, também abordamos a aplicação de CSS em páginas ou postagens específicas. Da mesma forma, scripts CSS podem até ser usados ​​com construtores de páginas. Um dos exemplos mais comuns é personalizar o menu Divi com CSS.

Então, o que você acha do CSS para editar um site WP? Você já os usou? Eles foram úteis? Por favor deixe nos saber nos comentarios.

Enquanto isso, aqui estão mais alguns artigos que podem lhe interessar:

  • Como criar um plugin WordPress personalizado
  • Corrija o problema de não carregamento do painel do WordPress
  • Como criar um campo personalizado do WordPress programaticamente