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.

en-tête quadlayers

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 WordPressaller à Apparence > Widgets.

créer un widget d'en-tête personnalisé dans WordPress - tous les 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.

créer un widget d'en-tête personnalisé dans WordPress - toutes les zones de widget

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 thème de votre enfant fonctions.php fichier. 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 à Plugins> Ajouter un nouveau et recherchez le plugin Code Snippets. Ensuite, nous l’installons et l’activons comme indiqué ci-dessous.

installer le plug-in d'extraits de code

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

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

Donnez un nom à l’extrait, puis collez l’extrait suivant dans le Code section:

function quadlayers_widgets_init() {
register_sidebar( array(
'name' => 'QuadLayers Header Widget',
'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.

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

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

widget d'en-tête quadlayers

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 modifier le header.php fichier. Vous pouvez trouver ce fichier dans le répertoire du thème en allant sur Apparence > Éditeur de thème > En-tête du 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 header.php fichier, ouvrez le dossier du thème parent, téléchargez le header.php fichier à partir de là, puis téléchargez-le dans le dossier du thème enfant.

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

<?php

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

<?php endif; ?>

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

coller le widget d'en-tête dans 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.

exemple de bloc de texte

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

exemple de widget d'en-tête

Cela signifie que le widget et le code fonctionnent. Génial!

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 thème style.css fichier ou utilisez le WordPress Customizer. Les deux méthodes fonctionnent bien, mais nous vous recommandons d’ajouter le code CSS en utilisant le CSS supplémentaire section sur le tableau de bord d’administration. De cette façon, vous verrez instantanément les modifications dans l’assistant de prévisualisation en direct. Cependant,

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, allez à Apparence > Éditeur de thème > CSS supplémentaireet collez-le.

div#quadlayers-header-widget {
width: 100%;
background-color: #f5f5f5;
border-bottom:1px solid #eeeeee;
text-align: center;
}

.ql-widget {
width: 100%;
background-color: #f5f5f5;
text-align: center;
}

h2.ql-title {
margin-top: 0px;
text-align: left;
text-transform: uppercase;
font-size: small;
background-color: #feffce;
width: 130px;
padding: 5px;
}

script css

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

widget d'en-tête css

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. Modification de la header.php peut être délicat 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.