Ajouter la classe div à un seul widget

4

Je souhaite ajouter davantage de classes dans la balise div de mon widget de recherche. Ma recherche se trouve 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 un id et un class . Comment puis-je ajouter plus de classes à un seul widget, pas au reste?

    
posée Peronia 28.02.2017 - 15:07

2 réponses

2

Vous avez deux solutions possibles.

1. Le crochet de filtrage widget_display_callback

Ce paramètre de crochet de filtre vous permet de cibler facilement l'instance du 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 renvoyez false afin d'éviter qu'elle ne s'affiche à nouveau de manière normale par WordPress. Voir ce code dans wp-includes / class-wp- widget.php .

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

Vous pouvez étendre le widget de recherche - défini dans wp-includes / widgets / class-wp-widget-search.php et substituez la méthode widget() pour ajouter la classe souhaitée, quelque chose comme ceci (le code doit être ajouté à un endroit vu par WordPress, comme un plugin personnalisé ou dans votre thème functions.php file) :

/**
 * 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' );
} );
    
réponse donnée Nabil Kadimi 28.02.2017 - 16:55
3

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

Chaque widget fournit déjà les uniques id et class à 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. J'aime:

.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é avec la fonction dynamic_sidebar() dans les modèles. Dans ce cas, vous pouvez utiliser le crochet de filtre dynamic_sidebar_params 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*((?!).*?)\s*)?/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 implémenter un widget de recherche personnalisé comme indiqué dans cette réponse. .

Toutefois, il peut s'avérer 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 cela ne vous pose pas de problème, vous pouvez suivre ce chemin. Comme avec un widget personnalisé, vous aurez un contrôle bien meilleur sur les balises et les fonctionnalités.

    
réponse donnée Fayaz 28.02.2017 - 21:04

Lire d'autres questions sur les étiquettes