Le guide complet des widgets WordPress : Comment les utiliser, les ajouter et les mettre en place pour personnaliser votre site

Les widgets WordPress sont incroyablement utiles. Ils vous permettent d’ajouter toutes sortes de contenus supplémentaires à votre site web à l’extérieur du corps de l’article ou de la page, encourageant les utilisateurs à obtenir des informations, à suivre des liens ou à agir.

Dans cet article, je vais vous montrer tout ce que vous devez savoir sur les widgets WordPress. Comment les ajouter à votre site, comment créer des zones de widgets dans lesquelles les mettre, comment installer des extensions qui vous en donnent plus, comment coder vos propres widgets, et bien d’autres choses encore.

Tout d’abord, commençons par identifier ce que sont les widgets WordPress.

Que sont les widgets WordPress ?

Dans WordPress, les widgets sont des contenus qui vivent en dehors du contenu de la page ou de l’article.

Les widgets contiennent des informations, une navigation ou des médias qui sont distincts d’un article ou d’une page. Dans la plupart des cas, chaque widget sera affiché sur chaque page du site, mais vous pouvez également enregistrer des zones de widgets pour des pages spécifiques telles que la page d’accueil.

Pour ajouter un widget à votre site, vous devez l’ajouter à une zone de widgets. Les zones de widgets sont créées par votre thème car elles se rapportent à la conception et à la mise en page de votre site et non à sa fonctionnalité.

La plupart des thèmes WordPress ont des zones de widgets dans la barre latérale et le pied de page, bien que certains aient de multiples zones de widgets à de nombreux endroits, comme en dessous ou au-dessus du contenu ou dans l’en-tête.

La capture d’écran ci-dessous, d’un de mes propres sites, montre des widgets dans la barre latérale et le pied de page.

WordPress est livré avec un ensemble de widgets préchargés afin que vous puissiez les utiliser sans avoir à installer des extensions ou écrire du code. Mais vous pouvez aussi ajouter beaucoup d’autres widgets en installant des extensions ou en codant les vôtres.

Ceux-ci peuvent couvrir un large éventail de types de contenu, tels que les médias, les flux de réseaux sociaux, la navigation, la recherche, des cartes et bien d’autres encore. Il y a très peu de choses que vous pourriez vouloir sur votre site pour lesquelles vous ne pouvez pas trouver de widget. En fait, le plus grand défi consiste souvent à choisir entre toutes les options et à ne pas aller trop loin.

Quand utiliser les widgets WordPress

Vous devez utiliser un widget chaque fois que vous voulez ajouter du contenu supplémentaire à une ou plusieurs pages de votre site (et quand je dis page, j’inclus les articles, les archives, etc.), mais cela ne fait pas partie du contenu de cette page. Ils sont particulièrement utiles pour le contenu que vous souhaitez afficher sur chaque page du site, comme la liste de vos derniers articles, un panier d’achat, ou un bouton d’appel à l’action.

Pensez au nombre d’utilisateurs qui devront avoir accès à chaque widget et à l’importance de l’endroit où vous le placerez. Les widgets de la barre latérale seront plus visibles que ceux du pied de page, que certains utilisateurs ne verront peut-être même pas.

Il serait donc préférable d’afficher les derniers articles ou les appels à l’action dans la barre latérale, où les gens ont plus de chances d’interagir avec eux, tandis qu’un flux de réseaux sociaux pourrait figurer dans le pied de page.

Si votre thème comporte également des zones de widgets spéciales pour la page d’accueil, vous pouvez les utiliser pour la navigation dans les services de votre site, les listes de contenus pertinents ou les médias tels qu’une vidéo accueillant les gens sur le site.

11 Exemples de widgets dans WordPress

La meilleure façon de comprendre les possibilités offertes par les widgets WordPress est d’en examiner quelques exemples. Jetons un coup d’œil sur onze types de widgets que vous verrez fréquemment sur les sites WordPress.

1. Widget des articles récents

Le widget « Articles récents » est probablement le widget le plus utilisé dans les blogs.

Il vous permet d’afficher une liste de vos articles les plus récents dans la barre latérale ou le pied de page de chaque page de votre site, ce qui augmente la possibilité que les gens naviguent sur le site et lisent un certain nombre d’articles.

Le widget Articles récents est préinstallé avec WordPress. Il vous permet de définir le nombre d’articles que vous souhaitez afficher et le titre que vous souhaitez donner au widget.

Si vous souhaitez ajouter des fonctionnalités supplémentaires, vous pouvez installer une extension pour un widget alternatif comme WordPress Popular Posts, qui affiche le contenu le plus populaire. Par ailleurs, la widget Advanced Random Posts s’actualise chaque fois que l’utilisateur change de page.

2. Widget des commentaires récents

Vous voulez montrer aux visiteurs à quel point votre site est dynamique et à quel point votre public est intéressé par votre contenu ?

Le widget « Commentaires récents » affiche les derniers commentaires sur votre site, donnant aux visiteurs la possibilité de naviguer directement vers ces commentaires et de se joindre à la discussion.

Le widget Commentaires récents est fourni avec WordPress. Là encore, si vous souhaitez ajouter des fonctionnalités supplémentaires, vous pouvez installer des extensions tierces de commentaires tels que le Widget WP Social Comments qui permet aux gens de faire des commentaires en utilisant leur compte Facebook : bon pour l’engagement dans les réseaux sociaux.

3. Widget d’appel à action

Une grande utilité d’un widget est d’encourager les gens à agir, et vous pouvez le faire avec un widget d’appel à action.

Votre widget peut être un simple bouton, ou vous pouvez créer quelque chose de plus personnalisé en utilisant un widget texte ou un widget HTML, ou même un widget image, tous étant pré-installés avec WordPress.

Sur un de mes propres sites, j’ai créé un widget d’appel à action qui encourage les gens à s’inscrire sur ma liste de diffusion. Cela utilise le widget HTML intégré dans lequel j’ai inclus une image, du texte et un bouton que j’ai codé en HTML.

4. Widgets de navigation

Vous pouvez également utiliser des widgets pour encourager les gens à naviguer sur votre site.

Pour cela, il existe quelques options : les widgets de Catégories ou Nuage d’étiquettes et le widget Menu de navigation.

Le widget Menu de navigation vous permet de créer un menu de navigation personnalisé comme menu principal de votre site, puis de l’ajouter à une zone de widgets.

Vous pouvez même ajouter votre menu de navigation principal à une zone de widgets, mais cela ne fonctionnera que si vous disposez d’un petit menu de navigation.

L’ajout d’un menu de navigation en bas de page de votre site encouragera les personnes arrivant à la fin d’un article à naviguer sur votre site. C’est particulièrement utile pour les utilisateurs de téléphones portables qui peuvent avoir à faire beaucoup défiler pour revenir au menu principal de navigation après avoir atteint la fin d’un article.

Vous pouvez également utiliser le widget intégré de catégories pour afficher une liste des catégories de votre site, ou le widget de nuage d’étiquettes pour faciliter l’accès aux archives d’étiquettes.

5. Media Widgets

L’ajout de médias à votre barre latérale ou à votre pied de page donnera vie à votre site et donnera aux utilisateurs quelque chose à regarder ou avec lequel ils pourront interagir.

Vous pouvez utiliser le widget Image intégré pour afficher n’importe quelle image dans votre barre latérale ou votre pied de page, et il vous permet également de transformer cette image en lien.

Le widget vidéo vous permet également de diffuser des vidéos de YouTube ou de Vimeo directement dans la zone de widget de votre site. Cela est particulièrement utile si votre site comporte des zones de widgets spéciales pour la page d’accueil, mais peut également être utile dans le pied de page pour attirer l’attention des gens lorsqu’ils arrivent à la fin d’un article.

6. Widgets de réseaux sociaux

Si vous souhaitez entrer en contact avec les personnes qui visitent votre site web par le biais des réseaux sociaux, l’ajout de votre flux de réseaux sociaux dans la barre latérale ou le pied de page de votre site montrera aux gens que vous êtes actif sur les réseaux sociaux et les encouragera à vous apprécier ou à vous suivre.

Une façon d’accéder aux widgets de réseaux sociaux pour les plus grandes plateformes (Facebook, Twitter, Instagram) est d’installer l’extension Jetpack, qui comprend tous ces éléments et bien d’autres encore.

Par ailleurs, toutes les plateformes de réseaux sociaux ont leurs propres extensions, disponibles gratuitement via le répertoire des extensions. Ou vous pouvez trouver des extensions tierces qui vous permettront de personnaliser la façon dont vous affichez votre flux de réseaux sociaux.

7. Widget de panier d’achat

Si vous dirigez une boutique de commerce électronique sur votre site en utilisant une extension comme WooCommerce, c’est une bonne idée d’inclure un widget de panier pour que les utilisateurs puissent facilement naviguer vers leur panier où qu’ils soient dans la boutique.

Vous pouvez le placer dans la barre latérale, où les gens pourront facilement le voir, ou dans l’en-tête pour plus de visibilité si votre thème comprend une zone de widgets à cet endroit.

Les extensions de commerce électronique comme WooCommerce comprennent des widgets de panier d’achat et d’autres widgets de commerce électronique. Ainsi, une fois que vous avez ajouté le commerce électronique à votre site, vous les trouverez ajoutés à votre écran Widgets.

8. Widget de formulaire

Si vous souhaitez que des personnes vous contactent, posent des questions ou s’inscrivent à votre liste de diffusion, vous pouvez ajouter un formulaire à votre barre latérale.

Il n’y a pas de widget de formulaire inclus avec WordPress mais vous pouvez ajouter des extensions pour les fournir, comme le Contact Form 7 ou le payant mais très puissant Gravity Forms.

9. Widget de carte

Si votre entreprise est basée dans un lieu physique et que vous souhaitez que les gens puissent vous trouver facilement, l’ajout d’un widget de carte sur votre site vous aidera.

Il existe un certain nombre d’extensions de widgets Google Map que vous pouvez utiliser, telles que l’extension WP Google Maps.

Si vous ne souhaitez pas installer d’extension, vous pouvez récupérer le code d’intégration de Google Maps et l’ajouter à un widget HTML.

10. Widget de connexion

Si vous dirigez un site de membres, un widget de connexion permettra aux personnes de se connecter à votre site sans avoir à aller sur une page de connexion séparée.

Le widget Meta qui est fourni avec WordPress comprend un lien de connexion mais il inclut aussi d’autres choses que vous ne voudrez peut-être pas, je vous recommande donc d’utiliser une extension séparée pour cela à partir du répertoire des extensions.

Le widget Login with Ajax vous donne un formulaire de connexion dans votre widget, ce qui signifie que les gens peuvent se connecter à votre site à partir de n’importe quelle page.

11. Widget de recherche

Un widget vraiment simple mais incroyablement utile est le Widget de recherche, qui est préchargé avec WordPress.

Ajoutez-le à votre barre latérale ou à votre en-tête et vous permettrez aux gens de trouver plus facilement ce qu’il y a sur votre site.

Si vous voulez augmenter la puissance de votre widget de recherche, vous pouvez installer le widget WP Google Search, qui utilise la recherche Google.

Comment ajouter des widgets à votre site WordPress

Une fois que vous avez décidé du type de widgets dont vous avez besoin pour votre site WordPress, il est temps de les installer.

Ne soyez pas tenté d’en ajouter trop. Plus ils sont nombreux, moins les utilisateurs sont susceptibles de les remarquer. Concentrez-vous plutôt sur deux ou trois widgets clés pour la barre latérale. Vous pouvez en ajouter au bas de page, où ils sont de toute façon moins importants.

Et si vous avez des zones de widgets supplémentaires dans votre thème, décidez quels sont les widgets à y mettre. Veillez à ce qu’ils s’adaptent à la mise en page et au design de votre site.

Il y a trois façons d’ajouter des widgets :

• Utiliser les widgets qui sont déjà fournis avec WordPress.
• Ajouter un widget tiers à partir du répertoire des extensions.
• Acheter une extension premium qui inclut un widget.

Trouver des widgets pour votre site WordPress

Il existe une vaste gamme de widgets disponibles, il peut donc être difficile de choisir lequel installer. Examinons les différentes options et voyons ensuite comment vous pourriez choisir celle qui vous convient le mieux.

Widgets fournis avec WordPress

Si l’un des widgets préinstallés fait ce que vous voulez, utilisez-le. Cela vous fera gagner du temps et vous permettra de réduire le code utilisé sur votre site.

Les widgets préinstallés sont :

• Archives : Lien vers les archives par mois, conçu pour les blogs mais plutôt dépassé maintenant.
• Calendrier : Un calendrier de vos articles, là encore adapté aux blogs, surtout si le vôtre est sensible au temps (mais pas si courant de nos jours).
• HTML personnalisé : Le nec plus ultra de la flexibilité, ajoutez le contenu que vous voulez en le saisissant ou en le collant dans le HTML (comme des formulaires Google). À éviter si vous n’êtes pas à l’aise avec le code.
• Image : Afficher une image de votre bibliothèque.
• Menu de navigation : Affichez le menu de navigation principal ou un menu séparé que vous créez.
• Commentaires récents : une liste des commentaires récents avec des liens vers ceux-ci.
• Nuage d’étiquettes : une liste d’étiquettes dans un format de nuage, avec des liens vers les archives pertinentes.
• Vidéo : Intégrer une vidéo de YouTube ou de tout autre service de streaming.
• Audio : Intégrer un podcast, un lecteur, une chanson ou autres clips audio (suggestion : Comment lancer un podcast en utilisant WordPress).
• Catégories : Une liste des catégories dans votre blog, avec des liens vers les pages d’archives.
• Galerie : Plus avancé que le widget image, affichez un galerie d’images.
• Méta : Métadonnées telles que les liens de connexion et Flux RSS. Un reliquat des débuts de WordPress et peu utile aujourd’hui.
• Pages : Affiche une liste des pages de votre site avec des liens.
• Articles récents : Affichez une liste de vos articles les plus récents pour encourager les gens à les lire.
• Rechercher : Une simple boîte de recherche.
• Texte : Tout texte que vous souhaitez ajouter, par exemple des informations sur le site.

Ajouter des widgets avec une extension

Le répertoire des extensions de WordPress contient des milliers d’extensions de widgets gratuites qui vous permettront de choisir parmi un plus grand nombre de widgets.

En outre, de nombreuses autres extensions comprennent également des widgets, telle qu’une extension de commerce électronique qui vous donne un widget de panier et plus encore.

Si le répertoire des extensions ne contient pas l’extension dont vous avez besoin, vous pouvez décider d’ajouter une extension premium. Parfois, celles-ci offrent plus de fonctions ou une interface plus intuitive. Mais il arrive que vous trouviez les mêmes fonctionnalités dans une extension gratuite, alors faites une bonne recherche dans le répertoire des extensions avant de payer pour des extensions.

Comment trouver le bon widget pour votre site

Pour trouver le widget WordPress qui vous convient, suivez ces conseils :

1. Identifiez exactement ce dont vous avez besoin à partir du widget. Quelle fonctionnalité doit-il avoir et comment voulez-vous qu’il soit présenté ? Doit-il être relié à des API tierces ?
2. Vérifiez les widgets intégrés pour voir s’il y en a un qui répond à vos besoins. Testez tous ceux qui sont pertinents, si vous en trouvez un qui vous convient, c’est génial. Sinon…
3. Consultez le répertoire des extensions, auquel vous pouvez accéder via Extensions > Ajouter. Essayez de rechercher plusieurs termes pour trouver l’extension qui vous convient, et faites une recherche avec et sans le mot « widget ». Parfois, une extension qui n’est pas axée sur les widgets inclura un widget dans un ensemble plus large de fonctionnalités.
4. Si vous ne trouvez rien qui vous convienne parmi les extensions gratuites, cherchez une extension premium. Demandez des recommandations à d’autres utilisateurs de WordPress et examinez les avis avant d’en choisir une.

Quel que soit le widget que vous choisissez, vous devrez le tester pour vérifier qu’il fonctionne comme vous le souhaitez. Si vous achetez des extensions premium, je vous recommande d’en acheter une avec une garantie de remboursement ou une période d’essai gratuite au cas où elle ne vous conviendrait pas.

Comment ajouter des widgets dans la barre latérale et le pied de page de WordPress

Maintenant que vous avez choisi votre widget, il est temps de l’ajouter à votre site.

Vous pouvez ajouter des widgets à n’importe quelle zone de widgets active fournie par votre thème. Si votre thème ne dispose pas d’une zone de widgets à l’endroit où vous le souhaitez, essayez de chercher un thème alternatif.

Plus loin dans cet article, je vous montrerai comment coder votre propre zone de widgets.

Il y a deux façons d’ajouter des widgets à votre site :

• En utilisant la Personnalisation. Allez dans Apparence > Personnaliser > Widgets dans le menu d’administration, ou Personnaliser > Widgets dans la barre d’administration en haut de l’écran.
• Via l’écran d’administration des Widgets. Allez dans Apparence > Widgets dans le menu d’administration, ou dans la barre d’administration, cliquez sur Personnaliser > Widgets.

Je vous montrerai bientôt comment utiliser ces deux méthodes, mais commençons par examiner les zones de widgets et pourquoi vous obtenez celles que vous faites avec votre thème.

Les widgets ne sont pas seulement pour la barre latérale

En fonction de votre thème WordPress, vous trouverez peut-être des zones de widgets à plusieurs endroits.

La plupart des thèmes ont des zones de widgets dans la barre latérale et le pied de page. Mais certains en ont aussi à d’autres endroits, comme en dessous ou au-dessus du contenu ou dans l’en-tête.

Si vous allez à l’écran des réglages des widgets dans l’administration de WordPress, vous pourrez voir toutes les zones de widgets de votre thème.

J’utilise un thème avec de multiples zones de widgets dans de nombreux endroits. Vous pouvez voir dans la capture d’écran ci-dessous qu’il y a des zones de widgets au-dessus et en dessous du contenu, dans l’en-tête, sous le pied de page principal.

Si vous souhaitez ajouter des widgets à d’autres endroits de votre site, il est judicieux de trouver un thème qui comporte plusieurs zones de widgets. La meilleure façon de procéder est d’utiliser un thème framework.

Un bon exemple de widget dans un endroit de votre thème qui n’est pas la barre latérale ou le pied de page est d’ajouter une barre de recherche dans l’en-tête comme je l’ai fait sur un de mes sites web.

Zones de widgets et thèmes

Les zones de widgets sont codées dans les fichiers de modèles de thèmes, ainsi que dans le fichier de fonctions de thèmes.

Vous pouvez voir ici le code que j’ai utilisé dans mon fichier de fonctions de thème pour ajouter une zone de widgets qui ira dans l’en-tête.

register_sidebar( array(
 'name' => __( 'In Header Widget Area', 'rmccollin' ),
 'id' => 'in-header-widget-area',
 'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
 'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
) );

Et voici le code de mon fichier header.php qui ajoute cette zone de widgets au bon endroit dans le thème.

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>

 <aside class="in-header widget-area right" role="complementary">
  <?php dynamic_sidebar( 'in-header-widget-area' ); ?>
 </aside>

<?php }

Si vous souhaitez ajouter des zones de widgets supplémentaires dans votre thème, vous devez ajouter le même type de code. Je vous montrerai comment faire plus tard dans cet article.

N’oubliez pas que si votre thème ne comporte pas autant de zones de widgets que vous le souhaitez, vous pouvez toujours faire l’une des deux choses suivantes :

• Trouver un thème qui comporte des zones de widgets là où vous le souhaitez.
• Coder la nouvelle zone de widgets dans votre thème ou dans un thème enfant de votre thème.

Une fois que vous avez des zones de widgets à tous les endroits de votre thème où vous les voulez, vous pouvez commencer à y ajouter des widgets.

Comment utiliser l’écran Widgets pour ajouter des widgets

Il existe deux façons d’ajouter des widgets à votre site WordPress. La première consiste à utiliser l’écran Widgets dans l’administration de WordPress.

Cliquez sur Apparence > Widgets. Cela fait apparaître l’écran des widgets.

Pour ajouter un widget, vous pouvez faire l’une des deux choses suivantes

• Faites-le glisser de la liste des widgets sur le côté gauche vers la zone de widgets correspondante.
• Cliquez sur le widget que vous souhaitez ajouter, et vous verrez une liste des endroits où vous pourriez l’ajouter. Sélectionnez la zone de widgets que vous souhaitez, puis cliquez sur le bouton Ajouter un widget.

Vous devrez peut-être alors modifier l’emplacement du widget dans la zone de widgets.

Vous pouvez ajouter autant de widgets que vous le souhaitez à chaque zone de widgets, mais n’exagérez pas. Vous pouvez les faire glisser dans la zone des widgets pour les mettre dans le bon ordre. Vous pouvez également les faire glisser d’une zone de widgets à une autre si vous décidez que vous n’aimez pas leur aspect.

Vous pouvez également utiliser votre clavier pour ajouter des widgets en utilisant l’écran Widgets. Ainsi, si vous n’avez pas accès à une souris, vous pouvez toujours ajouter des widgets.

Ajout et modification de widgets en mode d’accessibilité

Si vous ne savez pas utiliser une souris, vous pouvez utiliser l’écran Widgets avec un clavier.

Tout d’abord, mettez l’écran en mode accessibilité en cliquant sur (ou en tabulant vers et en sélectionnant) le lien Activer le mode accessibilité en haut à droite de l’écran.

L’écran changera alors pour refléter le fait que vous êtes en mode d’accessibilité.

Vous pouvez ensuite naviguer entre les éléments de l’écran en utilisant la touche Tab de votre clavier, et appuyer sur Entrée pour sélectionner un élément et agir dessus. Vous pouvez soit tabuler sur un widget, cliquer sur Retour sur le lien Ajouter et choisir l’endroit où vous voulez l’ajouter, soit tabuler sur la zone du widget et cliquer sur Retour sur le lien Modifier.

Comment utiliser l’outil de personnalisation de WordPress pour ajouter des widgets

L’utilisation de la personnalisation pour ajouter des widgets au lieu de l’écran des widgets signifie que vous pouvez voir vos widgets au fur et à mesure que vous les ajoutez. Il est ainsi plus facile de voir à quoi ressembleront vos widgets et de les déplacer entre les différentes zones de widgets si vous le souhaitez.

Dans le menu d’administration, cliquez sur Apparence > Personnaliser. Sinon, dans la barre d’administration en haut de l’écran du site (en supposant que vous êtes connecté), il suffit de cliquer sur Personnaliser. Cela ouvrira l’outil de personnalisation.

Cliquez maintenant sur l’option Widgets et vous verrez une liste de tous les widgets de votre thème. Cliquez sur la zone de widgets où vous souhaitez ajouter un widget et cliquez sur le bouton Ajouter un widget.

Cela vous donne une liste de tous les widgets disponibles pour votre site. Cela inclut tous les widgets intégrés à WordPress, ainsi que tout widget que vous avez ajouté via des extensions.

Choisissez le widget que vous souhaitez ajouter à cette zone de widgets et vous le verrez dans l’écran de prévisualisation sur le côté droit.

Vous pouvez réorganiser les widgets en les faisant glisser de haut en bas sur le côté gauche ou en cliquant sur le lien Réorganiser sous la liste des widgets, puis en cliquant sur les flèches pour les faire glisser de haut en bas.

Une fois que vous avez fini d’ajouter des widgets via la personnalisation, n’oubliez pas de cliquer sur le bouton Publier en haut à gauche pour que vos modifications soient enregistrées. Si vous quittez l’outil de personnalisation sans avoir fait cela, aucun de vos changements ne sera pris en compte sur le site.

Une fois que vous avez ajouté vos widgets, veuillez les consulter et vérifier comment ils s’intègrent dans le design de votre page. Si vous avez ajouté trop de zones de widgets, les choses risquent d’avoir l’air un peu compliquées. Vous devrez soit en supprimer certains, soit les déplacer d’une zone de widgets à une autre.

C’est très facile à faire dans l’écran Widgets, où vous pouvez faire glisser les widgets entre les zones de widgets.

Comment ajouter un widget à une page spécifique

Certains thèmes comprennent des zones de widgets qui ne sont destinées qu’à des pages spécifiques, comme la page d’accueil. Mais que faire si vous souhaitez ajouter un widget à une seule page de votre site ?

Vous pouvez le faire dans l’éditeur de page et d’article Gutenberg.

Ajoutez un nouveau bloc de la manière habituelle, puis sélectionnez le type de bloc Widgets.

Vous pouvez ensuite choisir parmi les nombreux widgets que vous avez activés pour votre site et l’ajouter au contenu de votre article ou de votre page. Ceci est très utile si vous souhaitez ajouter un widget de formulaire, un widget d’appel à l’action ou une liste de vos derniers articles.

Comment modifier les widgets

Une fois que vous avez ajouté des widgets à votre site, vous pouvez y apporter des modifications. Les widgets individuels auront des réglages auxquels vous pourrez accéder via l’écran des widgets ou la personnalisation (peu importe ce que vous avez utilisé pour ajouter le widget).

Certains widgets ne comportent aucun réglage, mais d’autres ont des réglages pour le titre du widget par exemple ou le nombre d’articles affichés. Certains sont plus compliqués et nécessitent que vous configuriez le widget dans une page de configuration séparée. Consultez la documentation du développeur de votre extension.

Les options dont vous disposez pour modifier les widgets des extensions sont les suivantes

• Modifier les réglages de l’extension.
• Déplacer le widget d’une zone de widgets à une autre.
• Supprimer le widget. Vous avez deux options pour cela, qui seront vues prochainement.

Pour modifier les réglages du widget, trouvez ce widget dans l’écran des widgets ou dans la personnalisation, et modifiez simplement toutes les options fournies.

Pour déplacer le widget d’une zone à l’autre, ouvrez l’écran des widgets et faites-le glisser d’une zone à l’autre. En mode accessibilité, naviguez sur la flèche à droite du widget et sélectionnez parmi les options.

Supprimer des widgets

Pour supprimer un widget dans l’écran des widgets, trouvez ce widget et cliquez sur le lien de suppression en bas à gauche de la boîte des réglages du widget.

Pour supprimer un widget dans la personnalisation, trouvez le widget dans sa zone de widgets. Cliquez sur la flèche à droite du nom du widget, puis cliquez sur le lien « Supprimer » en bas à gauche des réglages du widget.

Vous pouvez également supprimer un widget d’une zone de widgets tout en le rendant disponible pour une utilisation ultérieure via l’écran des widgets.

Faites défiler l’écran jusqu’à la zone des widgets inactifs vers le bas de l’écran. Faites glisser les widgets dans cette zone pour les supprimer de la zone des widgets mais conservez-les en tant que brouillons avec leurs réglages actuels. Vous pouvez alors toujours les faire glisser dans une zone de widgets si vous le souhaitez à l’avenir.

Si vous changez de thème et que votre nouveau thème comporte des zones de widgets différentes, tous les widgets qui ne rentrent pas dans les zones de widgets du nouveau thème seront automatiquement déplacés vers la liste des widgets inactifs par WordPress.

Comment ajouter une nouvelle zone de widgets à votre thème

Si votre thème ne comporte pas de zones de widgets là où vous le souhaitez, vous pouvez toujours ajouter les vôtres. Pour ce faire, vous ajoutez deux morceaux de code.

Ajoutons une zone de widgets sous le contenu.

Création de la zone de widgets dans votre fichier de fonctions du thème

La première étape consiste à configurer la zone de widgets à l’aide de la fonction register_widget().

Si vous utilisez un thème WordPress tiers (voici une sélection des meilleurs), vous devez créer un thème enfant pour ce faire. La raison en est que si vous mettez à jour le thème plus tard, tous vos changements seront perdus.

Si vous travaillez avec votre propre thème, vous pouvez simplement modifier le thème.

Commencez par ouvrir le fichier functions.php de votre thème. En bas du fichier, ajoutez ce code.

function kinsta_register_widgets() {
 
 register_sidebar( array(
  'name' => __( 'After Content Widget Area', 'kinsta' ),
  'id' => 'after-content-widget-area',
  'description' => __( 'Widget area after the content', 'kinsta' ),
  'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',

 ) );

}

add_action( 'widgets_init', 'kinsta_register_widgets' );

Enregistrez maintenant votre fichier functions.php. Si vous allez sur votre écran de widgets ou dans la personnalisation, vous trouverez la nouvelle zone de widgets disponible pour vous permettre d’ajouter des widgets.

Mais si vous faites cela, ils n’apparaîtront pas vraiment sur la page. En effet, vous devez ajouter du code à votre fichier de modèle de thème.

Ajouter un widget à un fichier modèle de thème

La première chose à faire est de trouver quel fichier de modèle de thème vous devez utiliser.

• Si vous ajoutez une barre latérale supplémentaire, vous devrez alors ajouter ce code dans votre fichierphp.
• Si vous ajoutez votre zone de widgets avant ou après le contenu, vous devrez l’ajouter dans n’importe quel fichier de modèle de thème qui produit le contenu.
• Si vous ajoutez une zone de widgets à votre en-tête, vous devrez ajouter le code dans votre fichier header.php.
• Si votre nouvelle zone de widgets ne concerne qu’une page de votre site ou un seul type de contenu, vous devrez utiliser la hiérarchie des modèles WordPress pour déterminer exactement quel fichier modèle vous devez utiliser/créer et ensuite le modifier. Ainsi, par exemple, si vous souhaitez ajouter des zones de widgets à votre page d’accueil, vous devrez créer un fichier front-page.php et y ajouter votre zone de widgets.

Une fois que vous avez identifié le fichier modèle que vous devez modifier et l’endroit exact où vous devez avoir le code pour la zone de widgets, ajoutez le code suivant. Dans le cas d’une zone de widgets après le contenu, nous l’ajoutons au fichier post.php et page.php de notre thème :

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>

 aside class="after-content widget-area full-width" role="complementary">
  <?php dynamic_sidebar( 'after-content-widget-area' ); ?>
 </aside>

<?php }

Enregistrez maintenant votre fichier de modèle.

Notez que votre code sera différent du mien en fonction de ce que vous avez appelé votre zone de widgets et des éléments que vous souhaitez y placer. J’utilise généralement un élément aside parce que, à mon avis, ils sont conçus pour les barres latérales et les zones de widgets.

Conseil de ninja : Si vous déplacez la fin de votre élément conteneur pour le contenu au début de la barre latérale et/ou du fichier de pied de page, vous pouvez l’ajouter à cet endroit et vous n’avez besoin de l’ajouter qu’une seule fois.

Maintenant, si vous regardez votre site, vous verrez que tous les widgets que vous avez ajoutés à vos zones de widgets apparaîtront au bon endroit. S’ils ne sont pas tout à fait au bon endroit, retournez modifier vos fichiers de modèles, en vous assurant que le code se trouve à l’endroit où vous le souhaitez. Vous devrez peut-être aussi modifier  votre CSS pour obtenir l’aspect que vous souhaitez.

Comment coder les widgets à l’aide de l’API des widgets

Vous savez donc maintenant comment sélectionner les widgets pour votre site, comment les ajouter à votre site et comment enregistrer de nouvelles barres latérales ou zones de widgets. L’étape suivante consiste à apprendre à créer un widget WordPress.

Parfois, vous pouvez constater qu’il n’y a pas d’extension disponible pour créer le widget exact que vous voulez sur votre site. Cela signifie que vous devrez le coder vous-même.

Dans cet exemple, je vais vous montrer comment coder un widget d’appel à action vraiment simple.

Aperçu de l’API des widgets

L’API des widgets dans WordPress comprend tout le code dont vous avez besoin pour enregistrer, créer et coder des widgets. L’API des widgets comprend :

• Des cours pour construire de nouveaux widgets.
• Des fonctions permettant d’enregistrer des widgets et de les afficher sur votre site.
• Des fonctions permettant de dés-enregistrer des widgets, par exemple à partir d’un thème parent.

Ici, nous allons utiliser une classe pour construire un widget. La première étape consiste à créer une extension pour le widget.

Créer une extension pour votre widget WordPress

Pour créer votre propre widget, vous devrez coder une extension. N’ajoutez pas le code d’un nouveau widget à votre thème, car les widgets sont une question de fonctionnalité et non d’affichage. Si vous changez de thème plus tard, vous voulez pouvoir continuer à accéder à ce widget.

Commencez par créer une extension vide. Créez un dossier d’extension dans votre répertoire wp-content/plugins et ajoutez-y un fichier vide. Donnez-lui un nom approprié. Ouvrez ce fichier et ajoutez ce code.

<?php
/**
 * Plugin Name: Kinsta Call to Action Widget
 * Plugin URI: https://rachelmccollin.com
 * Description: A simple call to action widget.
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: https://rachelmccollin.co.uk
 */

Vous devrez modifier l’URL de l’auteur et l’URL de l’extension. Cela créera pour vous une extension que vous pourrez activer via l’écran des extensions.

Mais si vous l’activez, il ne se passera rien. Vous allez devoir ajouter du code à votre extension.

Créer une classe pour le widget

Le code pour le widget va à l’intérieur d’une classe. Ajoutez donc cela ensuite.

class kinsta_Cta_Widget extends WP_Widget {

}

Créer la fonction de construction

La première chose à entrer dans la classe est la fonction de construction pour créer le widget. Ajoutez ceci à l’intérieur des accolades de la classe.

//widget constructor function

function __construct() {

 $widget_options = array (
  'classname' => 'kinsta_cta_widget',
  'description' => 'Add a call to action box with your own text and link.'
 );

 parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );

}

Cela commence à construire le widget.

Créer le formulaire d’affichage du widget

Ensuite, nous avons besoin d’un formulaire qui sera utilisé par l’écran des widgets et la personnalisation pour créer le widget. Ajoutez ceci, toujours à l’intérieur des accolades.

//function to output the widget form

function form( $instance ) {

 $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
 $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
 $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>

<p>
 <label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /></p>

<?php }

Cela donne aux utilisateurs un formulaire qu’ils peuvent utiliser pour ajouter du texte et un lien vers la boîte d’appel à action.

Créer la fonction pour enregistrer le widget

Vous devez maintenant enregistrer tout ce qui est saisi dans ce formulaire. Ajoutez ceci.

//function to define the data saved by the widget

function update( $new_instance, $old_instance ) {
 $instance = $old_instance;
 $instance['title'] = strip_tags( $new_instance['title'] );
 $instance['text'] = strip_tags( $new_instance['text'] );
 $instance['link'] = strip_tags( $new_instance['link'] );
 return $instance;          

}

Cela permettra d’enregistrer les données saisies par les utilisateurs dans les réglages du widget.

Créer la fonction pour afficher le widget

Vous devez maintenant ajouter le code qui affichera le widget sur le site. Encore une fois, ajoutez ceci à l’intérieur des accolades :

//function to display the widget in the site

function widget( $args, $instance ) {
 //define variables
 $title = apply_filters( 'widget_title', $instance['title'] );
 $text = $instance['text'];
 $link = $instance['link'];

 //output code
 echo $args['before_widget'];
 ?>

 <div class="cta">
  <?php if ( ! empty( $title ) ) {
   echo $before_title . $title . $after_title;
  };
  echo '<a href="' . $link . '">' . $text . '</a>';
  ?>
 </div>

 <?php
 echo $args['after_widget'];

}

Enregistrer le widget

Maintenant que votre classe est écrite, il est temps d’enregistrer le widget WordPress pour qu’il fonctionne. Ajoutez ce code en dehors de la classe.

//function to register the widget
function kinsta_register_cta_widget() {

 register_widget( 'kinsta_Cta_Widget' );
  
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );

Enregistrez maintenant votre fichier d’extension. Allez sur l’écran des widgets et vous verrez le widget à utiliser.

Il se peut que cela n’ait pas l’air si bien que ça tout de suite. Vous devez ajouter un peu de CSS pour le styliser.

Il se peut que cela n’ait pas l’air si bien que ça tout de suite. Vous devez ajouter un peu de CSS pour le styliser.

Ajouter le CSS au widget

Pour ajouter du CSS à votre extension, vous devez créer une feuille de style et la mettre en file d’attente dans votre extension. Ajoutez-la à votre fichier d’extension avant la classe.

function kinsta_widget_enqueue_styles() {

 wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
 wp_enqueue_style( 'widget_cta_css' );

}
add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );

Vous devez maintenant ajouter un fichier style.css dans le dossier de l’extension et y ajouter votre style. Je vous laisse faire !

Vous disposez maintenant d’un simple bouton d’appel à action que vous pouvez ajouter à n’importe quelle zone de widgets sur votre site. Si vous l’ajoutez à votre barre latérale, par exemple, les gens pourront l’utiliser pour accéder à votre page d’inscription depuis n’importe quel endroit du site.

Vous pouvez créer des widgets plus complexes avec des réglages et des options supplémentaires, mais cela vous donne une idée de la manière de commencer à créer votre propre widget.

Si vous voulez voir mon code pour cette extension, y compris le style, vous pouvez le trouver sur Github. Si vous débutez avec le code, voici un guide approfondi sur git vs GitHub et comment commencer avec eux.

Résumé

Les widgets sont l’une de mes fonctionnalités préférées de WordPress. Ils peuvent donner vie à votre site web et vous aider à obtenir plus d’inscriptions ou à convertir plus de visiteurs en clients. Vous pouvez ajouter des widgets WordPress à n’importe quelle zone de widgets existante dans votre thème, ou vous pouvez ajouter des zones de widgets supplémentaires afin de pouvoir ajouter plus de widgets dans plus d’endroits.

Il existe également de nombreux endroits où trouver des gadgets. WordPress est livré avec un certain nombre d’entre eux préinstallés, et vous pouvez également en installer d’autres via des extensions. Mais ce n’est pas tout, si vous vous sentez à l’aise, vous pouvez aussi coder vos propres widgets en utilisant l’API des widgets.

C’est maintenant votre tour : comment utilisez-vous les widgets WordPress sur votre site ?Combien en utilisez-vous ?