web-dev-qa-db-fra.com

Changer $ before_widget pour certains widgets

Je travaille donc sur la conception d'un thème Wordpress avec de nombreux widgets supplémentaires. Ceux que j'ai ajoutés sont dans des fichiers séparés et appelés dans le functions.php. J'ai beaucoup de CSS sur les widgets eux-mêmes et les classes div sont dans les $ before_widget et $ after_widget, etc. dans functions.php. Mon problème est que pour certains widgets, je ne veux pas le même CSS, par exemple, pas d'arrière-plan ni de bordure. Je n'arrive pas à comprendre comment s'y prendre. Si ça a du sens. Merci d'avance!

themeswidgetssidebar
1
iJamesPine

Il existe 2 façons d’autoriser des styles distincts sur chaque widget. La première consiste à ajouter des classes distinctes aux widgets comme ceci:

Première méthode

register_sidebar(array('name'=>'sidebar1',
 'before_widget' => '<ul class="black-bg"><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));

Vous pouvez ensuite utiliser la classe .back-bg pour styler le widget de la manière suivante:

#sidebar .black-bg {
background:black;
}

et sans frontière:

register_sidebar(array('name'=>'sidebar2',
 'before_widget' => '<ul class="no-border"><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));

le css serait par exemple:

#sidebar .no-border {
border:none;
}

La deuxième méthode

Vous pouvez également utiliser le fichier de thème dans lequel vous appelez la barre latérale/le widget. Pour ce faire, vous utiliseriez simplement le même widget avant et après, mais utilisez une classe ou un id pour envelopper la barre latérale dans le fichier modèle comme ceci:

register_sidebar(array('name'=>'sidebar1',
 'before_widget' => '<ul><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));
register_sidebar(array('name'=>'sidebar2',
 'before_widget' => '<ul><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));

Ensuite, quel que soit le fichier themal.php, vous pouvez le faire:

  <div class="black-bg">
    <?php if ( function_exists ( dynamic_sidebar(1) ) ) : ?>
    <?php dynamic_sidebar (1); ?>
    <?php endif; ?>
  </div>

Le style:

.black-bg {
background:black;
}

Et...

  <div class="no-border">
    <?php if ( function_exists ( dynamic_sidebar(2) ) ) : ?>
    <?php dynamic_sidebar (2); ?>
    <?php endif; ?>
  </div>


.no-border {
border:none;
}

Réponse au commentaire:

Je viens de supposer que vous vouliez dire sidebar. La plupart font référence aux barres latérales personnalisées en tant que "widgets", alors laissez-moi réessayer.

Je ne vois pas tout à fait ce que vous voulez, mais chaque widget personnalisé que vous enregistrez aura sa propre classe. Si le widget est utilisé plus d'une fois, il me semble logique d'utiliser "l'emplacement" où il sera placé pour gérer le style (ce qui serait le dynamic_sidebar dans lequel il se trouve).

Si vous parlez de comment ajouter un style séparé à un seul widget qui est placé plus d'une fois dans une barre latérale donnée, j'utiliserais simplement les pseudo sélecteurs css (impair/pair). Par exemple:

/*EVEN*/
#sidebar .black-bg:nth-child(even) {
background:transparent;
border:none;
}

/*ODD*/
#sidebar .black-bg:nth-child(odd) {
background: black;
border:1px dotted silver;
}
3
Jeremy Jared

C'est ce que $before_widget est tout. Vous feriez alors array('before_widget' => '<span class="some-class".',after_widget' => '</span>) puis style .some-class à votre guise. Vous pouvez avoir plus d'une classe ou même l'appeler par l'ID de widgets. Si ce n'est pas ce que vous demandez, clarifiez la question.

0
Brooke.