Comment ajouter une zone de widget à votre header WordPress ?

Une zone de widget, ou "widget area", est l’un des nombreux atouts proposés par WordPress. Grâce à elle, vous pourrez construire certaines zones de votre site en fonction de vos besoins. Cependant, selon votre thème, les zones de widget ne seront disponibles uniquement pour construire votre barre latérale (sidebar) et votre pied de page (footer). Vous avez besoin d’ajouter l’une de ces zones au header (ou en-tête) de votre site ? Ça tombe bien, nous allons voir ensemble comment y parvenir…  

Pourquoi une zone de widget dans le header ?

Il est vrai que la première des questions que vous pourriez vous poser serait "mais pourquoi faire ?"… En effet, selon votre site ou votre blog, vous pourriez vous contenter des zones de widget de votre sidebar et de votre footer. Cependant, dans certains autres cas, vous pourriez bénéficier de cette nouvelle zone (dans le header) pour y placer du contenu très important et/ou à fort potentiel tels que :

• une bannière publicitaire
• un encart pour souscription à une newsletter par exemple
• un contenu de promotion
• un édito ou billet d’humeur

En outre, étant donné que les internautes utilisent de plus en plus les mobiles pour naviguer sur internet, il est très important de placer le contenu promotionnel avant le contenu classique. En effet, vous avez dû vous rendre compte que, pour des raisons d’optimisation (responsive), le contenu de votre sidebar est "relégué" à la fin d’un article lorsqu’on navigue avec un smartphone, juste avant les widgets de votre footer… Mais êtes-vous certain que vos lecteurs iront jusque là ? Votre widget du header, quant à lui, restera toujours en première position !  

Étape 1 : Créer son thème enfant

Comme toutes les modifications que l’on apporte à un thème WordPress, il faudra passer par la création d’un thème enfant… Pour y parvenir, je vous conseille au préalable de lire cet article.  

Étape 2 : Créer sa nouvelle zone de widget

Pour cela, il faudra éditer le fichier functions.php de votre thème enfant à l’aide d’un éditeur de texte ou bien directement depuis votre administration à l’onglet Apparence > Éditeur pour y ajouter ces quelques lignes de code :

function header_widgets_init() {
 
 register_sidebar( array(

 'name' => 'Ma nouvelle zone de widget',
 'id' => 'new-widget-area',
 'before_widget' => '<div class="nwa-widget">',
 'after_widget' => '</div>',
 'before_title' => '<h2 class="nwa-title">',
 'after_title' => '</h2>',
 ) );
}

add_action( 'widgets_init', 'header_widgets_init' );

Quelques explications :

• ‘name’ = nom de la "widget area" qui apparaîtra dans votre administration WordPress
• ‘id’ = identifiant unique de votre "widget area"
• ‘before_widget’ = choisir une balise HTML à ouvrir avant votre widget (<div>, <li> etc…) et profitez-en pour y ajouter une classe qui pourra vous aider lors de la customisation CSS (étape 5)
• ‘after_widget’ = fermer la balise (</div>, </li> etc…)
• ‘before_title’ = choisir une balise pour le titre du widget (<h2>, <h3>, <h4> etc…) et, comme pour le ‘before_widget’, ajoutez une classe pour agir en CSS ultérieurement
• ‘after_title’ = fermer la balise du titre (</h2>, </h3>, </h4> etc…)

 

Étape 3 : Faire apparaître la nouvelle widget area

Pour l’instant, votre nouvelle zone de widget existe et est déjà disponible depuis votre administration à l’onglet Apparence > Widget. Toutefois, elle n’apparaîtra pas du côté visiteur tant que vous ne l’aurez pas ajouté dans le fichier concerné. Pour cela, il faudra dupliquer le fichier nommé header.php contenu dans votre thème parent. Vous devriez le trouver dans WP Content > Theme > Le nom de votre thème > header.php. Éditez cette copie pour y ajouter le bout de code suivant à l’endroit le plus propice :

 <!-- ajout de ma nouvelle widget area -->
 <?php if ( is_active_sidebar( 'new-widget-area' ) ) : ?>
 <div id="header-widget-area" class="nwa-header-widget widget-area" role="complementary">
 <?php dynamic_sidebar( 'new-widget-area' ); ?>
 </div>
 <?php endif; ?>
 <!-- fin nouvelle widget area -->

Pour mon exemple, j’ai ajouté ce bout de code juste en dessous de ma navigation (menu) que j’ai repéré grâce à la balise </nav> (thème TwentySixteen).  

Étape 4 : Ajouter des widgets à la "widget header area"

Un fois que vous aurez inséré le code dans le fichier functions.php ainsi que dans le fichier header.php, vous pourrez vous rendre à l’onglet Apparence > Widget afin d’ajouter le ou les widgets dont vous aurez besoin. Pour mon exemple, j’ai ajouté le widget "Texte" (pensez également que le Widget Texte peut accueillir toutes sortes de shortcodes) mais vous pouvez utiliser n’importe quel widget présent dans votre site…  

Étape 5 : Régler l’apparence de la zone de widget

Bien entendu, une fois que vous verrez apparaître votre widget dans le header de votre site vous pourrez être fier de vous :-) … Par contre, vous verrez que l’apparence laisse un peu à désirer ! Ne vous inquiétez pas, vous allez pouvoir modifier cela avec un peu de CSS que vous rajouterez dans le fichier style.css de votre thème enfant ou bien dans l’onglet Apparence > Personnaliser > CSS Additionnel de votre administration. C’est à cette étape que les "classes" ajoutées dans les balises HTML vous seront utiles… Voici, par exemple, l’ajout de CSS que j’ai effectué pour modifier l’apparence primaire de ma nouvelle zone de widget :

/* header widget area */

.nwa-header-widget{
 margin-top: 3em;
 margin-bottom: 3em;
 padding: 2em;
 text-align: center;
 background-color: #D1D1D1;
 box-shadow: 2px 2px 5px grey;
}

.nwa-title{
 margin-bottom: 1em;
 text-transform: capitalize;
}

 

Peut-on créer d’autres zones de widget ?

À partir de ces informations et de cette méthode (étapes 1 à 5), il est tout à fait possible de créer différentes zones de widget. Par exemple, vous pourriez envisager de créer une sidebar différente en fonction de vos catégories d’articles ou bien selon si c’est une page, un article ou même un Custom Post Type. Si c’est ce que vous souhaitez faire, veillez à :

• assigner des ‘id’ et des ‘name’ différents à chaque nouvelle zone créée dans votre fichier functions.php
• remplacer le <?php get_sidebar(); ?> du fichier concerné (le fichier page.php pour vos pages et le fichier single.php pour vos articles) par les lignes de code pour faire apparaître votre widget area customisée (comme dans l’étape 3)
• modifier le code CSS si besoin

 

En conclusion…

Grâce à la puissance offerte par WordPress ainsi qu’à quelques bouts de code, vous avez pu constater que customiser votre site ou votre blog n’est pas vraiment compliqué ! Pour en savoir davantage sur les widgets, n’hésitez pas à lire notre article : On vous dit tout sur les Widgets WordPress !