Nederlands (België)

Download WordPress

Plugin Directory

Widget CSS Classes

Widget CSS Classes

Door Jory Hogeveen
Download

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-odd: 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

Functies

  • 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
  • Optionally adds a text field to add an id to a widget
  • Voegt eerste en laatste klassen toe aan de eerste en laatste widget instanties 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 personaliseren van uitvoer inclusief klasse namen

Plugin website

Credits

GitHub bijdragers

Schermafbeeldingen

  • Basic Widget
  • Widget met ID veld en vooraf gedefinieerde keuzes
  • Settings Page
  • 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. Configure the settings under Settings > Widget CSS Classes
  4. Visit Appearance > Widgets to add or change the custom classes and ids for a widget.
  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 getoond in mijn widget?

Je moet ervoor zorgen dat je een HTML-element hebt gedefinieerd voor before_widget en after_widget in je actieve thema’s register_sidebar functies,
meestal te vinden in de functies van je thema’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>'
) );

How do I add the CSS for my custom class?

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?

Maak een foutrapport op GitHub.

Beoordelingen

Invaluable!

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!

Superb!

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 de 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 & 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: modify custom input classes.
  • 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
  • Opgelost: van wrapper div-stijl. #18, dankzij Chuck Reynolds @ryno267
  • Fix: Enable sortable input selection (IE-11 fix). #20
  • UI: verbeteren van de instelling pagina JavaScript en verwijder relCopy bibliotheek afhankelijkheid.
  • i18n: verwijder van de Nederlandse en de Russische taal uit plugin distributie (beschikbaar op translate.wordpress.org). #23
  • Begonnen met gebruik van 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 dropdown naar selectievakjes voor meerdere klassen selectie
  • Functie: mogelijkheid om zowel voorgedefinieerde als tekstinvoer klassen te gebruiken
  • Functie: klassen migreren wanneer vooraf gedefinieerde klassen beschikbaar zijn
  • Verbetering: niet tonen eerder gedefinieerde klassen die worden verwijderd in de instellingen 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
  • Fix: Ids index notice
  • i18n: toegevoegd Nederlandse vertaling door Jory Hogeveen op Keraweb
  • i18n: toegevoegd Russische vertaling door Наталия Завьялова
  • i18n: toegevoegd Zweedse vertaling doorOlle Gustafsson

1.2.9

  • Aanpassing van h2 naar h1 op de instellingen pagina
  • Veranderd plus / minus iconen op de instellingen pagina te dashicons

1.2.8

  • Added text domain to plugin header in preparation for automatic language translations

1.2.7

  • Changed class and ID fields to full-width
  • Added missing escaping from settings page
  • 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

  • Fix for notice on line 103 when using Widget Logic
  • Getest met WordPress 3.7 beta 1

1.2.1

  • Toegevoegd Slowaaks vertaling door Branco WebHostingGeeks.com
  • Updated Widget Context compatibility fix plus notice fix by Joan Piedra
  • Changed jQuery live to on for 1.9 compatibility

1.2

  • Replace ID with custom ID rather than appending to existing ID
  • Toegevoegen van instellingen niet tonen genummerde widget klassen, eerste/laatste klassen, en even/oneven klassen

1.1

  • Toegevoegen van ondersteuning voor Widget Context plugin
  • Fixed notices appearing when Widget Logic plugin was enabled but filter was disabled
  • Toevoeging van de verberg optie voor de klasse veld type in instellingen
  • Don’t show any previously added IDs in front end if Show Additional Field for ID is set to No
  • Niet tonen van een eerder toegevoegde klasse in de front-end als het klasse veldtype ingesteld is op verbergen

1.0

  • Eerste versie

Meta

Beoordelingen

Bekijk alle
Log in om een beoordeling te versturen.

Ondersteuning

Iets te melden? Hulp nodig?

Het supportforum bekijken

Doneren

Wil je de groei van deze plugin ondersteunen?

Doneer aan deze plugin