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...

widget-header

 

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 !

Header - Version mobile

 

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

Code PHP pour nouvelle zone de widget

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 -->

Code PHP à placer dans le Header

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"

Apparition de la nouvelle zone de widget

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;
}
Apparence originale : Apparence du Header avant modification CSS
Apparence après ajout de CSS : Apparence Header après modification CSS

 

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 cet article qui recense 10 widgets utiles pour WordPress.

Comment ajouter une zone de widget à votre header WordPress ?
5 pour 2 votes

A propos de l'auteur...

Lycia Diaz

Freelance WordPress, Rédactrice Web et Webdesigner, je suis passionnée par le monde du web et de l’environnement Apple… Je tiens également un blog qui traite de ces sujets. J’adore découvrir, tester et partager mes expériences mais aussi créer et réaliser de nouveaux projets ! Je suis auteure d’un guide complet sur WordPress.

6 commentaires pertinents à ce jour ;)

  • édith dit :

    Merci pour cette astuce simple et rapide a mettre en place. D’habitude, je tape mon appel à l’action dans le code du thème directement mais, la procédure que vous indiquez est beaucoup plus propre.
    De plus il est possible de mettre plusieurs widget en place dans cette boite avec un peu de css pour avoir une belle présentation.

  • Webludi dit :

    Bonjour, excellent cet article, je ne suis pas un pro du code et pourtant je suis arrivé au même résultat!
    MERCI

  • flowhers dit :

    Adepte ! J’ai adapté le code pour le footer, ça marche parfaitement bien ! Merci beaucoup !

  • pderathe dit :

    Bonjour Lycia
    Je ne comprends toujours pas pourquoi WordPress et les editeurs de nombreux templates premium se refusent à permettre nativement les widgets dans le header, alors que c’est une zone stratégique pour publier de l’info dynamique.

    Grace à votre proposition on peut désormais le faire d’une façon élégante et fonctionnelle.

    Merci pour cet article très utile.

    Pascal

  • Constance dit :

    Bonjour merci pour ce site qui explique très bien l’utilisation de wp même pour des débutants

    Je suis une grande novice dans le domaine et la j’avoue que je n’ai pas réussi. Je pense que c’est au début que je n’y parviens pas car je ne vois même pas apparaître la fonction dans mes widget

    Est ce que je dois dupliquer l’intégralité du fichier function de mon thème parent dans le thème enfant avant d’y ajouter les lignes que vous écrivez ci dessus ?

    Merci encore

  • Lycia dit :

    Bonjour @Constance, pour que cela fonctionne, vous devez utiliser un thème enfant et qu’il soit bien actif. Ensuite, dans le functions.php vous ne devez pas recopier le code du thème parent ! Vous n’avez juste à ajouter le morceau code qui est en début de cet article (étape 2). Cela devrait vous faire apparaitre une nouvelle zone dans le back-office seulement (apparence > widget) et c’est ensuite que vous insèrerez le deuxième code (étape 3 de cet article) dans le fichier header.php que vous aurez préalablement dupliqué dans votre thème enfant. Est-ce que cela est plus clair pour vous ? Bonne journée. Lycia

Vous pouvez laisser votre commentaire ci-dessous et même vous abonner aux commentaires de l'article.
Nota: pour le champ "Site Web", seuls les liens vers vos réseaux sociaux sont autorisés.

Likez, Tweetez, Commentez, Partagez !

65 Partages
Partagez17
Tweetez42
Partagez4
Buffer2