Les widgets sont des composants utiles de WordPress qui offrent un espace pour une fonction spécifique sur votre site. Par exemple, vous pouvez voir des sites Web avec des annonces, des calendriers et des listes de catégories dans la barre latérale droite. Mais qu’en est-il de l’utilisation des widgets d’en-tête ?

Un widget d’en-tête vous donne l’espace supplémentaire pour promouvoir quelque chose que vous voulez que chaque visiteur voie. C’est le premier segment du site qui est affiché aux gens et il est souvent réservé aux éléments importants. Malheureusement, tous les thèmes ne proposent pas un widget d’en-tête à modifier.

Dans ce tutoriel, je vais vous montrer comment mettre en place des widgets dans un en-tête WordPress. Cela nécessitera un peu de codage, mais ce sera surtout du copier-coller.

Pourquoi utiliser un widget d’en-tête ?

La plupart des sites utilisent l’élément d’en-tête pour afficher des logos ou d’autres graphiques ou textes liés à l’activité et au site. Cependant, beaucoup utilisent également l’en-tête pour héberger des publicités ou des bannières d’affiliation. Par exemple, vous pouvez facilement coller le code de Google Adsense dans la section de l’en-tête.

Les widgets d’en-tête facilitent l’ajout de ce type de composants. En fait, vous pouvez faire glisser et déposer un widget de texte dans l’en-tête et coller le code des sites affiliés et des sites de revenus publicitaires. Parce qu’un widget est si flexible, vous pouvez tout ajouter, d’un compte à rebours à la promotion de vos propres éléments commerciaux.

En relation  Comment forcer des mots de passe forts dans WordPress

Avant de vous engager à modifier l’en-tête de votre site Web, assurez-vous que vous en avez besoin. De nombreux thèmes ont une collection de widgets déjà disponibles dans la section Apparence, sous “Widgets”.

Voici un processus en trois étapes pour ajouter un nouvel élément widget d’en-tête à votre site Web WordPress.

1. Configuration de l’espace du widget d’en-tête

La première étape de l’ajout d’un widget d’en-tête consiste à créer un espace pour celui-ci sur le site. Cela se fait par le biais du fichier functions.php. Il y a plusieurs façons d’accéder à ce fichier : en utilisant des programmes FTP tels que FileZilla, en utilisant le gestionnaire de fichiers de cPanel ou directement dans l’éditeur de WordPress.

Dans ce tutoriel, nous allons utiliser le système d’édition du site web.

Allez dans la zone Apparence de WordPress et cliquez sur “Éditeur”.

Cliquez sur le fichier “Functions.php” de votre thème. Par défaut, WordPress affichera le thème actuel que vous utilisez. Cependant, vous pouvez en modifier un autre en le choisissant dans le menu déroulant “Sélectionner le thème à modifier” au-dessus de la liste des fichiers sur la droite.

Ajoutez le code suivant dans le fichier :

Une fois que vous avez ajouté le code, cliquez sur le bouton “Update File”.

Cela va inclure une nouvelle zone de widgets dans Apparence appelée “Header Widget”. Elle se comportera alors comme une zone de barre latérale, ce qui signifie que vous pourrez y ajouter des widgets comme vous pouvez le faire dans d’autres zones.

Cependant, cette nouvelle section d’en-tête ne sera visible que dans l’écran d’administration de WordPress. Vous devrez modifier le fichier header.php pour que le site puisse l’utiliser.

2. Afficher la zone du widget d’en-tête

La prochaine partie du puzzle consiste à indiquer à WordPress d’afficher la section de l’en-tête, y compris son widget. Sans le codage suivant, votre site web ignorera simplement les instructions de l’étape précédente.

En relation  La manière la plus simple de bloquer les robots spammeurs sur WordPress.

La partie suivante se trouve également dans l’éditeur de WordPress. Cliquez sur le fichier “header.php” à droite de l’écran de l’éditeur.

Cherchez dans le code la partie où vous voulez que le widget d’en-tête apparaisse. Cela peut nécessiter quelques connaissances en matière de codage. Chaque thème aura un aspect différent selon le développeur. Certains peuvent être élaborés alors que d’autres sont relativement basiques.

Dans l’image d’exemple ci-dessous, je regarde le thème “Twenty Fifteen”. Comme vous pouvez le voir, il n’y a pas grand-chose dans cette disposition d’en-tête. Pour les besoins de ce tutoriel, je vais simplement le placer après la description du site.

Placez votre curseur dans la zone où vous souhaitez placer le widget et collez le code :

Lorsque vous avez terminé, cliquez sur le bouton “Mettre à jour le fichier”.

Maintenant, WordPress utilisera votre nouveau widget d’en-tête, et vous pouvez commencer à ajouter du contenu immédiatement.

3. Personnaliser votre widget d’en-tête dans WordPress

Si vous connaissez les CSS, vous pouvez ajouter du codage pour personnaliser la zone du widget d’en-tête, soit directement dans l’éditeur, soit dans le Customizer. Je sais que beaucoup de gens préfèrent sauter cette étape car ils sont intimidés par le codage, et je ne vous en voudrais pas.

Si vous n’êtes pas sûr à 100% de ce que vous faites, il est facile de casser un site au niveau du codage.

Si vous souhaitez en savoir plus sur les CSS, W3 Schools est une excellente plate-forme gratuite en termes d’apprentissage. La plupart des éléments de codage sur ce site peuvent être utilisés dans WordPress avec facilité.

En relation  Comment tester un site WordPress avec plusieurs navigateurs

Utilisation de thèmes

Tous les thèmes ne sont pas dépourvus d’un widget d’en-tête. En fait, l’ajout de ce tutoriel à ceux qui proposent un widget d’en-tête peut donner l’impression que le site est encombré. Par exemple, le thème ColorMag possède déjà une barre latérale d’en-tête. Dans ce cas particulier, il s’agit d’une barre latérale dans l’en-tête qui peut s’étirer jusqu’à 720 pixels de large avant de devenir trop grande pour un affichage normal.

Ce tutoriel est mieux adapté aux thèmes qui ne disposent pas d’un widget d’en-tête déjà installé. Cela vous permet de prendre un thème ordinaire et basique et de le transformer en quelque chose d’unique.

Une chose importante à prendre en compte est la façon dont WordPress gère les mises à jour de thèmes. Si le thème que vous éditez est mis à jour, les modifications ci-dessus peuvent être écrasées. Dans ce cas, vous devrez ajouter le code à nouveau. C’est l’une des principales raisons pour lesquelles de nombreux développeurs préfèrent utiliser des thèmes enfants.

Ajouter plus à votre site

WordPress est l’un des systèmes de gestion de contenu les plus simples et les plus flexibles qui soient. L’ajout d’un widget d’en-tête n’est qu’un tout petit avantage à utiliser cette plateforme. Trouvez des moyens de personnaliser votre site et d’offrir une expérience unique à vos visiteurs. Cela pourrait transformer ces lecteurs occasionnels en fans de longue date.

Quel genre de choses avez-vous ajouté à WordPress pour vous l’approprier ? Avez-vous constaté que certains widgets attirent plus de visiteurs qu’avant leur installation ?