Classes CSS de widget

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

Créditos

Colaboradores do GitHub

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' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>'
) );

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.

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.

Avaliações

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!
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!
Leia todas as 74 avaliações

Colaboradores e desenvolvedores

“Classes CSS de widget” é um programa de código aberto. As seguintes pessoas contribuíram para este plugin.

Colaboradores

Classes CSS de widget” foi traduzido para 16 localidades. Agradecemos aos tradutores por suas contribuições.

Traduzir “Classes CSS de widget” para seu idioma.

Interessado no desenvolvimento?

Navegue pelo código, consulte o repositório SVN ou assine o registro de desenvolvimento por 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 (adereços @westonruter)
  • Testado com WP 5.2.

1.5.3

  • Compatibilidade: opção de widget dFactory Responsive Lightbox. #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
  • Documentação: Leiame e Wiki. #31
  • Compatibilidade: testado com WordPress 4.9

Informações detalhadas: PR no GitHub

1.5.2

  • Aprimoramento: Torne as traduções das principais classes de widgets opcionais em vez de padrão. #29
  • Aprimoramento: Permitir redimensionamento vertical da caixa de classes definidas para navegadores compatíveis com CSS3.

Informações detalhadas: PR no GitHub

1.5.1

  • Correção: compatibilidade do filtro Widget Logic widget_content. #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
  • Recurso: Opção para remover classes duplicadas. #25
  • Aprimoramento: Classifique as classes com base nas classes predefinidas na interface por padrão. #19
  • Enhancement: Classes filter for frontend (for sorting or modifications). #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
  • Aprimoramento: filtro de configurações padrão do plugin (widget_css_classes_default_settings). #4
  • Enhancement: Capability filters for form fields. #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, Obrigado Victor @freelancephp
  • Correção: Form wrapper div style. #18, Obrigado Chuck Reynolds @ryno267
  • Correção: ativar seleção de entrada classificável (correção do IE-11). #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). #23
  • Comecei a usar TravisCI e CodeClimate. #15

Informações detalhadas: PR no GitHub

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
  • i18n: Adicionada tradução para o russo por Наталия Завьялова
  • i18n: Adicionada tradução sueca por Olle Gustafsson

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

1.2.3

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
  • Correção de compatibilidade de contexto de widget atualizada e correção de aviso por Joan Piedra
  • 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