web-dev-qa-db-fra.com

Ajouter une classe div à un seul widget

Je souhaite ajouter plus de classes dans la balise div de mon widget de recherche. Ma recherche est située dans la barre latérale avec d'autres widgets.

Mon 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' );

Ainsi, chaque widget reçoit une id et une class. Comment puis-je ajouter plus de classes à un seul widget, pas au reste.

widgetssidebarregister-sidebar
4
Peronia

Vous avez deux solutions possibles.

1. Le crochet de filtre widget_display_callback

Ce crochet de filtre parameters vous permet de cibler facilement l'instance de widget et de remplacer ses arguments.

Une approche possible serait la suivante: dans le rappel du filtre, modifiez les arguments de cette instance, affichez-la, puis return falsepour éviter qu'elle ne s'affiche à nouveau de manière normale par WordPress. Voir ce code dans wp-includes/class-wp-widget.php .

2. Enregistrer un nouveau widget qui étend le widget de recherche

Vous pouvez étendre le widget de recherche --defined in wp-includes/widgets/class-wp-widget-search.php et remplacer la méthode widget() pour ajouter la classe souhaitée, comme ceci (code devrait être ajouté à un endroit vu par WordPress, comme un plugin personnalisé ou dans votre fichier de thème functions.php)} _:

/**
 * Custom widget search
 *
 * Extends the default search widget and adds a class to classes in `before_title`
 *
 * @author  Nabil Kadimi
 * @link    http://wordpress.stackexchange.com/a/258292/17187
 */
class WP_Widget_Search_Custom extends WP_Widget_Search {

    public function __construct() {
        $widget_ops = array(
            'classname' => 'widget_search widget_search_custom',
            'description' => __( 'A Custom search form for your site.' ),
            'customize_selective_refresh' => true,
        );
        WP_Widget::__construct( 'search_custom', _x( 'Custom Search', 'Custom Search widget' ), $widget_ops );
    }

    public function widget( $args, $instance ) {

        $custom_class = 'wpse-258279';
        $args['before_widget'] = str_replace('class="', "class=\"$custom_class", $args['before_widget']);

        /** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
        $title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
        echo $args['before_widget'];
        if ( $title ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }
        // Use current theme search form if it exists
        get_search_form();
        echo $args['after_widget'];
    }
}

/**
 * Register the custom search widget
 */
add_action( 'widgets_init', function() {
    register_widget( 'WP_Widget_Search_Custom' );
} );
2
Nabil Kadimi

Option-1: Utiliser la classe CSS déjà fournie:

Chaque widget fournit déjà une id et une class uniques à utiliser dans les règles CSS. Donc, pour la plupart des besoins en style, il est préférable de les utiliser pour générer une règle CSS spécifique qui ne fonctionnera que pour ce widget (par exemple, Rechercher). Par exemple, le widget Recherche par défaut aura la classe CSS widget_search. Vous pouvez l'utiliser pour styler le widget de recherche différemment des autres widgets. Comme:

.widget {
    background-color: wheat;
}
.widget.widget_search {
    background-color: gold;
}

Option 2: Utilisation du filtre dynamic_sidebar_params:

Puisque vous enregistrez les widgets avec la fonction register_sidebar(), vous l’avez probablement utilisée avec la fonction dynamic_sidebar() dans les modèles. Dans ce cas, vous pouvez utiliser le hook dynamic_sidebar_params filter pour insérer des classes CSS supplémentaires uniquement dans un widget spécifique.

Utilisez le code suivant dans le fichier functions.php de votre thème (des instructions supplémentaires figurent dans le 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;
}

Avec le CODE ci-dessus, vous pouvez ajouter une ou plusieurs classes CSS dans cette ligne: $classes = array( 'custom-css-class-for-search' );. Donc, si vous voulez ajouter deux classes CSS pour le widget de recherche, ce sera comme:

$classes = array( 'custom-css-class-for-search', 'another-class' );

Option 3: Widget personnalisé:

Si vous avez besoin de plus de contrôle que les méthodes ci-dessus ne peuvent en gérer, vous pouvez alors implémenter un widget personnalisé pour la recherche comme indiqué dans cette réponse .

Cependant, il peut être difficile de gérer les widgets personnalisés si vous souhaitez que le même comportement soit appliqué à plusieurs widgets. Dans ce cas, vous devrez également implémenter ce widget (uniquement pour une classe CSS supplémentaire)! Si ce n'est pas un problème pour vous, vous pouvez suivre ce chemin, comme avec un widget personnalisé, vous aurez un contrôle bien meilleur sur les balises et les fonctionnalités.

3
Fayaz