Para quem já trabalha com desenvolvimento WEB já sabe como é importante ter classes adicionadas em elementos HTML. São as classes e id’s CSS que nos permitem trabalhar com regras de estilo específicas para os diferentes elementos de um site.

Assim, quando criamos uma sidebar e widgets personalizados, podemos adicionar as classes CSS que quisermos no mesmo momento da criação. Todavia, quando é necessário trabalhar com temas prontos muitas vezes não é viável manipular o código fonte do mesmo e por isso, precisamos pensar numa solução eficiente para adicionar classe CSS aos widgets WordPress existentes no tema daquele site.

E não se engane, é muito comum mesmo com a utilização de plugins e temas prontos – seja premium ou free, ter de realizar algum ajuste ou implementação de regra CSS para que a aparência de algum elemento do site seja exibido de uma forma específica e desejada. No caso dos widgets essa necessidade é ainda mais comum, pois pode ser que você não goste do alinhamento e tamanho de uma imagem ou texto, por exemplo.

Adicionar Classes CSS aos Widgets WordPress

Por isso, se você estava sem saber como adicionar classes CSS aos widgets nativos ou até quem sabe, personalizados do site sem mexer no código fonte do tema, não precisa mais se preocupar. O CanalWP vai te mostrar agora mesmo, como realizar essa tarefa de forma limpa, simples e extremamente rápida, permitindo que em pouquíssimos segundos você consiga criar e aplicar regras CSS personalizadas para um ou mais widgets do seu site.

Widget CSS Classes

O plugin escolhido para que qualquer usuário WordPress consiga adicionar classes CSS a um ou mais widgets é o Widget CSS Classes. Esse é um plugin já utilizado por mais de 100 mil usuários da comunidade WP e está em constante atualização.

Widget CSS Classes além de adicionar um campo para receber classes CSS personalizadas – adicione quantas classes quiser colocando um espaço entre elas -, o plugin também traz classes adicionais para ajudar na estilização dos widgets: widget-first, widget-last e outras mais.

Um diferencial muito importante do Widget CSS Classes é a sua compatibilidade com os melhores e mais utilizados plugins para gerenciar widgets, como: Widget Logic, Widget Context, and WP Page Widget. Veja Como Exibir Widgets em Páginas Especificas com Widget Logic.

Baixar | Hospedagem

Fazendo Uso do Widget CSS Classes

Agora que já te apresentei a ferramenta que vamos utilizar para conseguir adicionar classes CSS a qualquer widget WordPress, vamos fazer uso dele e ver como o plugin trabalha para que não hajam dúvidas.

Depois que você adicionou e ativou o Widget CSS Classes acesse a área de widgets do seu site WordPress (Aparência > Widgets).

Dentro da página de widgets, escolha na lista de widgets disponíveis aquele a qual você deseja adicionar uma classe CSS para conseguir criar regras de estilo. Basta arrastar e solta algum dos widgets para alguma das sidebars existentes em seu WordPress.

Depois de ter escolhido o widget, veja que no final do seu respectivo box existe um campo chamado CSS Classes.

É neste campo que você deve digitar qual ou quais classes quer adicionar àquele widget.

Obs: Essa opção não é nativa do WP, apenas aparece para você após ter adicionado e ativado o plugin Widget CSS Classes!

Após ter definido o nome da classe que deseja utilizar para customizar o seu widget, não esqueça de clicar no botão Salvar para armazenar a configuração que acaba de fazer.

Página de Configurações Plugin

Como o foco nesse tutorial é demonstrar de forma rápida e prática como você pode adicionar classe CSS ao widget WordPress do seu site, deixei para o final a página de configurações do Widget CSS Classes.

Se você precisar definir classes e exibi-las como opções no box dos seus widgets é na página de configurações do plugin que vai conseguir fazer isso. Acesse Configurações > Widget CSS Classes.

Além de conseguir criar classes pré-definidas e regras para a utilização do plugin na página dos widget é possível também exportar e importar as configurações criadas para o plugin. A opção de exportar/importar configurações é interessante para que você consiga trabalhar com Widget CSS Classes em diferentes sites, sem ter de realizar as mesmas configurações todas as vezes que tiver instalado o plugin.

Aplicando CSS Ao Widget

A seguir vou mostrar um exemplo de customização CSS realizada na prática.

Claro, utilizando o plugin Widget CSS Classes para conseguir adicionar a classe CSS que possibilitaria a marcação do widget.

Antes

O meu widget antes de receber as regras de estilo criadas e aplicadas por meio da classe CSS tinha a seguinte aparência:

E se olharmos o código HTML do mesmo era assim:

Depois

Após adicionar regras para customização do tipo de fonte, tamanho, cor, posição da imagem de miniatura e para o link dos posts, o novo visual do widget ficou assim:

E o meu código fonte HTML após a adição da classe CSS por meio do plugin Widget CSS Classes ficou dessa maneira:

Perceba que a classe adicionada ali foi a posts-amados, aparecendo já no finalzinho do elemento.

Conclusão

Deixar a aparência da sidebar e dos widgets de um site harmônicos – com fontes, cores e outros atributos customizados -, é muito importante para conseguir um design e layout profissionais e bem montados. Por isso o plugin que indicamos hoje, o Widget CSS Classes, é uma ferramenta incrível para conseguir trabalhar regras CSS específicas para cada widget de um site WordPress.

O tutorial de hoje foi voltado para profissionais e usuários WordPress que precisam mexer na aparência dos widgets de um site, com o objetivo de deixá-lo mais organizado e com layout condizente ao restante do site. Utilizando o Widget CSS Classes você viu que é possível de forma rápida e fácil adicionar classes CSS aos widgets WordPress, expandindo assim as possibilidades de customização e personalização por meio de regras CSS.

Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.