Title: Classes CSS de widget
Author: Jory Hogeveen
Published: 16 julho, 2012
Last modified: 12 novembro, 2024
---
Pesquisar plugins
# Classes CSS de widget
Por [Jory Hogeveen](https://profiles.wordpress.org/keraweb/)
[Baixar](https://downloads.wordpress.org/plugin/widget-css-classes.1.5.4.1.zip)
* [Detalhes](https://br.wordpress.org/plugins/widget-css-classes/#description)
* [Avaliações](https://br.wordpress.org/plugins/widget-css-classes/#reviews)
* [Instalação](https://br.wordpress.org/plugins/widget-css-classes/#installation)
* [Desenvolvimento](https://br.wordpress.org/plugins/widget-css-classes/#developers)
[Suporte](https://wordpress.org/support/plugin/widget-css-classes/)
## Descrição
### Widget CSS Classes oferece a capacidade de adicionar classes e ids personalizados aos seus widgets do WordPress
_Observe que este plugin não permite inserir CSS personalizado. Você precisará editar
o style.css do seu tema ou adicionar outro
plug-in que permita inserir CSS personalizado.
**Este plugin também adiciona classes adicionais aos widgets para ajudá-lo a estilizá-
los com mais facilidade:**
* widget-first: adicionado ao primeiro widget em uma barra lateral
* widget-last: adicionado ao último widget em uma barra lateral
* widget-odd: adicionado a widgets ímpares em uma barra lateral
* widget-even: adicionado a widgets pares em uma barra lateral
* widget-#: adicionado a cada widget, como widget-1, widget-2
#### Características
* Adiciona um campo de texto a um widget para definir uma classe
* Você pode especificar várias classes colocando um espaço entre elas
* Opcionalmente, adiciona caixas de seleção com classes predefinidas
* Opcionalmente, adiciona um campo de texto para adicionar um ID a um widget
* Adiciona a primeira e a última classe à primeira e à última instância do widget
em uma barra lateral
* Adiciona classes pares/ímpares aos widgets
* Adiciona classes numéricas aos widgets
* Totalmente traduzível
* Compatível com vários sites
* Compatível com plug-ins Widget Logic, Widget Context e WP Page Widget
* Possui filtros e ganchos para personalizar a saída, incluindo nomes de classes
[Site do plug-in](https://github.com/JoryHogeveen/widget-css-classes/wiki)
### Créditos
* [Adicionando classes CSS personalizadas a widgets do WordPress](http://ednailor.com/2011/01/24/adding-custom-css-classes-to-sidebar-widgets/)
* [Adicionar classes CSS .first e .last automaticamente aos widgets do WordPress](http://wpshock.com/add-first-last-css-class-automatically-to-wordpress-widgets/)
* Correção de compatibilidade de contexto de widget fornecida por [Joan Piedra](http://joanpiedra.com/)
* Tradução para eslovaco por Branco [WebHostingGeeks.com](http://webhostinggeeks.com/user-reviews/)
* Tradução em polonês adicionada, arquivos de tradução em eslovaco renomeados por
[Tomasz Wesołowski](https://github.com/ittw)
* Tradução para o espanhol por [Maria Ramos no WebHostingHub](http://www.webhostinghub.com/)
* Tradução servo-croata por [Borisa Djuraskovic em WebHostingHub](http://www.webhostinghub.com/)
* Tradução para holandês e classes predefinidas corrigidas por [Jory Hogeveen na Keraweb](https://www.keraweb.nl/)
* Tradução russa por Наталия Завьялова
* Tradução sueca por [Olle Gustafsson](http://www.ollegustafsson.com/)
* Aviso de correção de ids por [Ricardo Lüders](http://www.luders.com.br/)
* Tradução para o Português Brasileiro por [Jonathan Xavier, da Mealfan](https://mealfan.com/)(
e colaboradores)
[Colaboradores na tradução](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes/contributors/)
[Colaboradores no GitHub](https://github.com/JoryHogeveen/widget-css-classes/graphs/contributors)
## Capturas de tela
* [[
* Widget Básico
* [[
* Widget com campo ID e opções predefinidas
* [[
* Página de configurações
* [[
* HTML gerado
## Instalação
1. Envie a pasta _/widget-css-classes/_ para o diretório _/wp-content/plugins/_
2. Ative o plugin através do menu **Plugins** do WordPress
3. Defina as configurações em **Configurações > Classes CSS de widget**
4. Visite **Aparência > Widgets** para adicionar ou alterar as classes e IDs personalizados
de um widget.
5. Expanda o widget apropriado na barra lateral desejada.
6. Você verá um campo denominado **Classe CSS**. Dependendo de suas configurações,
este será um campo de texto e/ou caixas de seleção.
7. Se você estiver usando o campo de texto, poderá digitar vários nomes de classes
separando-os com um espaço.
8. Se você ativou o campo id, verá um campo de texto chamado **CSS ID**.
## Perguntas frequentes
### Por que as aulas não estão aparecendo no meu widget?
Você precisa ter certeza de ter um elemento HTML definido para `before_widget` e`
after_widget` nas funções `register_sidebar` do seu tema ativo,
geralmente localizadas
nas funções do seu tema .php (_/wp-content/themes/yourtheme/functions.php_).
Este elemento HTML deve ter atributos de classe e id. Este plugin não funcionará
se `before_widget` e `after_widget` estiverem em branco.
Exemplo:
`register_sidebar( array( 'name' => 'Sidebar', 'before_widget' => '', 'after_widget' => '
', 'before_title' => '
' ) );
### Como adiciono o CSS para minha classe personalizada?
Existem duas maneiras:
1. Edite o arquivo style.css do seu tema (geralmente localizado em _/wp-content/themes/
yourtheme/_).
2. Use um plugin como [Simple Custom CSS](https://wordpress.org/plugins/simple-custom-css/).
### Como exporto as configurações?
Você pode exportar as configurações em **Configurações > Classes CSS de widget >
Importar/Exportar**.
### O que devo fazer se encontrar um erro?
Envie um [relatório de erro no GitHub](https://github.com/JoryHogeveen/widget-css-classes/issues/new).
## Avaliações
### [Not working on WordPress 5.8](https://wordpress.org/support/topic/not-working-on-wordpress-5-8/)
[Pouria Amjadzadeh](https://profiles.wordpress.org/pamjad/) 10 agosto, 2021 1 resposta
Wordpress released new style of widget management. this lovely plugin not working
on new version 🙁
### [Good](https://wordpress.org/support/topic/good-6318/)
[Kasp](https://profiles.wordpress.org/kasp/) 27 março, 2021
works
### [Invaluable!](https://wordpress.org/support/topic/invaluable-63/)
[andiszek](https://profiles.wordpress.org/andiszek/) 10 março, 2021
This is a great and invaluable help for us frontend developers! the plugin lets
you easily add your classes to any widget. thank you for developing it!
### [Superb!](https://wordpress.org/support/topic/superb-721/)
[Damiaan van Vliet](https://profiles.wordpress.org/damnsharp/) 2 abril, 2020 1
resposta
A very useful plug-in for me as a front-end developer. It’s very easy now to address
directly a widget with CSS code instead of all kind of different classes to use.
Thanks very, very much!
### [Great! 🙂](https://wordpress.org/support/topic/great-10883/)
[xszejdi](https://profiles.wordpress.org/xszejdi/) 17 fevereiro, 2020
Great! 🙂
### [Works, simply and well…](https://wordpress.org/support/topic/works-simply-and-well/)
[crzyhrse](https://profiles.wordpress.org/crzyhrse/) 5 dezembro, 2019
Works, simply and well…
[ Leia todas as 74 avaliações ](https://wordpress.org/support/plugin/widget-css-classes/reviews/)
## Colaboradores e desenvolvedores
“Classes CSS de widget” é um programa de código aberto. As seguintes pessoas contribuíram
para este plugin.
Colaboradores
* [ Jory Hogeveen ](https://profiles.wordpress.org/keraweb/)
* [ Cindy Kendrick ](https://profiles.wordpress.org/elusivelight/)
Classes CSS de widget” foi traduzido para 17 localidades. Agradecemos aos [tradutores](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes/contributors)
por suas contribuições.
[Traduzir o “Classes CSS de widget” para seu idioma.](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes)
### Interessado no desenvolvimento?
[Navegue pelo código](https://plugins.trac.wordpress.org/browser/widget-css-classes/),
consulte o [repositório SVN](https://plugins.svn.wordpress.org/widget-css-classes/)
ou assine o [registro de desenvolvimento](https://plugins.trac.wordpress.org/log/widget-css-classes/)
por [RSS](https://plugins.trac.wordpress.org/log/widget-css-classes/?limit=100&mode=stop_on_copy&format=rss).
## Registro de alterações
#### 1.5.4.1
* Testado com WP 5.5.
* Atualizar proprietário do plugin.
#### 1.5.4
* **Compatibilidade:** Correção para widgets únicos antigos (remover aviso). [#37](https://github.com/cleverness/widget-css-classes/issues/37)(
adereços @westonruter)
* Testado com WP 5.2.
#### 1.5.3
* **Compatibilidade:** opção de widget dFactory Responsive Lightbox. [#33](https://github.com/cleverness/widget-css-classes/issues/33)
* Testado com WP 5.0.
#### 1.5.2.1
* **i18n:** Remova a tradução sv_SE do diretório do plugin. Está 95% no translate.
wordpress.org e é aceito como a melhor versão. [#23](https://github.com/cleverness/widget-css-classes/issues/23)
* **Documentação:** Leiame e Wiki. [#31](https://github.com/cleverness/widget-css-classes/issues/31)
* **Compatibilidade:** testado com WordPress 4.9
Informações detalhadas: [PR no GitHub](https://github.com/cleverness/widget-css-classes/pull/32)
#### 1.5.2
* **Aprimoramento:** Torne as traduções das principais classes de widgets opcionais
em vez de padrão. [#29](https://github.com/cleverness/widget-css-classes/issues/29)
* **Aprimoramento:** Permitir redimensionamento vertical da caixa de classes definidas
para navegadores compatíveis com CSS3.
Informações detalhadas: [PR no GitHub](https://github.com/cleverness/widget-css-classes/pull/30)
#### 1.5.1
* **Correção:** compatibilidade do filtro Widget Logic `widget_content`. [#27](https://github.com/cleverness/widget-css-classes/issues/27)
* **Aprimoramento:** Torne o script de desinstalação compatível com instalações
de rede.
#### 1.5.0
* **Recurso:** Opção para tentar corrigir os parâmetros do widget se eles forem
inválidos. [#24](https://github.com/cleverness/widget-css-classes/issues/24)
* **Recurso:** Opção para remover classes duplicadas. [#25](https://github.com/cleverness/widget-css-classes/issues/25)
* **Aprimoramento:** Classifique as classes com base nas classes predefinidas na
interface por padrão. [#19](https://github.com/cleverness/widget-css-classes/issues/19)
* **Enhancement:** Classes filter for frontend (for sorting or modifications).
[#19](https://github.com/cleverness/widget-css-classes/issues/19)
- `widget_css_classes`: modifica todas as classes adicionadas por este plugin.
- `widget_css_classes_custom`: modifica classes de entrada personalizadas.
* **Aprimoramento:** filtro de configurações do plugin (`widget_css_classes_set_settings`),
substitui as configurações do usuário. [#16](https://github.com/cleverness/widget-css-classes/issues/16)
* **Aprimoramento:** filtro de configurações padrão do plugin (`widget_css_classes_default_settings`).
[#4](https://github.com/cleverness/widget-css-classes/issues/4)
* **Enhancement:** Capability filters for form fields. [#21](https://github.com/cleverness/widget-css-classes/issues/21)
- `widget_css_classes_id_input_capability`: entrada de ID
- `widget_css_classes_class_input_capability`: entrada de classes
- `widget_css_classes_class_select_capability`: seleção de classes predefinidas(
também oculta a entrada de classes se for inválida)
* **Compatibilidade:** WP External Links. [#17](https://github.com/cleverness/widget-css-classes/issues/17),
Obrigado Victor [@freelancephp](https://profiles.wordpress.org/freelancephp)
* **Correção:** Form wrapper div style. [#18](https://github.com/cleverness/widget-css-classes/issues/18),
Obrigado Chuck Reynolds [@ryno267](https://profiles.wordpress.org/ryno267)
* **Correção:** ativar seleção de entrada classificável (correção do IE-11). [#20](https://github.com/cleverness/widget-css-classes/issues/20)
* **IU:** aprimore o JavaScript da página de configuração e remova a dependência
da biblioteca relCopy.
* **i18n:** remova os idiomas holandês e russo da distribuição de plugins (disponível
em [ traduz.wordpress.org](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes)).
[#23](https://github.com/cleverness/widget-css-classes/issues/23)
* Comecei a usar TravisCI e CodeClimate. [#15](https://github.com/cleverness/widget-css-classes/issues/15)
Informações detalhadas: [PR no GitHub](https://github.com/cleverness/widget-css-classes/pull/22)
#### 1.4.0
* Recurso: Classificar classes predefinidas (obrigado Jory Hogeveen)
* Segurança: Impedir a importação não autenticada de configurações
* Correção: mensagem de aviso quando as classes estão vazias (obrigado Jory Hogeveen)
#### 1.3.0
* Recurso: altere o menu suspenso para caixas de seleção para seleção de várias
classes
* Recurso: Opção para usar classes predefinidas e de entrada de texto
* Recurso: Migre classes quando classes predefinidas estiverem disponíveis
* Melhoria: Não mostra classes previamente definidas que são removidas na página
de configurações quando um widget ainda não foi atualizado
* Correção: mostrar apenas classes armazenadas se o tipo de campo na página de
configuração estiver correto
* Correção: quando predefinido é selecionado, mostra as classes de entrada de texto
anteriores, se estiverem definidas
* Correção: aviso de índice de IDs
* i18n: Adicionada tradução em holandês por [Jory Hogeveen da Keraweb](https://www.keraweb.nl/)
* i18n: Adicionada tradução para o russo por Наталия Завьялова
* i18n: Adicionada tradução sueca por [Olle Gustafsson](http://www.ollegustafsson.com/)
#### 1.2.9
* Alterado h2 para h1 na página de configurações
* Ícones de mais/menos alterados na página de configurações para dashicons
#### 1.2.8
* Adicionado domínio de texto ao cabeçalho do plugin em preparação para traduções
automáticas de idiomas
#### 1.2.7
* Campos de classe e ID alterados para largura total
* Adicionado escape ausente da página de configurações
* Enfileirar scripts administrativos no gancho correto
* Corrigido aviso indefinido quando a opção não era encontrada
#### 1.2.6
* Aviso de erro corrigido
#### 1.2.5
* Aviso corrigido
#### 1.2.4
* Adicionada tradução servo-croata por [Borisa Djuraskovic no WebHostingHub](http://www.webhostinghub.com/)
* Adicionado suporte para WP Page Widget
#### 1.2.3
* Adicionada tradução em polonês, arquivos de tradução em eslovaco renomeados por
[Tomasz Wesołowski](https://github.com/ittw)
* Adicionada tradução em espanhol por [Maria Ramos no WebHostingHub](http://www.webhostinghub.com/)
#### 1.2.2
* Correção para aviso na linha 103 ao usar Widget Logic
* Testado com WordPress 3.7 beta 1
#### 1.2.1
* Adicionada tradução para eslovaco por Branco [WebHostingGeeks.com](http://webhostinggeeks.com/user-reviews/)
* Correção de compatibilidade de contexto de widget atualizada e correção de aviso
por [Joan Piedra](http://joanpiedra.com/)
* Alterado o jQuery live para compatibilidade com 1.9
#### 1.2
* Substitua o ID pelo ID personalizado em vez de anexar ao ID existente
* Adicionadas configurações para não mostrar classes de widget numeradas, primeiras/
últimas classes e classes pares/ímpares
#### 1.1
* Adicionado suporte para o plugin Widget Context
* Corrigidos avisos que apareciam quando o plugin Widget Logic estava habilitado,
mas o filtro estava desabilitado
* Adicionada opção Ocultar para o tipo de campo de classe nas configurações
* Não mostrar nenhum ID adicionado anteriormente no front-end se Mostrar campo
adicional para ID estiver definido como Não
* Não mostrar nenhuma classe adicionada anteriormente no front-end se o Tipo de
campo de classe estiver definido como Ocultar
#### 1.0
* Primeira versão
## Meta
* Versão **1.5.4.1**
* Última atualização **1 ano atrás**
* Instalações ativas **90.000+**
* Versão do WordPress ** 3.3 ou superior **
* Testado até **6.7.5**
* Versão do PHP ** 5.2.4 ou superior **
* Idiomas
* [Danish](https://da.wordpress.org/plugins/widget-css-classes/), [Dutch](https://nl.wordpress.org/plugins/widget-css-classes/),
[Dutch (Belgium)](https://nl-be.wordpress.org/plugins/widget-css-classes/), [English (Australia)](https://en-au.wordpress.org/plugins/widget-css-classes/),
[English (Canada)](https://en-ca.wordpress.org/plugins/widget-css-classes/),
[English (New Zealand)](https://en-nz.wordpress.org/plugins/widget-css-classes/),
[English (UK)](https://en-gb.wordpress.org/plugins/widget-css-classes/), [English (US)](https://wordpress.org/plugins/widget-css-classes/),
[French (France)](https://fr.wordpress.org/plugins/widget-css-classes/), [Galician](https://gl.wordpress.org/plugins/widget-css-classes/),
[German](https://de.wordpress.org/plugins/widget-css-classes/), [Korean](https://ko.wordpress.org/plugins/widget-css-classes/),
[Portuguese (Brazil)](https://br.wordpress.org/plugins/widget-css-classes/),
[Russian](https://ru.wordpress.org/plugins/widget-css-classes/), [Spanish (Chile)](https://cl.wordpress.org/plugins/widget-css-classes/),
[Spanish (Spain)](https://es.wordpress.org/plugins/widget-css-classes/), [Spanish (Venezuela)](https://ve.wordpress.org/plugins/widget-css-classes/)
e [Swedish](https://sv.wordpress.org/plugins/widget-css-classes/).
* [Traduzir para seu idioma](https://translate.wordpress.org/projects/wp-plugins/widget-css-classes)
* Tags
* [classes](https://br.wordpress.org/plugins/tags/classes/)[css](https://br.wordpress.org/plugins/tags/css/)
[widget classes](https://br.wordpress.org/plugins/tags/widget-classes/)[widget css](https://br.wordpress.org/plugins/tags/widget-css/)
[widgets](https://br.wordpress.org/plugins/tags/widgets/)
* [Visualização avançada](https://br.wordpress.org/plugins/widget-css-classes/advanced/)
## Classificações
4.9 de 5 estrelas.
* [ 70 avaliações com 5 estrelas ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=5)
* [ 3 avaliações com 4 estrelas ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=4)
* [ 0 avaliação com 3 estrela ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=3)
* [ 1 avaliação com 2 estrela ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=2)
* [ 0 avaliação com 1 estrela ](https://wordpress.org/support/plugin/widget-css-classes/reviews/?filter=1)
[Your review](https://wordpress.org/support/plugin/widget-css-classes/reviews/#new-post)
[Ver todas avaliações](https://wordpress.org/support/plugin/widget-css-classes/reviews/)
## Colaboradores
* [ Jory Hogeveen ](https://profiles.wordpress.org/keraweb/)
* [ Cindy Kendrick ](https://profiles.wordpress.org/elusivelight/)
## Suporte
Tem algo a dizer? Precisa de ajuda?
[Ver fórum de suporte](https://wordpress.org/support/plugin/widget-css-classes/)
## Doar
Gostaria de contribuir para o desenvolvimento deste plugin?
[ Doe para este plugin ](https://www.keraweb.nl/donate.php?for=widget-css-classes)