Comment créer un widget d'en-tête personnalisé dans WordPress

Cherchez-vous des moyens de créer un widget d'en-tête sur votre site ? Vous êtes arrivé au bon endroit. Nous allons vous montrer comment créer facilement un widget d'en-tête personnalisé dans WordPress .

Avoir un en-tête attrayant est essentiel pour faire bonne impression sur vos visiteurs. De plus, il peut être l'endroit idéal pour afficher des offres à durée limitée ou des opportunités spéciales. Si votre thème ne prend pas en charge cette zone de widget, vous pouvez en créer une manuellement. Dans ce guide, nous allons vous montrer comment créer un widget d'en-tête personnalisé dans WordPress .

Avant de voir comment procéder, comprenons mieux les avantages des widgets d'en-tête personnalisés.

Pourquoi créer un widget d'en-tête personnalisé dans WordPress ?

L'en-tête est la première chose que les visiteurs voient lorsqu'ils arrivent sur votre site Web. C'est l'une des choses auxquelles les utilisateurs accordent le plus d'attention, de sorte que la plupart des sites affichent leur contenu le plus important, comme les offres spéciales et les menus, dans les en-têtes.

Si c'est l'endroit auquel les utilisateurs prêtent attention, il est tentant d'y ajouter beaucoup de contenu. Cependant, vous devez éviter d'avoir trop de liens sur votre menu principal (en-tête). Avoir trop de contenu dans le menu d'en-tête n'est pas une pratique recommandée car cela peut dérouter les utilisateurs et donner une mauvaise image de votre site. C'est là qu'un widget d'en-tête peut être utile. Vous pouvez ajouter un widget d'en-tête personnalisé sous la barre de navigation principale et ajouter des widgets supplémentaires à cet espace sans gêner le menu principal.

La création d'un widget d'en-tête personnalisé vous permet d'afficher n'importe quoi, qu'il s'agisse d'une annonce, d'un widget de newsletter, d'une bannière, d'un contenu textuel, d'offres WooCommerce et de widgets personnalisés sans aucun problème. De cette façon, vous pouvez ajouter du contenu à votre en-tête tout en le gardant organisé.

Maintenant que nous comprenons mieux l'importance d'un widget d'en-tête personnalisé, apprenons à en créer un avec un minimum d'effort.

Comment créer un widget d'en-tête personnalisé dans WordPress

Nous avons déjà vu différentes méthodes pour personnaliser l'en-tête WordPress. Dans cette section, cependant, nous apprendrons comment modifier l'en-tête en créant un widget d'en-tête personnalisé. Pour cela, nous utiliserons des extraits PHP et CSS.

REMARQUE : Avant d'aller de l'avant, comme nous allons modifier certains fichiers de base, nous vous recommandons de générer une sauvegarde complète de votre site Web et d'installer un thème enfant. Pour créer un thème enfant, vous pouvez suivre ce tutoriel ou utiliser l'un de ces plugins dédiés.

Une fois que vous avez fait cela, passez à la section suivante.

1) Créer un widget personnalisé

Tout d'abord, vous devez créer une nouvelle zone de widget. Pour cela, sur votre tableau de bord WordPress , rendez-vous dans Apparence > Widgets .

Une fois là-bas, vous verrez toutes les zones de widgets disponibles dans votre thème actif. Cela peut changer en fonction de votre thème, mais dans la plupart des cas, vous verrez plusieurs zones ici. Pour cette démo, nous utilisons GeneratePress, et il contient de nombreuses zones de widgets déjà enregistrées et stylisées.

Vous devez créer une nouvelle zone de widgets dans laquelle nous ajouterons notre widget d'en-tête personnalisé. Pour ce faire, vous devez modifier le fichier functions.php de votre thème enfant. Pour cela, vous pouvez soit directement le fichier, soit utiliser un plugin comme Code Snippets.

Pour cette démonstration, nous utiliserons des extraits de code, nous allons donc dans Plugins > Ajouter un nouveau et recherchons le plugin Code Snippets. Ensuite, nous l'installons et l'activons comme indiqué ci-dessous.

Après l'activation, vous verrez les paramètres du plugin sur le côté gauche. Accédez à Tous les extraits et appuyez sur Ajouter nouveau pour créer un nouvel extrait.

Donnez un nom à l'extrait, puis collez l'extrait suivant dans la section Code :

 fonction quadlayers_widgets_init() {
 register_sidebar( tableau(
 'name' => 'Widget d'en-tête QuadLayers',
 'id' => 'quadlayers-header-widget',
 'before_widget' => '<div class="ql-widget">',
 'after_widget' => '</div>',
 'before_title' => '<h2 class="ql-title">',
 'after_title' => '</h2>',
 ) );
 }
 add_action( 'widgets_init', 'quadlayers_widgets_init' );

Cet extrait crée un nouveau widget dans votre site WordPress appelé Quadlayers Header Widget.

Enregistrez ensuite les modifications et après l'activation, vous verrez une toute nouvelle zone de widgets sous la section des widgets WordPress.

De cette façon, vous pouvez enregistrer un nouveau widget. Après cela, vous devez ajouter le widget à l'en-tête de votre site Web. Voyons comment faire cela.

2) Ajouter le widget à l'en-tête

Vous avez créé avec succès un nouveau widget sur votre site Web, mais vous n'avez pas spécifié l'emplacement. Dans cette section, nous allons vous montrer comment ajouter ce nouveau widget personnalisé à l'en-tête WordPress.

Pour ce faire, vous devez éditer le fichier header.php . Vous pouvez trouver ce fichier dans le répertoire du thème en allant dans Apparence > Éditeur de thème > En-tête de thème (header.php) . Avant de modifier le fichier, assurez-vous que vous utilisez un thème enfant. Si votre thème enfant n'a pas de fichier header.php , ouvrez le dossier du thème parent, téléchargez le fichier header.php à partir de là, puis téléchargez-le dans le dossier du thème enfant.

Après cela, collez le code suivant dans le fichier header.php :

 <?php

 if ( is_active_sidebar( 'quadlayers-header-widget' ) ) : ?>
 <div class="ql-widget-area widget-area" role="complémentaire">
 <?php dynamic_sidebar( 'quadlayers-header-widget' ); ?>
 </div>

 <?php endif; ?>

Une fois que vous avez collé le code, mettez à jour le fichier.

Si vous ne savez pas où ajouter le code, vous pouvez tester différents emplacements ou contacter l'équipe d'assistance de votre thème et leur demander le meilleur emplacement en fonction de vos besoins. Après avoir ajouté le code, testez la zone du widget en y ajoutant un widget. Dans cet exemple, nous avons ajouté un bloc de paragraphe avec du contenu factice.

Dans l'interface du site Web, vous verrez l'en-tête comme indiqué ci-dessous.

Cela signifie que le widget et le code fonctionnent. Super!

Voici comment vous pouvez ajouter un widget d'en-tête personnalisé dans WordPress. Vous pouvez utiliser cette zone pour afficher une bannière, des publicités, une offre à durée limitée ou tout ce que vous voulez.

Mais ce n'est pas tout. Le widget est fonctionnel mais vous pouvez encore l'améliorer. Voyons comment nous pouvons styliser le widget avec un peu de CSS pour correspondre à l'apparence de votre site.

3) Personnalisation du widget avec CSS

Après avoir ajouté le widget au fichier d'en-tête, il est temps de l'améliorer avec un peu de CSS. Vous pouvez entrer votre code CSS dans le fichier style.css du thème ou utiliser le WordPress Customizer. Les deux méthodes fonctionnent bien, mais nous vous recommandons d'ajouter le code CSS à l'aide de la section CSS supplémentaire du tableau de bord d'administration. De cette façon, vous verrez instantanément les modifications dans l'assistant de prévisualisation en direct. Pourtant,

Examinons maintenant un exemple de script afin que vous puissiez personnaliser le widget d'en-tête personnalisé que vous avez créé dans la section précédente. Copiez le code suivant, accédez à Apparence > Éditeur de thème > CSS supplémentaire et collez-le.

 div#quadlayers-header-widget {
 largeur : 100 % ;
 couleur de fond : #f5f5f5 ;
 border-bottom : 1px solide #eeeeee ;
 aligner le texte : centrer ;
 }

 .ql-widget {
 largeur : 100 % ;
 couleur de fond : #f5f5f5 ;
 aligner le texte : centrer ;
 }

 h2.ql-titre {
 marge supérieure : 0 px ;
 aligner le texte : à gauche ;
 transformation de texte : majuscule ;
 taille de police : petite ;
 couleur de fond : #feffce ;
 largeur : 130 pixels ;
 rembourrage : 5px ;
 } 

Une fois que vous avez mis à jour le CSS, il ressemblera à ceci :

Ceci est juste un exemple de code. Vous pouvez le prendre comme base et le personnaliser pour l'adapter au style et aux exigences de votre site Web.

C'est ça! C'est ainsi que vous pouvez créer un widget d'en-tête personnalisé dans WordPress avec un peu de code. Ce n'était pas si difficile, n'est-ce pas ?

Conclusion

En résumé, l'en-tête est l'une des sections les plus importantes de tout site Web et où vous devriez avoir un contenu important que vous voulez que les visiteurs voient. C'est pourquoi l'ajout d'un widget d'en-tête est une excellente option pour attirer l'attention de l'utilisateur et afficher une offre à durée limitée, les sections les plus importantes de votre site, etc.

Dans cet article, nous vous avons montré comment créer un widget d'en-tête personnalisé et le personnaliser avec un peu de code. Même si vous n'avez pas de compétences en programmation, vous pouvez suivre le tutoriel et ajouter le widget à votre site. Cependant, pour changer son style, vous aurez peut-être besoin de connaissances de base en CSS. La modification du fichier header.php peut être délicate en fonction de votre thème, donc si vous rencontrez des problèmes avec celui-ci, vous pouvez contacter l'auteur de votre thème.

Avez-vous créé un widget d'en-tête ? Comment était votre expérience? Faites-nous savoir dans la section commentaires ci-dessous.

Pour découvrir d'autres façons de personnaliser votre en-tête, consultez les guides suivants :

• 3 méthodes pour personnaliser l'en-tête dans WordPress
• Comment rendre l'en-tête Divi collant