Voulez-vous ajouter un widget WordPress à la zone d’en-tête de votre site Web? Les widgets vous permettent d’ajouter facilement des blocs de contenu aux sections désignées de votre thème. Dans cet article, nous vous montrerons comment ajouter facilement un widget WordPress à l’en-tête de votre site.
Remarque: Il s’agit d’un didacticiel de niveau intermédiaire. Vous devrez ajouter du code à vos fichiers de thème WordPress et écrire du CSS.
Pourquoi et quand avez-vous besoin d’un widget d’en-tête sur votre site?
Les widgets vous permettent d’ajouter facilement des blocs de contenu à une zone désignée dans votre thème WordPress. Ces zones désignées sont appelées barres latérales ou zones prêtes pour les widgets.
Vous pouvez utiliser une zone prête pour les widgets dans l’en-tête ou avant le contenu pour afficher des annonces, des articles récents ou tout ce que vous voulez.
Cette zone particulière est appelée «Sous le pli» et tous les sites populaires l’utilisent pour montrer des choses vraiment importantes.
Les thèmes WordPress ajoutent généralement des barres latérales à côté du contenu ou dans la zone de pied de page. Peu de thèmes WordPress ajoutent des zones prêtes pour les widgets au contenu ou à l’en-tête.
C’est pourquoi dans cet article, nous expliquerons comment ajouter une zone de widget à l’en-tête de votre site Web WordPress.
Étape 1. Créez une zone de widget d’en-tête
Tout d’abord, nous devons créer une zone de widget personnalisée. Cette étape vous permettra de visualiser votre zone de widget personnalisée dans Apparence »Widgets page dans votre tableau de bord WordPress.
Vous devrez ajouter ce code au fichier functions.php de votre thème.
function wpb_widgets_init() {
register_sidebar( array(
'name' => 'Custom Header Widget Area',
'id' => 'custom-header-widget',
'before_widget' => '
',
'after_widget' => '
',
'before_title' => '',
'after_title' => '
',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );
Ce code enregistre une nouvelle barre latérale ou une zone prête pour les widgets pour votre thème.
Vous pouvez maintenant aller à Apparence »Widgets et vous verrez une nouvelle zone de widget intitulée «Zone de widget En-tête personnalisé».
Allez-y et ajoutez un widget texte à cette zone de widget nouvellement créée et enregistrez-la. Consultez notre guide sur la façon d’ajouter et d’utiliser des widgets dans WordPress pour des instructions détaillées sur la façon d’ajouter des widgets.
Étape 2: affichez votre widget d’en-tête personnalisé
Si vous visitez votre site Web maintenant, vous ne pourrez pas voir le widget de texte que vous venez d’ajouter à votre widget d’en-tête nouvellement créé.
En effet, nous n’avons pas encore indiqué à WordPress où afficher cette zone de widget.
Faisons cela dans cette étape.
Vous devrez modifier le fichier header.php dans votre thème et ajouter ce code là où vous souhaitez afficher votre zone de widget personnalisée.
N’oubliez pas de sauvegarder vos modifications.
Vous pouvez maintenant visiter leur site Web et vous verrez la zone de widget d’en-tête.
Vous remarquerez qu’il a l’air un peu poli. C’est là que vous aurez besoin de CSS pour le rendre plus beau.
Étape 3: Concevoir la zone de widget d’en-tête avec CSS
Selon votre thème, vous devrez ajouter du CSS pour contrôler la façon dont la zone de widget d’en-tête et chaque widget qu’il contient sont affichés.
La façon la plus simple de le faire est d’utiliser le plugin CSS Hero. Il vous permet d’utiliser une interface utilisateur intuitive pour changer le CSS de n’importe quel thème WordPress. Pour plus de détails, consultez notre revue CSS Hero.
Si vous ne souhaitez pas utiliser de plugin, vous pouvez ajouter du CSS personnalisé à votre thème en visitant Apparence »Personnaliser page.
Cela lancera l’interface de personnalisation du thème WordPress. Vous devrez cliquer sur l’onglet «CSS supplémentaire».
L’onglet CSS supplémentaire dans le personnalisateur de thème vous permet d’ajouter votre CSS personnalisé tout en observant les modifications qui apparaissent dans l’aperçu en direct.
Pour les besoins de ce didacticiel, nous supposons que vous n’utiliserez cette zone que pour ajouter un seul widget pour afficher des bannières publicitaires ou un widget de menu personnalisé.
Voici quelques exemples CSS pour vous aider à démarrer.
div#header-widget-area {
width: 100%;
background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
text-align: center;
}
h2.chw-title {
margin-top: 0px;
text-align: left;
text-transform: uppercase;
font-size: small;
background-color: #feffce;
width: 130px;
padding: 5px;
}
Voici à quoi ressemblait notre zone de widget d’en-tête personnalisé dans le thème Twenty Seventeen par défaut.
Vous devrez peut-être ajuster le CSS pour correspondre à votre thème. Jetez un œil à notre guide sur la façon d’ajouter des styles personnalisés aux widgets WordPress.
Nous espérons que cet article vous a aidé à apprendre à ajouter un widget WordPress à l’en-tête de votre site. Vous pouvez également consulter notre liste des 25 widgets WordPress les plus utiles pour votre site.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour regarder des vidéos de didacticiel WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
