Ich möchte dem Tag div
meines Such-Widgets weitere Klassen hinzufügen. Meine Suche befindet sich zusammen mit anderen Widgets in der Seitenleiste.
Mein Code:
function NT_widgets_init() {
register_sidebar( array(
'name' => __( 'Sidebar', 'side' ),
'id' => 'sidebar',
'description' => __( 'Rechte Spalte', 'rechts' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<span class="none">',
'after_title' => '</span>',
) );
}
add_action( 'widgets_init', 'NT_widgets_init' );
So erhält jedes Widget eine id
und eine class
. Wie kann ich mehr Klassen zu nur EINEM Widget hinzufügen, nicht zum Rest?.
Jedes Widget bietet bereits eindeutige id
und class
zur Verwendung in CSS-Regeln. Für die meisten Styling-Anforderungen ist es daher besser, diese zu verwenden, um bestimmte CSS-Regeln zu generieren, die nur für dieses Widget gelten (z. B. Suchen). Das Standardsuchwidget hat beispielsweise die CSS-Klasse widget_search
. Sie können es verwenden, um das Such-Widget anders als andere Widgets zu gestalten. Mögen:
.widget {
background-color: wheat;
}
.widget.widget_search {
background-color: gold;
}
dynamic_sidebar_params
-Filters:Da Sie die Widgets mit der Funktion register_sidebar()
registrieren, haben Sie sie höchstwahrscheinlich mit der Funktion dynamic_sidebar()
in den Vorlagen verwendet. In diesem Fall können Sie den Hook dynamic_sidebar_params
filter verwenden, um zusätzliche CSS-Klassen nur für ein bestimmtes Widget einzufügen.
Verwenden Sie den folgenden CODE in der functions.php
-Datei Ihres Themas (weitere Anweisungen finden Sie im CODE):
add_filter( 'dynamic_sidebar_params', 'wpse258279_filter_widget' );
function wpse258279_filter_widget( $params ) {
// avoiding admin panel
if( ! is_admin() ) {
if ( is_array( $params ) && is_array( $params[0] ) && $params[0]['widget_name'] === 'Search' ) {
// Insert your custom CSS class (one or more) in the following array
$classes = array( 'custom-css-class-for-search' );
// The following three lines will add $classes
// (along with the existing CSS classes) using regular expression
// don't touch it if you don't know RegEx
$pattern = '/class\s*=\s*(["\'])(?:\s*((?!\1).*?)\s*)?\1/i';
$replace = 'class=$1$2 ' . implode( ' ', $classes ) . '$1';
$params[0]['before_widget'] = preg_replace( $pattern, $replace, $params[0]['before_widget'], 1 );
}
}
return $params;
}
Mit dem obigen CODE können Sie eine oder mehrere CSS-Klassen in dieser Zeile hinzufügen: $classes = array( 'custom-css-class-for-search' );
. Wenn Sie also zwei CSS-Klassen für das Such-Widget hinzufügen möchten, sieht dies folgendermaßen aus:
$classes = array( 'custom-css-class-for-search', 'another-class' );
Wenn Sie mehr Kontrolle benötigen, als mit den oben genannten Methoden möglich ist, können Sie ein benutzerdefiniertes Widget für die Suche implementieren wie in dieser Antwort gezeigt .
Es kann jedoch schwierig sein, benutzerdefinierte Widgets zu verwalten, wenn Sie dasselbe Verhalten für mehrere Widgets wünschen. Denn dann müssen Sie dieses Widget auch implementieren (nur für zusätzliche CSS-Klasse)! Wenn dies für Sie kein Problem ist, können Sie diesem Pfad folgen, da Sie mit einem benutzerdefinierten Widget eine weitaus bessere Kontrolle über die Markups und Funktionen haben.