Widget CSS Classes

Beschrijving

Widget CSS Classes gives you the ability to add custom classes and ids to your WordPress widgets

Please note that this plugin doesn’t enable you to enter custom CSS. You’ll need to edit your theme’s style.css or add another
plugin that allows you to input custom CSS.

This plugin also adds additional classes to widgets to help you style them easier:

  • widget-first: toegevoegd aan de eerste widget in een zijbalk
  • widget-last: toegevoegd aan de laatste widget in een zijbalk
  • widget-oneven: toegevoegd aan oneven genummerde widgets in een zijbalk
  • widget-even: toegevoegd aan even genummerde widgets in een zijbalk
  • widget-#: toegevoegd aan elke widget, zoals widget-1, widget-2

Features

  • Voegt een tekstveld toe aan een widget om een ​​klasse te definiëren
  • You can specify multiple classes by putting a space between them
  • Optionally adds checkboxes with predefined classes
  • Voegt optioneel een tekstveld toe om een id aan een widget toe te voegen
  • Voegt eerste en laatste klassen toe aan de eerste en laatste widgetinstanties in een zijbalk
  • Voegt even / oneven klassen toe aan widgets
  • Voegt nummerklassen toe aan widgets
  • Volledig vertaalbaar
  • Multi-site compatible
  • Compatible with Widget Logic, Widget Context, and WP Page Widget plugins
  • Heeft filters en hooks voor het aanpassen van uitvoer inclusief klassenamen

Plugin site

Credits

GitHub bijdragers

Schermafdrukken

  • Basic Widget
  • Widget met ID-veld en vooraf gedefinieerde keuzes
  • instellingen Pagina
  • Gegenereerde HTML

Installatie

  1. Upload the folder /widget-css-classes/ to the /wp-content/plugins/ directory
  2. Activeer de plugin via de plugins menu in WordPress
  3. Configureer de instellingen onder Instellingen > Widget CSS klassen
  4. Bezoek Uiterlijk > widgets om aangepaste klassen en ids voor een widget toe te voegen of te wijzigen.
  5. Vouw de juiste widget in de gewenste zijbalk uit.
  6. You’ll see a field labeled CSS Class. Depending on your settings, this will be a text field and/or checkboxes.
  7. If you are using the text field you can enter multiple class names by separating them with a space.
  8. If you’ve enabled the id field, you will see a text field called CSS ID.

FAQ

Waarom worden de klassen niet weergegeven in mijn widget?

You need to make sure you have an HTML element defined for before_widget and after_widget in your active theme’s register_sidebar functions,
usually located in your theme’s functions.php (/wp-content/themes/yourtheme/functions.php).

This HTML element must have class and id attributes. This plugin will not work if before_widget and after_widget are blank.

Voorbeeld:
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>'
) );

Hoe kan ik toevoegen aan de CSS voor mijn aangepaste klasse?

Er zijn twee manieren:

  1. Bewerk het bestand style.css van je thema (meestal te vinden in/wp-content/themes/yourtheme/).
  2. Use a plugin such as Simple Custom CSS.

Hoe exporteer ik de instellingen?

You can export the Settings from Settings > Widget CSS Classes > Import/Export.

Wat moet ik doen als ik een bug vind?

Gelieve een bestand in te dienen foutrapport op GitHub.

Beoordelingen

10 maart 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 april 2020 1 reactie
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!
Lees alle 74 beoordelingen

Bijdragers & ontwikkelaars

“Widget CSS Classes” is open source software. De volgende personen hebben bijgedragen aan deze plugin.

Bijdragers

“Widget CSS Classes” is vertaald in 15 talen. Dank voor de vertalers voor hun bijdragen.

Vertaal “Widget CSS Classes” naar jouw taal.

Interesse in ontwikkeling?

Bekijk de code, haal de SVN repository op, of abonneer je op het ontwikkellog via RSS.

Changelog

1.5.4.1

  • Tested with WP 5.5.
  • Update plugin owner.

1.5.4

  • Compatibility: Fix for old single widgets (remove notice). #37 (props @westonruter)
  • Tested with WP 5.2.

1.5.3

  • Compatibility: dFactory Responsive Lightbox widget option. #33
  • Getest met WP 5.0.

1.5.2.1

  • i18n: verwijder sv_SE vertaling uit de plugin directory. Het is 95% op translate.wordpress.org en geaccepteerd als de betere versie. #23
  • Documentatie:Leesmij & amp; Wiki.# 31
  • Compatibiliteit: Getest met WordPress 4.9

Gedetailleerde info: PR op GitHub

1.5.2

  • Enhancement: Make translations of core widget classes optional instead of default. #29
  • Enhancement: Allow vertical resize of defined classes box for CSS3 compatible browsers.

Gedetailleerde info: PR op GitHub

1.5.1

  • Fix: Widget Logic widget_content filter compatibiliteit. # 27
  • Enhancement: Make uninstall script compatible with network installations.

1.5.0

  • Feature: Option to try and fix the widget parameters if they are invalid. #24
  • Feature: Option to remove duplicate classes. #25
  • Enhancement: Sort classes based on the predefined classes on the frontend by default. #19
  • Enhancement: Classes filter for frontend (for sorting or modifications). #19
    • widget_css_classes: modify all classes added by this plugin.
    • widget_css_classes_custom: aangepaste invoerklassen wijzigen.
  • Enhancement: Plugin settings filter (widget_css_classes_set_settings), overwrites user settings. #16
  • Enhancement: Plugin default settings filter (widget_css_classes_default_settings). #4
  • Enhancement: Capability filters for form fields. #21
    • widget_css_classes_id_input_capability: ID input
    • widget_css_classes_class_input_capability: klasseninvoer
    • widget_css_classes_class_select_capability: voorgedefinieerde klassen selecteren (verbergt ook klasseninvoer indien ongeldig )
  • Compatibiliteit:WP externe links .# 17, dankzij Victor @freelancephp
  • Fix: Form wrapper div style. #18, thanks to Chuck Reynolds @ryno267
  • Fix: Enable sortable input selection (IE-11 fix). #20
  • UI:Verbeter het instellen van pagina JavaScript en verwijder relCopy bibliotheek afhankelijkheid.
  • i18n: verwijder Nederlandse en de Russische taal uit plugin distributie (beschikbaar op translate.wordpress.org). #23
  • Begonnen met TravisCI en CodeClimate. # 15

Gedetailleerde info: PR op GitHub

1.4.0

  • Functie: sorteer vooraf gedefinieerde klassen (bedankt Jory Hogeveen)
  • Beveiliging: Voorkom niet-geverifieerde import van instellingen
  • Fix: Notice message when classes is empty (thanks Jory Hogeveen)

1.3.0

  • Functie: Verander de vervolgkeuzelijst naar selectievakjes voor meerdere klassenelectie
  • Functie: mogelijkheid om zowel voorgedefinieerde als tekstinvoer klassen te gebruiken
  • Functie: klassen migreren wanneer vooraf gedefinieerde klassen beschikbaar zijn
  • Verbetering: Niet eerder gedefinieerde klassen die worden verwijderd in de instellingen weer te geven pagina wanneer een widget nog niet is bijgewerkt
  • Fix: Only show stored classes if the field-type in the setting page is correct
  • Fix: When predefined is selected, show previous text input classes if they are defined
  • Oplossing: Ids index- melding
  • i18n: Toegevoegd Nederlandse vertaling doorJory Hogeveen op Keraweb
  • i18n: Russische vertaling toegevoegd door Наталия Завьялова
  • i18n: Zweedse vertaling toegevoegd door Olle Gustafsson

1.2.9

  • Changed h2 to h1 on settings page
  • Changed plus/minus icons on settings page to dashicons

1.2.8

  • Toegevoegd tekst domein plugin header ter voorbereiding van automatische vertalingen

1.2.7

  • Klasse en ID velden op volledige breedte gewijzigd
  • Toegevoegd ontbrekende ontsnappen uit instellingen pagina
  • Enqueue admin scripts on correct hook
  • Fixed undefined notice when option was not found

1.2.6

  • Fixed error notice

1.2.5

  • Fixed notice

1.2.4

1.2.3

1.2.2

  • Oplossing voor kennisgeving op regel 103 bij het gebruik van Widget Logic
  • Getest met WordPress 3.7 beta 1

1.2.1

  • Slowaaks vertaling toegevoegd door Branco WebHostingGeeks.com
  • Updated Widget Context compatibility fix plus notice fix by Joan Piedra
  • De functionaliteit van jQuery live aan voor 1.9-compatibiliteit gewijzigd

1.2

  • Vervang ID met aangepaste ID in plaats van toe te voegen aan bestaande ID
  • Toegevoegd instellingen al dan niet weer genummerd widget klassen, eerste / laatste klassen, en even / oneven klassen

1.1

  • Toegevoegde ondersteuning voor Widget Context plugin
  • Fixed notices appearing when Widget Logic plugin was enabled but filter was disabled
  • Added Hide option for the Class Field Type in Settings
  • Toon geen eerder toegevoegde ID’s aan de voorkant als Extra veld voor ID weergeven is ingesteld op Nee
  • Laat aan het begin geen eerder toegevoegde klassen zien als Klasse veldtype is ingesteld op Verbergen

1.0

  • Eerste versie