Beschreibung
Mit Widget CSS Classes kannst du eigene CSS-Klassen und CSS-IDs an Widgets anfügen.
Bitte beachte, dass du mit diesem Plugin keinen eigenen CSS-Code einfügen kannst! Du musst die Datei „style.css“ deines Themes bearbeiten oder ein weiteres Plugin benutzen, mit dem du eigenes CSS ergänzen kannst.
Das Plugin ergänzt deine Widgets um weitere Klassen, so dass du sie leichter stylen kannst:
- widget-first: wird an das erste Widget in der Seitenleiste vergeben
- widget-last: wird an das letzte Widget in der Seitenleiste vergeben
- widget-odd: wird an die „ungeraden“ Widgets in der Seitenleiste vergeben
- widget-even: wird an die „geraden“ Widgets in de Seitenleiste vergeben
- widget-#: die Widgets werden durchnummeriert, z. B. widget-1, widget-2
Funktionen
- Ergänzt bei Widgets ein Textfeld, mit dem du eine CSS-Klasse definieren kannst
- Du kannst mehrere Klassen angeben. Trenne sie einfach durch Leerstellen.
- Fügt optional Checkboxen mit vordefinierten Klassen hinzu
- Fügt optional ein Textfeld hinzu, um einem Widget eine ID hinzuzufügen
- Fügt die Klassen „first“ und „last“ zum ersten und letzten Widget in einer Seitenleiste hinzu
- Fügt gerade/ungerade-Klassen zu Widgets hinzu
- Fügt Nummern-Klassen zu Widgets hinzu
- Vollständig übersetzbar
- Kompatibel mit WordPress Multisite
- Kompatibel mit den Plugins „Widget Logic“, „Widget Context“ und „WP Page Widget“
- Has filters and hooks for customizing output including class names
Danksagungen
- Adding Custom CSS Classes to WordPress Widgets
- Add .first & .last CSS Class Automatically To WordPress Widgets
- Widget Context compatibility fix provided by Joan Piedra
- Slovak translation by Branco WebHostingGeeks.com
- Polish translation added, Slovak translation files renamed by Tomasz Wesołowski
- Spanische Übersetzung von Maria Ramos von WebHostingHub
- Serbo-Croatian translation by Borisa Djuraskovic at WebHostingHub
- Dutch translation and predefined classes fix by Jory Hogeveen at Keraweb
- Russische Übersetzung von Наталия Завьялова
- Schwedische Übersetzung von Olle Gustafsson
- Fix ids notice by Ricardo Lüders
Screenshots
Installation
- Upload the folder /widget-css-classes/ to the /wp-content/plugins/ directory
- Activate the plugin through the Plugins menu in WordPress
- Configure the settings under Settings > Widget CSS Classes
- Visit Appearance > Widgets to add or change the custom classes and ids for a widget.
- Öffne das passende Widget in der gewünschten Seitenleiste.
- You’ll see a field labeled CSS Class. Depending on your settings, this will be a text field and/or checkboxes.
- If you are using the text field you can enter multiple class names by separating them with a space.
- If you’ve enabled the id field, you will see a text field called CSS ID.
FAQ
-
Warum tauchen die Klassen nicht in meinem Widget auf?
-
You need to make sure you have an HTML element defined for
before_widget
andafter_widget
in your active theme’sregister_sidebar
functions,
usually located in your theme’s functions.php (/wp-content/themes/yourtheme/functions.php).Dieses HTML-Element muss für die Attribute ‚class‘ und ‚id‘ Werte besitzen. Das Plugin funktioniert nicht, wenn
before_widget
undafter_widget
nicht gesetzt sind.Beispiel:
register_sidebar( array(
'name' => 'Seitenleiste',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>'
) ); -
Wie kann ich den CSS-Code für meine eigenen Klassen hinzufügen?
-
Dazu gibt es zwei Möglichkeiten:
- Bearbeite die CSS-Datei deines Themes (normalerweise zu finden in /wp-content/themes/dein-theme/).
- Benutze ein Plugin wie z. B. Simple Custom CSS.
-
Wie kann ich die Einstellungen exportieren?
-
Du kannst die Einstellungen exportieren unter Einstellungen > Widget CSS Classes > Import/Export.
-
Was soll ich tun, wen ich einen Fehler finde?
-
Bitte schreibe einen Bug-Report auf GitHub.
Rezensionen
Mitwirkende & Entwickler
„Widget CSS Classes“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:
Mitwirkende„Widget CSS Classes“ wurde in 15 Sprachen übersetzt. Danke an die Übersetzerinnen und Übersetzer für ihre Mitwirkung.
Übersetze „Widget CSS Classes“ in deine Sprache.
Interessiert an der Entwicklung?
Durchstöbere den Code, sieh dir das SVN Repository an oder abonniere das Entwicklungsprotokoll per RSS.
Änderungsprotokoll
1.5.4.1
- Getestet mit WordPress 5.5.
- Update plugin owner.
1.5.4
- Compatibility: Fix for old single widgets (remove notice). #37 (props @westonruter)
- Getestet mit WordPress 5.2
1.5.3
- Compatibility: dFactory Responsive Lightbox widget option. #33
- Getestet mit WordPress 5.0
1.5.2.1
- i18n: Remove sv_SE translation from the plugin directory. It’s 95% on translate.wordpress.org and accepted as the better version. #23
- Documentation: Readme & Wiki. #31
- Kompatibilität: Getestet mit WordPress 4.9
Detailed info: PR on 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.
Detailed info: PR on GitHub
1.5.1
- Fix: Widget Logic
widget_content
filter compatibility. #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 inputwidget_css_classes_class_input_capability
: classes inputwidget_css_classes_class_select_capability
: predefined classes select (also hides classes input if invalid)
- Compatibility: WP External Links. #17, thanks to Victor @freelancephp
- Fix: Form wrapper div style. #18, thanks to Chuck Reynolds @ryno267
- Fix: Enable sortable input selection (IE-11 fix). #20
- UI: Enhance setting page JavaScript and remove relCopy library dependency.
- i18n: Remove Dutch and Russian languages from plugin distribution (available on translate.wordpress.org). #23
- Started using TravisCI and CodeClimate. #15
Detailed info: PR on GitHub
1.4.0
- Feature: Sort Pre-defined classes (thanks Jory Hogeveen)
- Security: Prevent unauthenticated import of settings
- Fix: Notice message when classes is empty (thanks Jory Hogeveen)
1.3.0
- Feature: Change dropdown to checkboxes for multiple class selection
- Feature: Option to use both predefined and text input classes
- Feature: Migrate classes when predefined classes are available
- Improvement: Do not show previously defined classes that are removed in the settings page when a widget is not updated yet
- 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: Added Dutch translation by Jory Hogeveen at Keraweb
- i18n: Added Russian translation by Наталия Завьялова
- i18n: Added Swedish translation by Olle Gustafsson
1.2.9
- Changed h2 to h1 on settings page
- Changed plus/minus icons on settings page to 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
- Added Serbo-Croatian translation by Borisa Djuraskovic at WebHostingHub
- Added support for WP Page Widget
1.2.3
- Added Polish translation, Slovak translation files renamed by Tomasz Wesołowski
- Added Spanish translation by Maria Ramos at WebHostingHub
1.2.2
- Fix for notice on line 103 when using Widget Logic
- Tested with WordPress 3.7 beta 1
1.2.1
- Added Slovak translation by 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
- Added settings to not show numbered widget classes, first/last classes, and even/odd classes
1.1
- Added support for 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
- Don’t show any previously added IDs in front end if Show Additional Field for ID is set to No
- Don’t show any previously added classes in front end if Class Field Type is set to Hide
1.0
- Erste Version