Comment ajouter un widget WordPress à l'en-tête de votre site Web (2 façons)

Vous souhaitez ajouter un widget WordPress à l'en-tête de votre site Web ?

Les widgets vous permettent d'ajouter facilement des blocs de contenu à des sections spécifiques de votre thème, mais tous les thèmes n'incluent pas une zone de widgets d'en-tête.

Dans cet article, nous allons vous montrer comment ajouter facilement un widget WordPress à l'en-tête de votre site Web.

Pourquoi ajouter un widget d'en-tête à votre site WordPress ?

L'en-tête de votre site web est l'une des premières choses que vos visiteurs verront en visitant votre site WordPress. En ajoutant un widget WordPress à votre en-tête, vous pouvez optimiser cette zone pour aider à capter l'attention des lecteurs.

La plupart des en-têtes de site Web comprendront un logo personnalisé et un menu de navigation pour aider les visiteurs à se déplacer sur votre site.

Vous pouvez également ajouter un widget d'en-tête au-dessus ou au-dessous de cette zone pour présenter un contenu utile, des bannières publicitaires, des offres à durée limitée, des formulaires à ligne unique, etc.

Ici, chez WPBeginner, nous avons un appel à l'action dans l'en-tête directement sous le menu de navigation.

La plupart des thèmes WordPress disposent de zones de widgets dans la barre latérale et le pied de page du site, mais tous les thèmes n'ajoutent pas de zones de widgets dans l'en-tête.

Mais d'abord, voyons comment ajouter un widget WordPress à l'en-tête de votre site Web dans votre thème existant. Utilisez simplement les liens rapides ci-dessous pour passer directement à la méthode que vous souhaitez utiliser.

Beaucoup des meilleurs thèmes WordPress incluent une zone de widgets d'en-tête que vous pouvez personnaliser à votre guise.

Tout d'abord, vous voudrez voir si votre thème WordPress actuel supporte une zone de widgets WordPress dans l'en-tête.

Vous pouvez trouver cela en allant dans le personnalisateur de thème WordPress ou dans la zone de widgets de votre panneau d'administration WordPress. Pour ce faire, accédez à Apparence " Personnaliser et voir s'il y a une option pour modifier l'en-tête.

Dans cet exemple, le thème gratuit Astra possède une option appelée " Header Builder ". Nous allons vous montrer comment utiliser cette fonction dans Astra, mais gardez à l'esprit que l'aspect sera différent selon le thème que vous utilisez.

Si vous cliquez sur ce bouton, vous accédez à un écran permettant de modifier votre en-tête et d'ajouter des widgets.

En bas de l'écran, vous pouvez personnaliser complètement l'en-tête, ainsi que les zones situées au-dessus et au-dessous de l'en-tête. Il suffit de passer la souris sur l'une des zones vides et de cliquer sur l'icône "Plus".

Cela fait apparaître un menu contextuel dans lequel vous pouvez sélectionner 'Widget 1'.

Vous pouvez choisir parmi d'autres options, mais vous devez sélectionner l'une des options "Widget" pour que l'en-tête soit prêt à recevoir des widgets.

Pour ajouter une zone de widgets à votre en-tête, cliquez sur la case "Widget 1" qui se trouve dans la section de personnalisation de l'en-tête.

Cela fait apparaître l'option d'ajouter un widget.

Ensuite, cliquez sur l'icône d'ajout de bloc "Plus" dans le menu de gauche.

Cela fait apparaître une fenêtre contextuelle dans laquelle vous pouvez sélectionner un widget à ajouter à votre en-tête.

Vous pouvez continuer à personnaliser votre en-tête et ajouter autant de widgets que vous le souhaitez.

Une fois que vous avez terminé, assurez-vous de cliquer sur le bouton " Publier " pour enregistrer vos modifications.

Vous pouvez désormais afficher votre zone d'en-tête avec le ou les widgets que vous avez ajoutés.

Vous n'utilisez pas Astra ?

Une autre façon de voir si votre thème dispose déjà d'un widget d'en-tête WordPress est de naviguer vers Apparence " Widgets dans votre panneau d'administration WordPress.

Ensuite, voyez s'il y a une section de widgets intitulée " En-tête " ou quelque chose de similaire.

Si c'est le cas, il suffit de cliquer sur l'icône d'ajout de bloc "Plus" pour faire apparaître le menu des widgets.

Vous pouvez ensuite ajouter le widget de votre choix en cliquant dessus.

Assurez-vous de cliquer sur le bouton "Mettre à jour" pour enregistrer vos modifications dans la zone du widget d'en-tête.

Si votre thème WordPress n'a pas actuellement une zone de widgets WordPress dans l'en-tête, alors vous devrez l'ajouter manuellement en ajoutant du code à WordPress.

Si vous n'avez jamais fait cela auparavant, consultez notre guide sur la façon de copier et coller du code dans WordPress.

Ensuite, vous pouvez ajouter l'extrait de code suivant à votre fichier functions.php, dans un plugin spécifique au site, ou en utilisant un plugin d'extraits de code.

nfunction wpb_widgets_init() {nn	register_sidebar( array(n		'name'          => 'Custom Header Widget Area',n		'id'            => 'custom-header-widget',n		'before_widget' => '
',n		'after_widget'  => '
',n		'before_title'  => '
',n		'after_title'   => '
',n	) );nn}nadd_action( 'widgets_init', 'wpb_widgets_init' );n

Ce code enregistre une nouvelle barre latérale ou une zone prête à recevoir des widgets pour votre thème.

Si vous allez dans Apparence " Widgetsvous verrez alors apparaître une nouvelle zone de widgets intitulée "Zone de widgets d'en-tête personnalisée".

Maintenant, vous pouvez ajouter vos widgets à cette nouvelle zone. Pour plus de détails, consultez notre guide sur l'ajout et l'utilisation des widgets dans WordPress.

Cependant, votre widget d'en-tête ne sera pas encore affiché en direct sur votre site Web. Nous allons maintenant vous montrer comment le faire.

Affichage de votre widget d'en-tête personnalisé dans WordPress

Maintenant que vous avez créé la zone du widget d'en-tête, vous devez indiquer à WordPress où l'afficher sur votre site web.

Pour ce faire, vous devez modifier le fichier header.php de votre thème. Ensuite, vous devez ajouter le code suivant à l'endroit où vous voulez que le widget s'affiche.

nn    nnn

Ce code ajoutera la zone de widget que vous avez créée précédemment à la zone d'en-tête de votre site Web.

Maintenant, vous pouvez visiter votre blog WordPress pour voir votre zone de widgets d'en-tête en direct.

Style de votre widget d'en-tête WordPress à l'aide de CSS

En fonction de votre thème, vous devrez peut-être ajouter des feuilles de style en cascade (CSS) à WordPress pour contrôler l'affichage de la zone des widgets d'en-tête et de chaque widget qu'elle contient. Si vous ne connaissez pas les CSS, vous pouvez utiliser un plugin comme CSS Hero.

Pour en savoir plus, consultez notre guide sur la façon d'ajouter facilement un CSS personnalisé à votre site WordPress.

Ensuite, accédez à Apparence " Personnaliser dans votre panneau d'administration WordPress.

Cela fait apparaître le panneau de personnalisation du thème WordPress. Vous devez cliquer sur l'onglet 'Additional CSS'.

Cette fonction vous permet d'ajouter des feuilles de style CSS supplémentaires directement dans votre thème et de voir les modifications en temps réel.

Voici quelques exemples de code CSS pour vous aider à démarrer :

ndiv#header-widget-area {n    width: 100%;n    background-color: #f7f7f7;nborder-bottom:1px solid #eeeeee;n    text-align: center;n		padding: 20px;n}nh2.chw-title {n    margin-top: 0px;n    text-align: left;n    text-transform: uppercase;n    font-size: small;n    background-color: #feffce;n    width: 130px;n    padding: 5px;n    }n

Il suffit d'ajouter le code CSS dans le champ "Additional CSS".

Une fois que vous avez fini d'ajouter votre code CSS, assurez-vous de cliquer sur le bouton "Publier" pour enregistrer vos modifications.

Voici à quoi ressemble le widget d'en-tête personnalisé avec les modifications CSS en direct.

Nous espérons que cet article vous a aidé à apprendre comment ajouter un widget WordPress à l'en-tête de votre site Web. Vous pouvez également consulter notre guide sur la façon de choisir le meilleur hébergement WordPress et nos choix d'experts sur les meilleurs logiciels de chat en direct pour les petites entreprises.

Si vous avez aimé cet article, alors abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.