web-dev-qa-db-fra.com

Comment ajouter des classes css aux widgets en utilisant functions.php?

Je dois ajouter une classe au widget de recherche WordPress. Comment pourrais-je m'y prendre? Je l'appelle du côté administrateur, par exemple en le faisant glisser dans la barre latérale de la page des widgets de la section admin. Je ne l'appelle pas en utilisant get_search_form. Je veux le faire en utilisant le fichier functions.php, pas jQuery ou en ajoutant des propriétés css.

widgetscss
1
yaharga

Bon, j'ai donc réussi à le faire grâce à @toscho qui m'a fourni ce lien: Ajouter une classe à before_widget pour tous les widgets avec un menu déroulant et un compteur

J'ai en quelque sorte travaillé dessus.

Tout ce que je voulais faire était d'ajouter une classe "col-sm-4" de Bootstrap au widget de recherche.

is_admin() || add_filter( 'dynamic_sidebar_params', 'wpse172754_add_widget_classes' );

/**
 * Add classes for widgets.
 *
 * @param  array $params
 * @return array
 */
function wpse172754_add_widget_classes( $params ) {

if ($params[0]['widget_name'] == 'Search') {
  $params[0] = array_replace($params[0], array('before_widget' => str_replace("widget_search", "widget_search col-sm-4", $params[0]['before_widget'])));
}

  return $params;

}

Permettez-moi d'expliquer ce que ça fait.

Premièrement, pour mieux comprendre le code moi-même, j’ai fait un print_r($params) pour voir ce qu’il contient, et voici le résultat:

Array
(
    [0] => Array
    (
        [name] => Primary
        [id] => sidebar-primary
        [description] => 
        [class] => 
        [before_widget] => <section class="widget search-2 widget_search">
        [after_widget] => </section>
        [before_title] => <h3>
        [after_title] => </h3>
        [widget_id] => search-2
        [widget_name] => Search
    )

    [1] => Array
    (
        [number] => 2
    )
)

Array
(
    [0] => Array
    (
        [name] => Primary
        [id] => sidebar-primary
        [description] => 
        [class] => 
        [before_widget] => <section class="widget custom-social-media-widget-2 widget_custom-social-media-widget col-xs-offset-2 col-xs-6 col-sm-offset-4 col-sm-3 col-lg-offset-5 col-lg-2">
        [after_widget] => </section>
        [before_title] => <h3>
        [after_title] => </h3>
        [widget_id] => custom-social-media-widget-2
        [widget_name] => Custom Social Media Widget
    )

    [1] => Array
        (
            [number] => 2
)

Pour mieux comprendre la sortie, je suis également allé à la page WordPress Code Reference pour ce hook et ai vu ce que le tableau contient réellement. Ensuite, tout ce que je devais faire était d’utiliser les chiffres et les clés en ma faveur.

  • Premièrement, je savais que la plupart des valeurs seraient stockées dans le premier tableau $params[0], le second n'incluant que le numéro d'instance, je devrais donc utiliser ce tableau.
  • Juste pour m'assurer que le code ne soit pas toujours inutile, j'ai inséré une simple instruction if pour vérifier si c'est le widget que je veux.
  • Ensuite, je devais remplacer la valeur dans le tableau, alors j’ai utilisé array_replace().
  • Enfin, connaissant l’une des valeurs que je trouverais dans la valeur before_widget, j’ai utilisé un str_replace pour modifier la valeur et ajouter le nom de la classe que je souhaite.

S'il y a une meilleure façon de le faire, s'il vous plaît faites le moi savoir, ou mettez-moi à jour à l'avenir à ce sujet. J'espère que cela t'aides.

5
yaharga

Hey, vous pouvez ajouter une classe dans before_widget quelque chose comme ça

if ( function_exists('register_sidebar') )
    register_sidebar(array(
       'name' => 'Your Widget Name',
       'description' => 'Description of your widget',
       'before_widget' => '<div class="container-top">',
       'after_widget' => '</div>',
       'before_title' => '<h3 class="widget-title">',
       'after_title' => '</h3>',
    ));

je pense que cela vous aide

2
Amit Mishra

Il existe un plugin avec lequel vous pouvez ajouter plus de classes CSS et d'identifiants à un widget. Il s'appelle Widget CSS Classes . Très pratique, jetez un oeil: https://wordpress.org/plugins/widget-css-classes/

0
levelzwo