wake-up-neo.com

Fügen Sie die div-Klasse nur einem Widget hinzu

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?.

widgetssidebarregister-sidebar
4
Peronia

Option 1: Verwenden der bereits bereitgestellten CSS-Klasse:

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;
}

Option 2: Verwenden des 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' );

Option 3: Benutzerdefiniertes Widget:

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.

3
Fayaz