{"id":36795,"date":"2020-02-13T00:34:17","date_gmt":"2020-02-13T08:34:17","guid":{"rendered":"https:\/\/kinqsta.com\/?p=65034"},"modified":"2024-10-08T13:07:18","modified_gmt":"2024-10-08T12:07:18","slug":"widgets-wordpress","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/","title":{"rendered":"Le guide complet des widgets WordPress : Comment les utiliser, les ajouter et les mettre en place pour personnaliser votre site"},"content":{"rendered":"<p>Les widgets WordPress sont incroyablement utiles. Ils vous permettent d&rsquo;ajouter toutes sortes de contenus suppl\u00e9mentaires \u00e0 votre site web \u00e0 l\u2019ext\u00e9rieur du corps de l\u2019article ou de la page, encourageant les utilisateurs \u00e0 obtenir des informations, \u00e0 suivre des liens ou \u00e0 agir.<\/p>\n<p>Dans cet article, je vais vous montrer tout ce que vous devez savoir sur les widgets WordPress. Comment les ajouter \u00e0 votre site, comment cr\u00e9er des zones de widgets dans lesquelles les mettre, comment <a href=\"https:\/\/kinqsta.com\/fr\/blog\/comment-installer-plugins-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">installer des<\/a> extensions qui vous en donnent plus, comment coder vos propres widgets, et bien d&rsquo;autres choses encore.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<p>Tout d&rsquo;abord, commen\u00e7ons par identifier ce que sont les widgets WordPress.<\/p>\n<h2><strong>Que sont les widgets WordPress ?<\/strong><\/h2>\n<p>Dans WordPress, les widgets sont des contenus qui vivent en dehors du contenu de la page ou de l\u2019article.<\/p>\n<p>Les widgets contiennent des informations, une navigation ou des m\u00e9dias qui sont distincts d&rsquo;un article ou d&rsquo;une page. Dans la plupart des cas, chaque widget sera affich\u00e9 sur chaque page du site, mais vous pouvez \u00e9galement enregistrer des zones de widgets pour des pages sp\u00e9cifiques telles que la page d&rsquo;accueil.<\/p>\n<p>Pour ajouter un widget \u00e0 votre site, vous devez l&rsquo;ajouter \u00e0 une zone de widgets. Les zones de widgets sont cr\u00e9\u00e9es par votre th\u00e8me car elles se rapportent \u00e0 la conception et \u00e0 la mise en page de votre site et non \u00e0 sa fonctionnalit\u00e9.<\/p>\n<p>La plupart <a href=\"https:\/\/kinqsta.com\/fr\/blog\/theme-wordpress-plus-rapide\/\">des th\u00e8mes WordPress<\/a> ont des zones de widgets dans la barre lat\u00e9rale et le pied de page, bien que certains aient de multiples zones de widgets \u00e0 de nombreux endroits, comme en dessous ou au-dessus du contenu ou dans l&rsquo;en-t\u00eate.<\/p>\n<p>La capture d&rsquo;\u00e9cran ci-dessous, d&rsquo;un de mes propres sites, montre des widgets dans la barre lat\u00e9rale et le pied de page.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/zones-de-widgets-dans-mon-site.jpg\" alt=\"Zones de widgets dans mon site\" width=\"1500\" height=\"1080\"><figcaption class=\"wp-caption-text\">Zones de widgets dans mon site<\/figcaption><\/figure>\n<p>WordPress est livr\u00e9 avec un ensemble de widgets pr\u00e9charg\u00e9s afin que vous puissiez les utiliser sans avoir \u00e0 <a href=\"https:\/\/kinqsta.com\/fr\/blog\/comment-installer-plugins-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">installer des<\/a> extensions ou \u00e9crire du code. Mais vous pouvez aussi ajouter beaucoup d&rsquo;autres widgets en installant des extensions ou en codant les v\u00f4tres.<\/p>\n<p>Ceux-ci peuvent couvrir un large \u00e9ventail de types de contenu, tels que les m\u00e9dias, les flux de r\u00e9seaux sociaux, la navigation, la recherche, des cartes et bien d&rsquo;autres encore. Il y a tr\u00e8s 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\u00e9fi consiste souvent \u00e0 choisir entre toutes les options et \u00e0 ne pas aller trop loin.<\/p>\n<h2><strong>Quand utiliser les widgets WordPress<\/strong><\/h2>\n<p>Vous devez utiliser un widget chaque fois que vous voulez ajouter du contenu suppl\u00e9mentaire \u00e0 une ou plusieurs pages de votre site (et quand je dis page, j&rsquo;inclus les articles, les archives, etc.), mais cela ne fait pas partie du contenu de cette page. Ils sont particuli\u00e8rement utiles pour le contenu que vous souhaitez afficher sur chaque page du site, comme la liste de vos derniers articles, un <a href=\"https:\/\/kinqsta.com\/fr\/blog\/abandon-panier-achat\/\" target=\"_blank\" rel=\"noopener noreferrer\">panier d&rsquo;achat<\/a>, ou un bouton d&rsquo;appel \u00e0 l&rsquo;action.<\/p>\n<p>Pensez au nombre d&rsquo;utilisateurs qui devront avoir acc\u00e8s \u00e0 chaque widget et \u00e0 l&rsquo;importance de l&rsquo;endroit o\u00f9 vous le placerez. <a href=\"https:\/\/kinqsta.com\/fr\/blog\/sidebars-widgets-dynamiques-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">Les widgets de la barre lat\u00e9rale<\/a> seront plus visibles que ceux du pied de page, que certains utilisateurs ne verront peut-\u00eatre m\u00eame pas.<\/p>\n<p>Il serait donc pr\u00e9f\u00e9rable d&rsquo;afficher les derniers articles ou les appels \u00e0 l&rsquo;action dans la barre lat\u00e9rale, o\u00f9 les gens ont plus de chances d&rsquo;interagir avec eux, tandis qu&rsquo;un flux de r\u00e9seaux sociaux pourrait figurer dans le pied de page.<\/p>\n<p>Si votre th\u00e8me comporte \u00e9galement des zones de widgets sp\u00e9ciales pour la page d&rsquo;accueil, vous pouvez les utiliser pour la navigation dans les services de votre site, les listes de contenus pertinents ou les m\u00e9dias tels qu&rsquo;une vid\u00e9o accueillant les gens sur le site.<\/p>\n<h2><strong>11 Exemples de widgets dans WordPress<\/strong><\/h2>\n<p>La meilleure fa\u00e7on de comprendre les possibilit\u00e9s offertes par les widgets WordPress est d&rsquo;en examiner quelques exemples. Jetons un coup d&rsquo;\u0153il sur onze types de widgets que vous verrez fr\u00e9quemment sur les sites WordPress.<\/p>\n<h3><strong>1. Widget des articles r\u00e9cents<\/strong><\/h3>\n<p>Le widget \u00ab\u00a0Articles r\u00e9cents\u00a0\u00bb est probablement le widget le plus utilis\u00e9 dans les blogs.<\/p>\n<p>Il vous permet d&rsquo;afficher une liste de vos articles les plus r\u00e9cents dans la barre lat\u00e9rale ou le pied de page de chaque page de votre site, ce qui augmente la possibilit\u00e9 que les gens naviguent sur le site et lisent un certain nombre d\u2019articles.<\/p>\n<p>Le widget Articles r\u00e9cents est pr\u00e9install\u00e9 avec WordPress. Il vous permet de d\u00e9finir le nombre d\u2019articles que vous souhaitez afficher et le titre que vous souhaitez donner au widget.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widget-des-articles-recents.jpg\" alt=\"Widget des articles r\u00e9cents\" width=\"1500\" height=\"1301\"><figcaption class=\"wp-caption-text\">Widget des articles r\u00e9cents<\/figcaption><\/figure>\n<p>Si vous souhaitez ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires, vous pouvez installer une extension pour un widget alternatif comme <a href=\"https:\/\/wordpress.org\/plugins\/wordpress-popular-posts\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Popular Posts<\/a>, qui affiche le contenu le plus populaire. Par ailleurs, la widget <a href=\"https:\/\/wordpress.org\/plugins\/advanced-random-posts-widget\/\" target=\"_blank\" rel=\"noopener noreferrer\">Advanced Random Posts<\/a> s\u2019actualise chaque fois que l&rsquo;utilisateur change de page.<\/p>\n<h3><strong>2. Widget des commentaires r\u00e9cents<\/strong><\/h3>\n<p>Vous voulez montrer aux visiteurs \u00e0 quel point votre site est dynamique et \u00e0 quel point votre public est int\u00e9ress\u00e9 par votre contenu ?<\/p>\n<p>Le widget \u00ab\u00a0Commentaires r\u00e9cents\u00a0\u00bb affiche les derniers commentaires sur votre site, donnant aux visiteurs la possibilit\u00e9 de naviguer directement vers ces commentaires et de se joindre \u00e0 la discussion.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widget-des-commentaires-recents.jpg\" alt=\"Widget des commentaires r\u00e9cents\" width=\"1500\" height=\"1106\"><figcaption class=\"wp-caption-text\">Widget des commentaires r\u00e9cents<\/figcaption><\/figure>\n<p>Le widget Commentaires r\u00e9cents est fourni avec WordPress. L\u00e0 encore, si vous souhaitez ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires, vous pouvez installer <a href=\"https:\/\/kinqsta.com\/fr\/blog\/plugins-commentaires-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">des extensions tierces de commentaires<\/a> tels que le Widget <a href=\"https:\/\/wordpress.org\/plugins\/gs-facebook-comments\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Social Comments<\/a> qui permet aux gens de faire des commentaires en utilisant leur compte Facebook : bon pour l&rsquo;engagement dans les r\u00e9seaux sociaux.<\/p>\n<h3><strong>3. Widget d\u2019appel \u00e0 action<\/strong><\/h3>\n<p>Une grande utilit\u00e9 d&rsquo;un widget est d&rsquo;encourager les gens \u00e0 agir, et vous pouvez le faire avec un widget d&rsquo;appel \u00e0 action.<\/p>\n<p>Votre widget peut \u00eatre un simple bouton, ou vous pouvez cr\u00e9er quelque chose de plus personnalis\u00e9 en utilisant un widget texte ou un widget HTML, ou m\u00eame un widget image, tous \u00e9tant pr\u00e9-install\u00e9s avec WordPress.<\/p>\n<p>Sur un de mes propres sites, j&rsquo;ai cr\u00e9\u00e9 un widget d&rsquo;appel \u00e0 action qui encourage les gens \u00e0 s&rsquo;inscrire sur ma liste de diffusion. Cela utilise le widget HTML int\u00e9gr\u00e9 dans lequel j&rsquo;ai inclus une image, du texte et un bouton que j&rsquo;ai cod\u00e9 en HTML.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/les-widgets-d-appel-a-action-sur-mon-site.jpg\" alt=\"Les widgets d'appel \u00e0 action sur mon site\" width=\"1500\" height=\"934\"><figcaption class=\"wp-caption-text\">Les widgets d&rsquo;appel \u00e0 action sur mon site<\/figcaption><\/figure>\n<h3><strong>4. Widgets de navigation<\/strong><\/h3>\n<p>Vous pouvez \u00e9galement utiliser des widgets pour encourager les gens \u00e0 naviguer sur votre site.<\/p>\n<p>Pour cela, il existe quelques options : les widgets de Cat\u00e9gories ou Nuage d\u2019\u00e9tiquettes et le widget Menu de navigation.<\/p>\n<p>Le widget Menu de navigation vous permet de cr\u00e9er un <a href=\"https:\/\/kinqsta.com\/fr\/blog\/personnaliser-menu-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">menu de navigation personnalis\u00e9<\/a> comme menu principal de votre site, puis de l&rsquo;ajouter \u00e0 une zone de widgets.<\/p>\n<p>Vous pouvez m\u00eame ajouter votre menu de navigation principal \u00e0 une zone de widgets, mais cela ne fonctionnera que si vous disposez d&rsquo;un petit menu de navigation.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widget-du-menu-de-navigation.jpg\" alt=\"Widget du menu de navigation\" width=\"1500\" height=\"1086\"><figcaption class=\"wp-caption-text\">Widget du menu de navigation<\/figcaption><\/figure>\n<p>L&rsquo;ajout d&rsquo;un menu de navigation en bas de page de votre site encouragera les personnes arrivant \u00e0 la fin d&rsquo;un article \u00e0 naviguer sur votre site. C&rsquo;est particuli\u00e8rement utile pour les utilisateurs de t\u00e9l\u00e9phones portables qui peuvent avoir \u00e0 faire beaucoup d\u00e9filer pour revenir au <a href=\"https:\/\/kinqsta.com\/fr\/blog\/plugins-menu-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">menu principal de navigation<\/a> apr\u00e8s avoir atteint la fin d&rsquo;un article.<\/p>\n<p>Vous pouvez \u00e9galement utiliser le widget int\u00e9gr\u00e9 de cat\u00e9gories pour afficher une liste des cat\u00e9gories de votre site, ou le widget de nuage d\u2019\u00e9tiquettes pour faciliter l&rsquo;acc\u00e8s aux archives d\u2019\u00e9tiquettes.<\/p>\n<h3><strong>5. Media Widgets<\/strong><\/h3>\n<p><a href=\"https:\/\/kinqsta.com\/fr\/blog\/bibliotheque-medias-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">L&rsquo;ajout de m\u00e9dias \u00e0<\/a> votre barre lat\u00e9rale ou \u00e0 votre pied de page donnera vie \u00e0 votre site et donnera aux utilisateurs quelque chose \u00e0 regarder ou avec lequel ils pourront interagir.<\/p>\n<p>Vous pouvez utiliser le widget Image int\u00e9gr\u00e9 pour afficher n&rsquo;importe quelle image dans votre barre lat\u00e9rale ou votre pied de page, et il vous permet \u00e9galement de transformer cette image en lien.<\/p>\n<figure style=\"width: 1305px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widget-image.jpg\" alt=\"Widget image\" width=\"1305\" height=\"1500\"><figcaption class=\"wp-caption-text\">Widget image<\/figcaption><\/figure>\n<p>Le widget vid\u00e9o vous permet \u00e9galement de diffuser des vid\u00e9os de YouTube ou de Vimeo directement dans la zone de widget de votre site. Cela est particuli\u00e8rement utile si votre site comporte des zones de widgets sp\u00e9ciales pour la page d&rsquo;accueil, mais peut \u00e9galement \u00eatre utile dans le pied de page pour attirer l&rsquo;attention des gens lorsqu&rsquo;ils arrivent \u00e0 la fin d&rsquo;un article.<\/p>\n<h3><strong>6. Widgets de r\u00e9seaux sociaux<\/strong><\/h3>\n<p>Si vous souhaitez entrer en contact avec les personnes qui visitent votre site web par le biais des r\u00e9seaux sociaux, l&rsquo;ajout de votre flux de r\u00e9seaux sociaux dans la barre lat\u00e9rale ou le pied de page de votre site montrera aux gens que vous \u00eates actif sur les r\u00e9seaux sociaux et les encouragera \u00e0 vous appr\u00e9cier ou \u00e0 vous suivre.<\/p>\n<p>Une fa\u00e7on d&rsquo;acc\u00e9der aux widgets de r\u00e9seaux sociaux pour les plus grandes plateformes (Facebook, Twitter, Instagram) est <a href=\"https:\/\/kinqsta.com\/fr\/blog\/wordpress-jetpack\/\">d&rsquo;installer l\u2019extension Jetpack<\/a>, qui comprend tous ces \u00e9l\u00e9ments et bien d&rsquo;autres encore.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/extension-jetpack.jpg\" alt=\"Extension Jetpack\" width=\"1500\" height=\"1105\"><figcaption class=\"wp-caption-text\">Extension Jetpack<\/figcaption><\/figure>\n<p>Par ailleurs, toutes les plateformes de r\u00e9seaux sociaux ont leurs propres extensions, disponibles gratuitement via le r\u00e9pertoire des extensions. Ou vous pouvez trouver <a href=\"https:\/\/kinqsta.com\/fr\/blog\/medias-sociaux-wordpress\/\">des extensions tierces<\/a> qui vous permettront de personnaliser la fa\u00e7on dont vous affichez votre flux de r\u00e9seaux sociaux.<\/p>\n<h3><strong>7. Widget de panier d&rsquo;achat<\/strong><\/h3>\n<p>Si vous dirigez une boutique de <a href=\"https:\/\/kinqsta.com\/fr\/blog\/strategies-ecommerce\/\" target=\"_blank\" rel=\"noopener noreferrer\">commerce \u00e9lectronique<\/a> sur votre site en utilisant une extension comme <a href=\"https:\/\/kinqsta.com\/fr\/blog\/tutoriel-woocommerce\/\" target=\"_blank\" rel=\"noopener noreferrer\">WooCommerce<\/a>, c&rsquo;est une bonne id\u00e9e d&rsquo;inclure un widget de panier pour que les utilisateurs puissent facilement naviguer vers leur panier o\u00f9 qu&rsquo;ils soient dans la boutique.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widget-de-panier-d-achat.jpg\" alt=\"Widget de panier d'achat\" width=\"1500\" height=\"909\"><figcaption class=\"wp-caption-text\">Widget de panier d&rsquo;achat<\/figcaption><\/figure>\n<p>Vous pouvez le placer dans la barre lat\u00e9rale, o\u00f9 les gens pourront facilement le voir, ou dans l&rsquo;en-t\u00eate pour plus de visibilit\u00e9 si votre th\u00e8me comprend une zone de widgets \u00e0 cet endroit.<\/p>\n<p><a href=\"https:\/\/kinqsta.com\/fr\/blog\/plugins-ecommerce-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">Les extensions de commerce \u00e9lectronique<\/a> comme WooCommerce comprennent des widgets de panier d&rsquo;achat et d&rsquo;autres widgets de commerce \u00e9lectronique. Ainsi, une fois que vous avez ajout\u00e9 le commerce \u00e9lectronique \u00e0 votre site, vous les trouverez ajout\u00e9s \u00e0 votre \u00e9cran<strong> Widgets.<\/strong><\/p>\n<h3><strong>8. Widget de formulaire<\/strong><\/h3>\n<p>Si vous souhaitez que des personnes vous contactent, posent des questions ou <a href=\"https:\/\/kinqsta.com\/fr\/blog\/comment-construire-liste-emails\/\" target=\"_blank\" rel=\"noopener noreferrer\">s\u2019inscrivent \u00e0 votre liste de diffusion<\/a>, vous pouvez ajouter un formulaire \u00e0 votre barre lat\u00e9rale.<\/p>\n<p>Il n&rsquo;y a pas de widget de formulaire inclus avec WordPress mais vous pouvez ajouter des extensions pour les fournir, comme le <a href=\"https:\/\/kinqsta.com\/fr\/blog\/contact-form-7\/\" target=\"_blank\" rel=\"noopener noreferrer\">Contact Form 7<\/a> ou le payant mais tr\u00e8s puissant <a href=\"https:\/\/kinqsta.com\/fr\/blog\/plugins-formulaire-de-contact-wordpress\/#gravity-forms\" target=\"_blank\" rel=\"noopener noreferrer\">Gravity Forms<\/a>.<\/p>\n<h3><strong>9. Widget de carte<\/strong><\/h3>\n<p>Si votre entreprise est bas\u00e9e dans un lieu physique et que vous souhaitez que les gens puissent vous trouver facilement, l&rsquo;ajout d&rsquo;un widget de carte sur votre site vous aidera.<\/p>\n<p>Il existe un certain nombre d\u2019<a href=\"https:\/\/kinqsta.com\/fr\/blog\/google-maps-wordpress\/#use-a-wordpress-google-maps-plugin-instead\" target=\"_blank\" rel=\"noopener noreferrer\">extensions de widgets Google Map<\/a> que vous pouvez utiliser, telles que l\u2019extension <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/wp-google-maps\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Google Maps.<\/a><\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/extension-wp-google-maps.jpg\" alt=\"Extension WP Google Maps\" width=\"1500\" height=\"1073\"><figcaption class=\"wp-caption-text\">Extension WP Google Maps<\/figcaption><\/figure>\n<p>Si vous ne souhaitez pas installer d\u2019extension, vous pouvez <a href=\"https:\/\/kinqsta.com\/fr\/blog\/google-maps-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">r\u00e9cup\u00e9rer le code d&rsquo;int\u00e9gration de Google Maps<\/a> et l\u2019ajouter \u00e0 un widget HTML.<\/p>\n<h3><strong>10. Widget de connexion<\/strong><\/h3>\n<p>Si vous dirigez un <a href=\"https:\/\/kinqsta.com\/fr\/blog\/plugins-wordpress-adhesion\/\" target=\"_blank\" rel=\"noopener noreferrer\">site de membres<\/a>, un widget de connexion permettra aux personnes <a href=\"https:\/\/kinqsta.com\/fr\/blog\/url-connexion-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">de se connecter \u00e0 votre site<\/a> sans avoir \u00e0 aller sur une page de connexion s\u00e9par\u00e9e.<\/p>\n<p>Le widget Meta qui est fourni avec WordPress comprend un lien de connexion mais il inclut aussi d&rsquo;autres choses que vous ne voudrez peut-\u00eatre pas, je vous recommande donc d&rsquo;utiliser une extension s\u00e9par\u00e9e pour cela \u00e0 partir du r\u00e9pertoire des extensions.<\/p>\n<p>Le widget <a href=\"https:\/\/wordpress.org\/plugins\/login-with-ajax\/\" target=\"_blank\" rel=\"noopener noreferrer\">Login with Ajax<\/a> vous donne un formulaire de connexion dans votre widget, ce qui signifie que les gens peuvent se connecter \u00e0 votre site \u00e0 partir de n&rsquo;importe quelle page.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widget-de-l-extension-login-with-ajax.jpg\" alt=\"Widget de l\u2019extension Login with Ajax\" width=\"1500\" height=\"883\"><figcaption class=\"wp-caption-text\">Widget de l\u2019extension Login with Ajax<\/figcaption><\/figure>\n<h3><strong>11. Widget de recherche<\/strong><\/h3>\n<p>Un widget vraiment simple mais incroyablement utile est le <a href=\"https:\/\/kinqsta.com\/fr\/blog\/recherche-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">Widget de recherche<\/a>, qui est pr\u00e9charg\u00e9 avec WordPress.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widget-de-recherche.jpg\" alt=\"Widget de recherche\" width=\"1500\" height=\"368\"><figcaption class=\"wp-caption-text\">Widget de recherche<\/figcaption><\/figure>\n<p>Ajoutez-le \u00e0 votre barre lat\u00e9rale ou \u00e0 votre en-t\u00eate et vous permettrez aux gens de trouver plus facilement ce qu&rsquo;il y a sur votre site.<\/p>\n<p>Si vous voulez augmenter la puissance de votre widget de recherche, vous pouvez installer le widget <a href=\"https:\/\/wordpress.org\/plugins\/wp-google-search\/\" target=\"_blank\" rel=\"noopener noreferrer\">WP Google Search<\/a>, qui utilise la recherche Google.<\/p>\n<h2><strong>Comment ajouter des widgets \u00e0 votre site WordPress<\/strong><\/h2>\n<p>Une fois que vous avez d\u00e9cid\u00e9 du type de widgets dont vous avez besoin pour votre site WordPress, il est temps de les installer.<\/p>\n<p>Ne soyez pas tent\u00e9 d&rsquo;en ajouter trop. Plus ils sont nombreux, moins les utilisateurs sont susceptibles de les remarquer. Concentrez-vous plut\u00f4t sur deux ou trois widgets cl\u00e9s pour la barre lat\u00e9rale. Vous pouvez en ajouter au bas de page, o\u00f9 ils sont de toute fa\u00e7on moins importants.<\/p>\n<p>Et si vous avez des zones de widgets suppl\u00e9mentaires dans <a href=\"https:\/\/kinqsta.com\/fr\/blog\/installer-theme-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">votre th\u00e8me<\/a>, d\u00e9cidez quels sont les widgets \u00e0 y mettre. Veillez \u00e0 ce qu&rsquo;ils s&rsquo;adaptent \u00e0 la mise en page et au <a href=\"https:\/\/kinqsta.com\/fr\/blog\/tendances-web-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">design de votre site<\/a>.<\/p>\n<p>Il y a trois fa\u00e7ons d&rsquo;ajouter des widgets :<\/p>\n<ul>\n<li>Utiliser les widgets qui sont d\u00e9j\u00e0 fournis avec WordPress.<\/li>\n<li>Ajouter un widget tiers \u00e0 partir du <a href=\"https:\/\/kinqsta.com\/fr\/blog\/publier-plugin-annuaire-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">r\u00e9pertoire des<\/a> extensions.<\/li>\n<li>Acheter une extension premium qui inclut un widget.<\/li>\n<\/ul>\n<h3><strong>Trouver des widgets pour votre site WordPress<\/strong><\/h3>\n<p>Il existe une vaste gamme de widgets disponibles, il peut donc \u00eatre difficile de choisir lequel installer. Examinons les diff\u00e9rentes options et voyons ensuite comment vous pourriez choisir celle qui vous convient le mieux.<\/p>\n<h4><strong>Widgets fournis avec WordPress<\/strong><\/h4>\n<p>Si l&rsquo;un des widgets pr\u00e9install\u00e9s fait ce que vous voulez, utilisez-le. Cela vous fera gagner du temps et vous permettra de r\u00e9duire le code utilis\u00e9 sur votre site.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widgets-wordpress-preinstalles.jpg\" alt=\"Widgets WordPress pr\u00e9install\u00e9s\" width=\"1500\" height=\"1158\"><figcaption class=\"wp-caption-text\">Widgets WordPress pr\u00e9install\u00e9s<\/figcaption><\/figure>\n<p>Les widgets pr\u00e9install\u00e9s sont :<\/p>\n<ul>\n<li><strong>Archives<\/strong> : Lien vers les archives par mois, con\u00e7u pour les blogs mais plut\u00f4t d\u00e9pass\u00e9 maintenant.<\/li>\n<li><strong>Calendrier<\/strong> : Un calendrier de vos articles, l\u00e0 encore adapt\u00e9 aux blogs, surtout si le v\u00f4tre est sensible au temps (mais pas si courant de nos jours).<\/li>\n<li><strong>HTML personnalis\u00e9<\/strong> : Le nec plus ultra de la flexibilit\u00e9, ajoutez le contenu que vous voulez en le saisissant ou en le collant dans le HTML (comme des <a href=\"https:\/\/kinqsta.com\/fr\/blog\/integrer-formulaire-google\/\" target=\"_blank\" rel=\"noopener noreferrer\">formulaires Google<\/a>). \u00c0 \u00e9viter si vous n&rsquo;\u00eates pas \u00e0 l&rsquo;aise avec le code.<\/li>\n<li><strong>Image<\/strong> : <a href=\"https:\/\/kinqsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\" target=\"_blank\" rel=\"noopener noreferrer\">Afficher une image<\/a> de votre biblioth\u00e8que.<\/li>\n<li><strong>Menu de navigation<\/strong> : Affichez le menu de navigation principal ou un menu s\u00e9par\u00e9 que vous cr\u00e9ez.<\/li>\n<li><strong>Commentaires r\u00e9cents<\/strong> : une liste des commentaires r\u00e9cents avec des liens vers ceux-ci.<\/li>\n<li><strong>Nuage d\u2019\u00e9tiquettes<\/strong> : une liste d\u2019\u00e9tiquettes dans un format de nuage, avec des liens vers les archives pertinentes.<\/li>\n<li><strong>Vid\u00e9o<\/strong> : <a href=\"https:\/\/kinqsta.com\/fr\/blog\/embarquer-videos-youtube-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">Int\u00e9grer une vid\u00e9o de YouTube<\/a> ou de tout autre service de streaming.<\/li>\n<li><strong>Audio<\/strong> : Int\u00e9grer un podcast, un <a href=\"https:\/\/kinqsta.com\/fr\/blog\/lecteurs-audio-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">lecteur<\/a>, une chanson ou autres clips audio (suggestion : <a href=\"https:\/\/kinqsta.com\/fr\/blog\/podcast-wordpress\/\">Comment lancer un podcast en utilisant WordPress<\/a>).<\/li>\n<li><strong>Cat\u00e9gories<\/strong> : Une liste des <a href=\"https:\/\/kinqsta.com\/fr\/blog\/lecteurs-audio-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">cat\u00e9gories dans votre blog<\/a>, avec des liens vers les pages d&rsquo;archives.<\/li>\n<li><strong>Galerie<\/strong> : Plus avanc\u00e9 que le widget image, affichez un <a href=\"https:\/\/kinqsta.com\/fr\/blog\/extensions-wordpress-galerie-photo\/\" target=\"_blank\" rel=\"noopener noreferrer\">galerie d&rsquo;images<\/a>.<\/li>\n<li><strong>M\u00e9ta<\/strong> : M\u00e9tadonn\u00e9es telles que <a href=\"https:\/\/kinqsta.com\/fr\/blog\/url-connexion-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">les liens de connexion<\/a> et <a href=\"https:\/\/kinqsta.com\/fr\/blog\/plugins-flux-rss\/\" target=\"_blank\" rel=\"noopener noreferrer\">Flux RSS<\/a>. Un reliquat des d\u00e9buts de WordPress et peu utile aujourd&rsquo;hui.<\/li>\n<li><strong>Pages<\/strong> : Affiche une liste des pages de votre site avec des liens.<\/li>\n<li><strong>Articles r\u00e9cents<\/strong> : Affichez une liste de vos articles les plus r\u00e9cents pour encourager les gens \u00e0 les lire.<\/li>\n<li><strong>Rechercher<\/strong> : Une simple bo\u00eete de recherche.<\/li>\n<li><strong>Texte<\/strong> : Tout texte que vous souhaitez ajouter, par exemple des informations sur le site.<\/li>\n<\/ul>\n<h3><strong>Ajouter des widgets avec une extension<\/strong><\/h3>\n<p>Le r\u00e9pertoire des extensions de WordPress contient des milliers d\u2019extensions de widgets gratuites qui vous permettront de choisir parmi un plus grand nombre de widgets.<\/p>\n<p>En outre, de nombreuses autres extensions comprennent \u00e9galement des widgets, telle qu&rsquo;une extension de commerce \u00e9lectronique qui vous donne un <a href=\"https:\/\/kinqsta.com\/fr\/blog\/themes-woocommerce\/\" target=\"_blank\" rel=\"noopener noreferrer\">widget<\/a> de panier et plus encore.<\/p>\n<p>Si le r\u00e9pertoire des extensions ne contient pas l\u2019extension dont vous avez besoin, vous pouvez d\u00e9cider d&rsquo;ajouter une extension premium. Parfois, celles-ci offrent plus de fonctions ou une interface plus intuitive. Mais il arrive que vous trouviez les m\u00eames fonctionnalit\u00e9s dans une extension gratuite, alors faites une bonne recherche dans le r\u00e9pertoire des extensions avant de payer pour des extensions.<\/p>\n<h4><strong>Comment trouver le bon widget pour votre site<\/strong><\/h4>\n<p>Pour trouver le widget WordPress qui vous convient, suivez ces conseils :<\/p>\n<ol>\n<li>Identifiez exactement ce dont vous avez besoin \u00e0 partir du widget. Quelle fonctionnalit\u00e9 doit-il avoir et comment voulez-vous qu&rsquo;il soit pr\u00e9sent\u00e9 ? Doit-il \u00eatre reli\u00e9 \u00e0 des API tierces ?<\/li>\n<li>V\u00e9rifiez les widgets int\u00e9gr\u00e9s pour voir s&rsquo;il y en a un qui r\u00e9pond \u00e0 vos besoins. Testez tous ceux qui sont pertinents, si vous en trouvez un qui vous convient, c&rsquo;est g\u00e9nial. Sinon&#8230;<\/li>\n<li>Consultez le r\u00e9pertoire des <strong>extensions<\/strong>, auquel vous pouvez acc\u00e9der via <strong>Extensions &gt; Ajouter. <\/strong>Essayez de rechercher plusieurs termes pour trouver l\u2019extension qui vous convient, et faites une recherche avec et sans le mot \u00ab\u00a0widget\u00a0\u00bb. Parfois, une extension qui n&rsquo;est pas ax\u00e9e sur les widgets inclura un widget dans un ensemble plus large de fonctionnalit\u00e9s.<\/li>\n<li>Si vous ne trouvez rien qui vous convienne parmi les extensions gratuites, cherchez une <a href=\"https:\/\/kinqsta.com\/fr\/blog\/themes-wordpress-gratuits-vs-payants\/\" target=\"_blank\" rel=\"noopener noreferrer\">extension premium<\/a>. Demandez des recommandations \u00e0 d&rsquo;autres utilisateurs de WordPress et examinez les avis avant d&rsquo;en choisir une.<\/li>\n<\/ol>\n<p>Quel que soit le widget que vous choisissez, vous devrez le tester pour v\u00e9rifier qu&rsquo;il fonctionne comme vous le souhaitez. Si vous achetez des extensions premium, je vous recommande d&rsquo;en acheter une avec une garantie de remboursement ou une p\u00e9riode d&rsquo;essai gratuite au cas o\u00f9 elle ne vous conviendrait pas.<\/p>\n<h3><strong>Comment ajouter des widgets dans la barre lat\u00e9rale et le pied de page de WordPress<\/strong><\/h3>\n<p>Maintenant que vous avez choisi votre widget, il est temps de l&rsquo;ajouter \u00e0 votre site.<\/p>\n<p>Vous pouvez ajouter des widgets \u00e0 n&rsquo;importe quelle zone de widgets active fournie par votre th\u00e8me. Si votre th\u00e8me ne dispose pas d&rsquo;une zone de widgets \u00e0 l&rsquo;endroit o\u00f9 vous le souhaitez, essayez de chercher un <a href=\"https:\/\/kinqsta.com\/fr\/blog\/modifier-theme-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">th\u00e8me alternatif<\/a>.<\/p>\n<p>Plus loin dans cet article, je vous montrerai comment coder votre propre zone de widgets.<\/p>\n<p>Il y a deux fa\u00e7ons d&rsquo;ajouter des widgets \u00e0 votre site :<\/p>\n<ul>\n<li>En utilisant la <a href=\"https:\/\/kinqsta.com\/fr\/blog\/comment-personnaliser-theme-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">Personnalisation<\/a>. Allez dans <strong>Apparence &gt;<\/strong> <strong>Personnaliser<\/strong> <strong>&gt; Widgets <\/strong>dans le menu d&rsquo;administration, ou <strong>Personnaliser<\/strong> <strong>&gt; Widgets <\/strong>dans la barre d&rsquo;administration en haut de l&rsquo;\u00e9cran.<\/li>\n<li>Via l&rsquo;\u00e9cran d&rsquo;administration des Widgets. Allez dans <strong>Apparence &gt; Widgets <\/strong>dans le menu d&rsquo;administration, ou dans la barre d&rsquo;administration, cliquez sur <strong>Personnaliser &gt; Widgets.<\/strong><\/li>\n<\/ul>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widgets-dans-la-personnalisation.jpg\" alt=\"Widgets dans la personnalisation\" width=\"1500\" height=\"801\"><figcaption class=\"wp-caption-text\">Widgets dans la personnalisation<\/figcaption><\/figure>\n<p>Je vous montrerai bient\u00f4t comment utiliser ces deux m\u00e9thodes, mais commen\u00e7ons par examiner les zones de widgets et pourquoi vous obtenez celles que vous faites avec votre th\u00e8me.<\/p>\n<h4>Les widgets ne sont pas seulement pour la barre lat\u00e9rale<\/h4>\n<p>En fonction de votre <a href=\"https:\/\/kinqsta.com\/fr\/blog\/theme-wordpress-plus-rapide\/\" target=\"_blank\" rel=\"noopener noreferrer\">th\u00e8me WordPress<\/a>, vous trouverez peut-\u00eatre des zones de widgets \u00e0 plusieurs endroits.<\/p>\n<p>La plupart des th\u00e8mes ont des zones de widgets dans la barre lat\u00e9rale et le pied de page. Mais certains en ont aussi \u00e0 d&rsquo;autres endroits, comme en dessous ou au-dessus du contenu ou dans l&rsquo;en-t\u00eate.<\/p>\n<p>Si vous allez \u00e0 l&rsquo;\u00e9cran des r\u00e9glages des widgets dans l\u2019<a href=\"https:\/\/kinqsta.com\/fr\/blog\/tableau-de-bord-admin-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">administration de WordPress<\/a>, vous pourrez voir toutes les zones de widgets de votre th\u00e8me.<\/p>\n<p>J&rsquo;utilise un th\u00e8me avec de multiples zones de widgets dans de nombreux endroits. Vous pouvez voir dans la capture d&rsquo;\u00e9cran ci-dessous qu&rsquo;il y a des zones de widgets au-dessus et en dessous du contenu, dans l&rsquo;en-t\u00eate, sous le pied de page principal.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/zones-de-widgets.jpg\" alt=\"\u00c9cran de r\u00e9glage des widgets, zones de widgets\" width=\"1500\" height=\"731\"><figcaption class=\"wp-caption-text\">\u00c9cran de r\u00e9glage des widgets, zones de widgets<\/figcaption><\/figure>\n<p>Si vous souhaitez ajouter des widgets \u00e0 d&rsquo;autres endroits de votre site, il est judicieux de trouver un th\u00e8me qui comporte plusieurs zones de widgets. La meilleure fa\u00e7on de proc\u00e9der est d&rsquo;utiliser un <a href=\"https:\/\/kinqsta.com\/fr\/blog\/comment-personnaliser-theme-wordpress\/#using-page-builders-and-frameworks-to-customize-your-wordpress-theme\" target=\"_blank\" rel=\"noopener noreferrer\">th\u00e8me framework<\/a>.<\/p>\n<p>Un bon exemple de widget dans un endroit de votre th\u00e8me qui n&rsquo;est pas la barre lat\u00e9rale ou le pied de page est d&rsquo;ajouter une barre de recherche dans l&rsquo;en-t\u00eate comme je l&rsquo;ai fait sur un de mes sites web.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/barre-de-recherche-dans-l-en-tete.jpg\" alt=\"Barre de recherche dans l'en-t\u00eate\" width=\"1500\" height=\"409\"><figcaption class=\"wp-caption-text\">Barre de recherche dans l&rsquo;en-t\u00eate<\/figcaption><\/figure>\n<h4><strong>Zones de widgets et th\u00e8mes<\/strong><\/h4>\n<p>Les zones de widgets sont cod\u00e9es dans les fichiers de mod\u00e8les de th\u00e8mes, ainsi que dans le fichier de fonctions de th\u00e8mes.<\/p>\n<p>Vous pouvez voir ici le code que j&rsquo;ai utilis\u00e9 dans mon fichier de fonctions de th\u00e8me pour ajouter une zone de widgets qui ira dans l&rsquo;en-t\u00eate.<\/p>\n<pre><code class=\"language-php\">register_sidebar( array(\n 'name' =&gt; __( 'In Header Widget Area', 'rmccollin' ),\n 'id' =&gt; 'in-header-widget-area',\n 'description' =&gt; __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),\n 'before_widget' =&gt; '&lt;div id=\"%1$s\" class=\"widget-container %2$s\"&gt;',\n 'after_widget' =&gt; '&lt;\/div&gt;',\n 'before_title' =&gt; '&lt;h3 class=\"widget-title\"&gt;',\n 'after_title' =&gt; '&lt;\/h3&gt;',\n) );<\/code><\/pre>\n<p>Et voici le code de mon fichier header.php qui ajoute cette zone de widgets au bon endroit dans le th\u00e8me.<\/p>\n<pre><code class=\"language-php\">if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?&gt;\n\n &lt;aside class=\"in-header widget-area right\" role=\"complementary\"&gt;\n  &lt;?php dynamic_sidebar( 'in-header-widget-area' ); ?&gt;\n &lt;\/aside&gt;\n\n&lt;?php }<\/code><\/pre>\n<p>Si vous souhaitez ajouter des zones de widgets suppl\u00e9mentaires dans votre th\u00e8me, vous devez ajouter le m\u00eame type de code. Je vous montrerai comment faire plus tard dans cet article.<\/p>\n<p>N&rsquo;oubliez pas que si votre th\u00e8me ne comporte pas autant de zones de widgets que vous le souhaitez, vous pouvez toujours faire l&rsquo;une des deux choses suivantes :<\/p>\n<ul>\n<li>Trouver un th\u00e8me qui comporte des zones de widgets l\u00e0 o\u00f9 vous le souhaitez.<\/li>\n<li>Coder la nouvelle zone de widgets dans votre th\u00e8me ou dans un <a href=\"https:\/\/kinqsta.com\/fr\/blog\/theme-enfant-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">th\u00e8me enfant de votre th\u00e8me<\/a>.<\/li>\n<\/ul>\n<p>Une fois que vous avez des zones de widgets \u00e0 tous les endroits de votre th\u00e8me o\u00f9 vous les voulez, vous pouvez commencer \u00e0 y ajouter des widgets.<\/p>\n<h4><strong>Comment utiliser l&rsquo;\u00e9cran Widgets pour ajouter des widgets<\/strong><\/h4>\n<p>Il existe deux fa\u00e7ons d&rsquo;ajouter des widgets \u00e0 votre site WordPress. La premi\u00e8re consiste \u00e0 utiliser l&rsquo;\u00e9cran Widgets dans l&rsquo;administration de WordPress.<\/p>\n<p>Cliquez sur <strong>Apparence &gt; Widgets. <\/strong>Cela fait appara\u00eetre l&rsquo;\u00e9cran des widgets.<\/p>\n<figure id=\"attachment_65267\" aria-describedby=\"caption-attachment-65267\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-65267\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/02\/Widgets-screen.jpg\" alt=\"Widgets screen\" width=\"1500\" height=\"594\"><figcaption id=\"caption-attachment-65267\" class=\"wp-caption-text\">Widgets screen<\/figcaption><\/figure>\n<p>Pour ajouter un widget, vous pouvez faire l&rsquo;une des deux choses suivantes<\/p>\n<ul>\n<li>Faites-le glisser de la liste des widgets sur le c\u00f4t\u00e9 gauche vers la zone de widgets correspondante.<\/li>\n<li>Cliquez sur le widget que vous souhaitez ajouter, et vous verrez une liste des endroits o\u00f9 vous pourriez l&rsquo;ajouter. S\u00e9lectionnez la zone de widgets que vous souhaitez, puis cliquez sur le bouton<strong> Ajouter un widget.<\/strong><\/li>\n<\/ul>\n<figure id=\"attachment_65270\" aria-describedby=\"caption-attachment-65270\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65270 size-full\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/selection-d-une-zone-de-widget-et-d-un-widget.jpg\" alt=\"S\u00e9lection d'une zone de widget et d'un widget\" width=\"1500\" height=\"1234\"><figcaption id=\"caption-attachment-65270\" class=\"wp-caption-text\">S\u00e9lection d&rsquo;une zone de widget et d&rsquo;un widget<\/figcaption><\/figure>\n<p>Vous devrez peut-\u00eatre alors modifier l&#8217;emplacement du widget dans la zone de widgets.<\/p>\n<p>Vous pouvez ajouter autant de widgets que vous le souhaitez \u00e0 chaque zone de widgets, mais n&rsquo;exag\u00e9rez pas. Vous pouvez les faire glisser dans la zone des widgets pour les mettre dans le bon ordre. Vous pouvez \u00e9galement les faire glisser d&rsquo;une zone de widgets \u00e0 une autre si vous d\u00e9cidez que vous n&rsquo;aimez pas leur aspect.<\/p>\n<p>Vous pouvez \u00e9galement utiliser votre clavier pour ajouter des widgets en utilisant l&rsquo;\u00e9cran Widgets. Ainsi, si vous n&rsquo;avez pas acc\u00e8s \u00e0 une souris, vous pouvez toujours ajouter des widgets.<\/p>\n<h4><strong>Ajout et modification de widgets en mode d&rsquo;accessibilit\u00e9<\/strong><\/h4>\n<p>Si vous ne savez pas utiliser une souris, vous pouvez utiliser l&rsquo;\u00e9cran Widgets avec un clavier.<\/p>\n<p>Tout d&rsquo;abord, mettez l&rsquo;\u00e9cran en mode accessibilit\u00e9 en cliquant sur (ou en tabulant vers et en s\u00e9lectionnant) le lien<strong> Activer le mode accessibilit\u00e9 <\/strong>en haut \u00e0 droite de l&rsquo;\u00e9cran.<\/p>\n<figure id=\"attachment_65271\" aria-describedby=\"caption-attachment-65271\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65271 size-full\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/lien-vers-le-mode-d-accessibilite.jpg\" alt=\"Lien vers le mode d'accessibilit\u00e9\" width=\"1500\" height=\"666\"><figcaption id=\"caption-attachment-65271\" class=\"wp-caption-text\">Lien vers le mode d&rsquo;accessibilit\u00e9<\/figcaption><\/figure>\n<p>L&rsquo;\u00e9cran changera alors pour refl\u00e9ter le fait que vous \u00eates en mode d&rsquo;accessibilit\u00e9.<\/p>\n<figure id=\"attachment_65272\" aria-describedby=\"caption-attachment-65272\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65272 size-full\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/mode-d-accessibilite-de-l-ecran-des-widgets.jpg\" alt=\"Mode d'accessibilit\u00e9 de l\u2019\u00e9cran des widgets\" width=\"1500\" height=\"737\"><figcaption id=\"caption-attachment-65272\" class=\"wp-caption-text\">Mode d&rsquo;accessibilit\u00e9 de l\u2019\u00e9cran des widgets<\/figcaption><\/figure>\n<p>Vous pouvez ensuite naviguer entre les \u00e9l\u00e9ments de l&rsquo;\u00e9cran en utilisant la touche <strong>Tab <\/strong>de votre clavier, et appuyer sur Entr\u00e9e pour s\u00e9lectionner un \u00e9l\u00e9ment et agir dessus. Vous pouvez soit tabuler sur un widget, cliquer sur <strong>Retour <\/strong>sur le lien <strong>Ajouter<\/strong> et choisir l&rsquo;endroit o\u00f9 vous voulez l&rsquo;ajouter, soit tabuler sur la zone du widget et cliquer sur <strong>Retour <\/strong>sur le lien<strong> Modifier.<\/strong><\/p>\n<h4><strong>Comment utiliser l&rsquo;outil de personnalisation de WordPress pour ajouter des widgets<\/strong><\/h4>\n<p>L&rsquo;utilisation de la personnalisation pour ajouter des widgets au lieu de l&rsquo;\u00e9cran des widgets signifie que vous pouvez voir vos widgets au fur et \u00e0 mesure que vous les ajoutez. Il est ainsi plus facile de voir \u00e0 quoi ressembleront vos widgets et de les d\u00e9placer entre les diff\u00e9rentes zones de widgets si vous le souhaitez.<\/p>\n<p>Dans le menu d&rsquo;administration, cliquez sur <strong>Apparence &gt; Personnaliser. <\/strong>Sinon, dans la barre d&rsquo;administration en haut de l&rsquo;\u00e9cran du site (en supposant que vous \u00eates connect\u00e9), il suffit de cliquer sur <strong>Personnaliser<\/strong>. Cela ouvrira l\u2019outil de personnalisation.<\/p>\n<figure id=\"attachment_65274\" aria-describedby=\"caption-attachment-65274\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65274 size-full\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/barre-d-administration-wordpress.jpg\" alt=\"Barre d'administration WordPress\" width=\"1500\" height=\"377\"><figcaption id=\"caption-attachment-65274\" class=\"wp-caption-text\">Barre d&rsquo;administration WordPress<\/figcaption><\/figure>\n<p>Cliquez maintenant sur l&rsquo;option <strong>Widgets<\/strong> et vous verrez une liste de tous les widgets de votre th\u00e8me. Cliquez sur la zone de widgets o\u00f9 vous souhaitez ajouter un widget et cliquez sur le bouton<strong> Ajouter un widget.<\/strong><\/p>\n<p>Cela vous donne une liste de tous les widgets disponibles pour votre site. Cela inclut tous les widgets int\u00e9gr\u00e9s \u00e0 WordPress, ainsi que tout widget que vous avez ajout\u00e9 via des extensions.<\/p>\n<figure id=\"attachment_65275\" aria-describedby=\"caption-attachment-65275\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65275 size-full\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/bouton-pour-ajouter-un-widget.jpg\" alt=\"Bouton pour ajouter un widget\" width=\"1500\" height=\"760\"><figcaption id=\"caption-attachment-65275\" class=\"wp-caption-text\">Bouton pour ajouter un widget<\/figcaption><\/figure>\n<p>Choisissez le widget que vous souhaitez ajouter \u00e0 cette zone de widgets et vous le verrez dans l&rsquo;\u00e9cran de pr\u00e9visualisation sur le c\u00f4t\u00e9 droit.<\/p>\n<p>Vous pouvez r\u00e9organiser les widgets en les faisant glisser de haut en bas sur le c\u00f4t\u00e9 gauche ou en cliquant sur le lien<strong> R\u00e9organiser<\/strong> sous la liste des widgets, puis en cliquant sur les fl\u00e8ches pour les faire glisser de haut en bas.<\/p>\n<figure id=\"attachment_65276\" aria-describedby=\"caption-attachment-65276\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-65276\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/02\/Editing-widgets-in-the-Customizer.jpg\" alt=\"Editing widgets in the Customizer\" width=\"1500\" height=\"551\"><figcaption id=\"caption-attachment-65276\" class=\"wp-caption-text\">Editing widgets in the Customizer<\/figcaption><\/figure>\n<p>Une fois que vous avez fini d&rsquo;ajouter des widgets via la personnalisation, n&rsquo;oubliez pas de cliquer sur le bouton<strong> Publier <\/strong>en haut \u00e0 gauche pour que vos modifications soient enregistr\u00e9es. Si vous quittez l\u2019outil de personnalisation sans avoir fait cela, aucun de vos changements ne sera pris en compte sur le site.<\/p>\n<p>Une fois que vous avez ajout\u00e9 vos widgets, veuillez les consulter et v\u00e9rifier comment ils s&rsquo;int\u00e8grent dans le design de votre page. Si vous avez ajout\u00e9 trop de zones de widgets, les choses risquent d&rsquo;avoir l&rsquo;air un peu compliqu\u00e9es. Vous devrez soit en supprimer certains, soit les d\u00e9placer d&rsquo;une zone de widgets \u00e0 une autre.<\/p>\n<p>C&rsquo;est tr\u00e8s facile \u00e0 faire dans l&rsquo;\u00e9cran Widgets, o\u00f9 vous pouvez faire glisser les widgets entre les zones de widgets.<\/p>\n<h4><strong>Comment ajouter un widget \u00e0 une page sp\u00e9cifique<\/strong><\/h4>\n<p>Certains th\u00e8mes comprennent des zones de widgets qui ne sont destin\u00e9es qu&rsquo;\u00e0 des pages sp\u00e9cifiques, comme la page d&rsquo;accueil. Mais que faire si vous souhaitez ajouter un widget \u00e0 une seule page de votre site ?<\/p>\n<p>Vous pouvez le faire dans l\u2019\u00e9diteur de page et d\u2019article <a href=\"https:\/\/kinqsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg<\/a>.<\/p>\n<p>Ajoutez un nouveau bloc de la mani\u00e8re habituelle, puis s\u00e9lectionnez le type de bloc<strong> Widgets.<\/strong><\/p>\n<figure id=\"attachment_65277\" aria-describedby=\"caption-attachment-65277\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65277 size-full\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/type-de-bloc-de-widgets.jpg\" alt=\"Type de bloc de widgets\" width=\"1500\" height=\"1393\"><figcaption id=\"caption-attachment-65277\" class=\"wp-caption-text\">Type de bloc de widgets<\/figcaption><\/figure>\n<p>Vous pouvez ensuite choisir parmi les nombreux widgets que vous avez activ\u00e9s pour votre site et l&rsquo;ajouter au contenu de votre article ou de votre page. Ceci est tr\u00e8s utile si vous souhaitez ajouter un widget de formulaire, un widget d&rsquo;appel \u00e0 l&rsquo;action ou une liste de vos derniers articles.<\/p>\n<h3><strong>Comment modifier les widgets<\/strong><\/h3>\n<p>Une fois que vous avez ajout\u00e9 des widgets \u00e0 votre site, vous pouvez y apporter des modifications. Les widgets individuels auront des r\u00e9glages auxquels vous pourrez acc\u00e9der via l&rsquo;\u00e9cran des widgets ou la personnalisation (peu importe ce que vous avez utilis\u00e9 pour ajouter le widget).<\/p>\n<p>Certains widgets ne comportent aucun r\u00e9glage, mais d&rsquo;autres ont des r\u00e9glages pour le titre du widget par exemple ou le nombre d\u2019articles affich\u00e9s. Certains sont plus compliqu\u00e9s et n\u00e9cessitent que vous configuriez le widget dans une page de configuration s\u00e9par\u00e9e. Consultez la documentation du d\u00e9veloppeur de votre extension.<\/p>\n<p>Les options dont vous disposez pour modifier les widgets des extensions sont les suivantes<\/p>\n<ul>\n<li>Modifier les r\u00e9glages de l\u2019extension.<\/li>\n<li>D\u00e9placer le widget d&rsquo;une zone de widgets \u00e0 une autre.<\/li>\n<li>Supprimer le widget. Vous avez deux options pour cela, qui seront vues prochainement.<\/li>\n<\/ul>\n<p>Pour modifier les r\u00e9glages du widget, trouvez ce widget dans l&rsquo;\u00e9cran des widgets ou dans la personnalisation, et modifiez simplement toutes les options fournies.<\/p>\n<figure id=\"attachment_65278\" aria-describedby=\"caption-attachment-65278\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65278 size-full\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/modifier-les-options-du-widget.jpg\" alt=\"Modifier les options du widget\" width=\"1500\" height=\"1154\"><figcaption id=\"caption-attachment-65278\" class=\"wp-caption-text\">Modifier les options du widget<\/figcaption><\/figure>\n<p>Pour d\u00e9placer le widget d&rsquo;une zone \u00e0 l&rsquo;autre, ouvrez l&rsquo;\u00e9cran des widgets et faites-le glisser d&rsquo;une zone \u00e0 l&rsquo;autre. En mode accessibilit\u00e9, naviguez sur la fl\u00e8che \u00e0 droite du widget et s\u00e9lectionnez parmi les options.<\/p>\n<h4><strong>Supprimer des widgets<\/strong><\/h4>\n<p>Pour supprimer un widget dans l&rsquo;\u00e9cran des widgets, trouvez ce widget et cliquez sur le lien de suppression en bas \u00e0 gauche de la bo\u00eete des r\u00e9glages du widget.<\/p>\n<figure id=\"attachment_65280\" aria-describedby=\"caption-attachment-65280\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65280 size-full\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/suppression-d-un-widget-dans-l-ecran-des-widgets.jpg\" alt=\"Suppression d'un widget dans l'\u00e9cran des widgets\" width=\"1500\" height=\"810\"><figcaption id=\"caption-attachment-65280\" class=\"wp-caption-text\">Suppression d&rsquo;un widget dans l&rsquo;\u00e9cran des widgets<\/figcaption><\/figure>\n<p>Pour supprimer un widget dans la personnalisation, trouvez le widget dans sa zone de widgets. Cliquez sur la fl\u00e8che \u00e0 droite du nom du widget, puis cliquez sur le lien \u00ab\u00a0<strong>Supprimer\u00a0\u00bb <\/strong>en bas \u00e0 gauche des r\u00e9glages du widget.<\/p>\n<figure id=\"attachment_65281\" aria-describedby=\"caption-attachment-65281\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65281 size-full\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/suppression-d-un-widget-dans-la-personnalisation.jpg\" alt=\"Suppression d'un widget dans la personnalisation\" width=\"1500\" height=\"1093\"><figcaption id=\"caption-attachment-65281\" class=\"wp-caption-text\">Suppression d&rsquo;un widget dans la personnalisation<\/figcaption><\/figure>\n<p>Vous pouvez \u00e9galement supprimer un widget d&rsquo;une zone de widgets tout en le rendant disponible pour une utilisation ult\u00e9rieure via l&rsquo;\u00e9cran des widgets.<\/p>\n<p>Faites d\u00e9filer l&rsquo;\u00e9cran jusqu&rsquo;\u00e0 la zone des<strong> widgets inactifs<\/strong> vers le bas de l&rsquo;\u00e9cran. 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\u00e9glages actuels. Vous pouvez alors toujours les faire glisser dans une zone de widgets si vous le souhaitez \u00e0 l&rsquo;avenir.<\/p>\n<p>Si <a href=\"https:\/\/kinqsta.com\/fr\/blog\/modifier-theme-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">vous changez de th\u00e8me<\/a> et que votre nouveau th\u00e8me comporte des zones de widgets diff\u00e9rentes, tous les widgets qui ne rentrent pas dans les zones de widgets du nouveau th\u00e8me seront automatiquement d\u00e9plac\u00e9s vers la liste des widgets inactifs par WordPress.<\/p>\n<h2><strong>Comment ajouter une nouvelle zone de widgets \u00e0 votre th\u00e8me<\/strong><\/h2>\n<p>Si votre th\u00e8me ne comporte pas de zones de widgets l\u00e0 o\u00f9 vous le souhaitez, vous pouvez toujours ajouter les v\u00f4tres. Pour ce faire, vous ajoutez deux morceaux de code.<\/p>\n<p>Ajoutons une zone de widgets sous le contenu.<\/p>\n<h3>Cr\u00e9ation de la zone de widgets dans votre fichier de fonctions du th\u00e8me<\/h3>\n<p>La premi\u00e8re \u00e9tape consiste \u00e0 configurer la zone de widgets \u00e0 l&rsquo;aide de la fonction <code>register_widget()<\/code>.<\/p>\n<p>Si vous utilisez un th\u00e8me WordPress tiers (voici une <a href=\"https:\/\/kinqsta.com\/fr\/blog\/theme-wordpress-plus-rapide\/\" target=\"_blank\" rel=\"noopener noreferrer\">s\u00e9lection des meilleurs<\/a>), vous devez cr\u00e9er un th\u00e8me enfant pour ce faire. La raison en est que si vous <a href=\"https:\/\/kinqsta.com\/fr\/blog\/mettre-a-jour-theme-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">mettez \u00e0 jour le th\u00e8me<\/a> plus tard, tous vos changements seront perdus.<\/p>\n<p>Si vous travaillez avec votre propre th\u00e8me, vous pouvez simplement modifier le th\u00e8me.<\/p>\n<p>Commencez par ouvrir le fichier<strong> functions.php de<\/strong> votre th\u00e8me. En bas du fichier, ajoutez ce code.<\/p>\n<pre><code class=\"language-php\">function kinsta_register_widgets() {\n \n register_sidebar( array(\n\u00a0 'name' =&gt; __( 'After Content Widget Area', 'kinsta' ),\n  'id' =&gt; 'after-content-widget-area',\n  'description' =&gt; __( 'Widget area after the content', 'kinsta' ),\n  'before_widget' =&gt; '&lt;div id=\"%1$s\" class=\"widget-container %2$s\"&gt;',\n  'after_widget' =&gt; '&lt;\/div&gt;',\n  'before_title' =&gt; '&lt;h3 class=\"widget-title\"&gt;',\n  'after_title' =&gt; '&lt;\/h3&gt;',\n\n ) );\n\n}\n\nadd_action( 'widgets_init', 'kinsta_register_widgets' );<\/code><\/pre>\n<p>Enregistrez maintenant votre fichier functions.php. Si vous allez sur votre \u00e9cran de widgets ou dans la personnalisation, vous trouverez la nouvelle zone de widgets disponible pour vous permettre d&rsquo;ajouter des widgets.<\/p>\n<p>Mais si vous faites cela, ils n&rsquo;appara\u00eetront pas vraiment sur la page. En effet, vous devez ajouter du code \u00e0 votre fichier de mod\u00e8le de th\u00e8me.<\/p>\n<p><strong>Ajouter un widget \u00e0 un fichier mod\u00e8le de th\u00e8me<\/strong><\/p>\n<p>La premi\u00e8re chose \u00e0 faire est de trouver quel fichier de mod\u00e8le de th\u00e8me vous devez utiliser.<\/p>\n<ul>\n<li>Si vous ajoutez une barre lat\u00e9rale suppl\u00e9mentaire, vous devrez alors ajouter ce code dans votre fichier<strong>php.<\/strong><\/li>\n<li>Si vous ajoutez votre zone de widgets avant ou apr\u00e8s le contenu, vous devrez l&rsquo;ajouter dans n&rsquo;importe quel fichier de mod\u00e8le de th\u00e8me qui produit le contenu.<\/li>\n<li>Si vous ajoutez une zone de widgets \u00e0 votre en-t\u00eate, vous devrez ajouter le code dans votre fichier header.php.<\/li>\n<li>Si votre nouvelle zone de widgets ne concerne qu&rsquo;une page de votre site ou un seul type de contenu, vous devrez utiliser la <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/\" target=\"_blank\" rel=\"noopener noreferrer\">hi\u00e9rarchie des mod\u00e8les WordPress<\/a> pour d\u00e9terminer exactement quel fichier mod\u00e8le vous devez utiliser\/cr\u00e9er et ensuite le modifier. Ainsi, par exemple, si vous souhaitez ajouter des zones de widgets \u00e0 votre page d&rsquo;accueil, vous devrez cr\u00e9er un fichier<strong> front-page.php<\/strong> et y ajouter votre zone de widgets.<\/li>\n<\/ul>\n<p>Une fois que vous avez identifi\u00e9 le fichier mod\u00e8le que vous devez modifier et l&rsquo;endroit exact o\u00f9 vous devez avoir le code pour la zone de widgets, ajoutez le code suivant. Dans le cas d&rsquo;une zone de widgets apr\u00e8s le contenu, nous l&rsquo;ajoutons au fichier<strong> post.php<\/strong> et <strong>page.php de<\/strong> notre th\u00e8me :<\/p>\n<pre><code class=\"language-php\">if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?&gt;\n\n aside class=\"after-content widget-area full-width\" role=\"complementary\"&gt;\n  &lt;?php dynamic_sidebar( 'after-content-widget-area' ); ?&gt;\n &lt;\/aside&gt;\n\n&lt;?php }<\/code><\/pre>\n<p>Enregistrez maintenant votre fichier de mod\u00e8le.<\/p>\n<p>Notez que votre code sera diff\u00e9rent du mien en fonction de ce que vous avez appel\u00e9 votre zone de widgets et des \u00e9l\u00e9ments que vous souhaitez y placer. J&rsquo;utilise g\u00e9n\u00e9ralement un \u00e9l\u00e9ment <strong>aside<\/strong> parce que, \u00e0 mon avis, ils sont con\u00e7us pour les barres lat\u00e9rales et les zones de widgets.<\/p>\n<p>Conseil de ninja : Si vous d\u00e9placez la fin de votre \u00e9l\u00e9ment conteneur pour le contenu au d\u00e9but de la barre lat\u00e9rale et\/ou du fichier de pied de page, vous pouvez l&rsquo;ajouter \u00e0 cet endroit et vous n&rsquo;avez besoin de l&rsquo;ajouter qu&rsquo;une seule fois.<\/p>\n<p>Maintenant, si vous regardez votre site, vous verrez que tous les widgets que vous avez ajout\u00e9s \u00e0 vos zones de widgets appara\u00eetront au bon endroit. S&rsquo;ils ne sont pas tout \u00e0 fait au bon endroit, retournez modifier vos fichiers de mod\u00e8les, en vous assurant que le code se trouve \u00e0 l&rsquo;endroit o\u00f9 vous le souhaitez. Vous devrez peut-\u00eatre aussi <a href=\"https:\/\/kinqsta.com\/fr\/blog\/modifier-code-wordpress\/\">modifier<\/a> \u00a0votre CSS pour obtenir l&rsquo;aspect que vous souhaitez.<\/p>\n<figure id=\"attachment_65282\" aria-describedby=\"caption-attachment-65282\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65282 size-full\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widget-sur-le-site.jpg\" alt=\"Widget sur le site\" width=\"1500\" height=\"449\"><figcaption id=\"caption-attachment-65282\" class=\"wp-caption-text\">Widget sur le site<\/figcaption><\/figure>\n<h2><strong>Comment coder les widgets \u00e0 l&rsquo;aide de l&rsquo;API des widgets<\/strong><\/h2>\n<p>Vous savez donc maintenant comment s\u00e9lectionner les widgets pour votre site, comment les ajouter \u00e0 votre site et comment enregistrer de nouvelles barres lat\u00e9rales ou zones de widgets. L&rsquo;\u00e9tape suivante consiste \u00e0 apprendre \u00e0 cr\u00e9er un widget WordPress.<\/p>\n<p>Parfois, vous pouvez constater qu&rsquo;il n&rsquo;y a pas d\u2019extension disponible pour cr\u00e9er le widget exact que vous voulez sur votre site. Cela signifie que vous devrez le coder vous-m\u00eame.<\/p>\n<p>Dans cet exemple, je vais vous montrer comment coder un widget d&rsquo;appel \u00e0 action vraiment simple.<\/p>\n<p><strong>Aper\u00e7u de l&rsquo;API des widgets<\/strong><\/p>\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/functionality\/widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">L&rsquo;API des widgets<\/a> dans WordPress comprend tout le code dont vous avez besoin pour enregistrer, cr\u00e9er et coder des widgets. L&rsquo;API des widgets comprend :<\/p>\n<ul>\n<li>Des cours pour construire de nouveaux widgets.<\/li>\n<li>Des fonctions permettant d&rsquo;enregistrer des widgets et de les afficher sur votre site.<\/li>\n<li>Des fonctions permettant de d\u00e9s-enregistrer des widgets, par exemple \u00e0 partir d&rsquo;un th\u00e8me parent.<\/li>\n<\/ul>\n<p>Ici, nous allons utiliser une classe pour construire un widget. La premi\u00e8re \u00e9tape consiste \u00e0 cr\u00e9er une extension pour le widget.<\/p>\n<h3><strong>Cr\u00e9er une extension pour votre widget WordPress<\/strong><\/h3>\n<p>Pour cr\u00e9er votre propre widget, vous devrez <a href=\"https:\/\/kinqsta.com\/fr\/blog\/publier-plugin-annuaire-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">coder une<\/a>\u00a0extension. N&rsquo;ajoutez pas le code d&rsquo;un nouveau widget \u00e0 votre th\u00e8me, car les widgets sont une question de fonctionnalit\u00e9 et non d&rsquo;affichage. Si vous <a href=\"https:\/\/kinqsta.com\/fr\/blog\/modifier-theme-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">changez de th\u00e8me<\/a> plus tard, vous voulez pouvoir continuer \u00e0 acc\u00e9der \u00e0 ce widget.<\/p>\n<p>Commencez par cr\u00e9er une extension vide. Cr\u00e9ez un dossier d\u2019extension dans votre r\u00e9pertoire <code>wp-content\/plugins<\/code> et ajoutez-y un fichier vide. Donnez-lui un nom appropri\u00e9. Ouvrez ce fichier et ajoutez ce code.<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n\u00a0* Plugin Name: Kinsta Call to Action Widget\n * Plugin URI: https:\/\/rachelmccollin.com\n\u00a0* Description: A simple call to action widget.\n\u00a0* Version: 1.0\n\u00a0* Author: Rachel McCollin\n\u00a0* Author URI: https:\/\/rachelmccollin.co.uk\n\u00a0*\/<\/code><\/pre>\n<p>Vous devrez modifier l&rsquo;URL de l&rsquo;auteur et l&rsquo;URL de l\u2019extension. Cela cr\u00e9era pour vous une extension que vous pourrez activer via l&rsquo;\u00e9cran des extensions.<\/p>\n<figure id=\"attachment_65286\" aria-describedby=\"caption-attachment-65286\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65286 size-full\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/extension-de-widget-dans-l-ecran-des-extensions.jpg\" alt=\"Extension de widget dans l\u2019\u00e9cran des extensions\" width=\"1500\" height=\"306\"><figcaption id=\"caption-attachment-65286\" class=\"wp-caption-text\">Extension de widget dans l\u2019\u00e9cran des extensions<\/figcaption><\/figure>\n<p>Mais si vous l&rsquo;activez, il ne se passera rien. Vous allez devoir ajouter du code \u00e0 votre extension.<\/p>\n<h3><strong>Cr\u00e9er une classe pour le widget<\/strong><\/h3>\n<p>Le code pour le widget va \u00e0 l&rsquo;int\u00e9rieur d&rsquo;une classe. Ajoutez donc cela ensuite.<\/p>\n<pre><code class=\"language-php\">class kinsta_Cta_Widget extends WP_Widget {\n\n}<\/code><\/pre>\n<h4><strong>Cr\u00e9er la fonction de construction<\/strong><\/h4>\n<p>La premi\u00e8re chose \u00e0 entrer dans la classe est la fonction de construction pour cr\u00e9er le widget. Ajoutez ceci \u00e0 l&rsquo;int\u00e9rieur des accolades de la classe.<\/p>\n<pre><code class=\"language-php\">\/\/widget constructor function\n\nfunction __construct() {\n\n $widget_options = array (\n  'classname' =&gt; 'kinsta_cta_widget',\n  'description' =&gt; 'Add a call to action box with your own text and link.'\n );\n\n parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );\n\n}<\/code><\/pre>\n<p>Cela commence \u00e0 construire le widget.<\/p>\n<h4><strong>Cr\u00e9er le formulaire d\u2019affichage du widget<\/strong><\/h4>\n<p>Ensuite, nous avons besoin d&rsquo;un formulaire qui sera utilis\u00e9 par l&rsquo;\u00e9cran des widgets et la personnalisation pour cr\u00e9er le widget. Ajoutez ceci, toujours \u00e0 l&rsquo;int\u00e9rieur des accolades.<\/p>\n<pre><code class=\"language-php\">\/\/function to output the widget form\n\nfunction form( $instance ) {\n\n $title = ! empty( $instance['title'] ) ? $instance['title'] : '';\n $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';\n $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';\n?&gt;\n\n&lt;p&gt;\n &lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'title'); ?&gt;\"&gt;Title:&lt;\/label&gt;\n &lt;input class=\"widefat\" type=\"text\" id=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\n&lt;p&gt;\n &lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'text'); ?&gt;\"&gt;Text in the call to action box:&lt;\/label&gt;\n &lt;input class=\"widefat\" type=\"text\" id=\"&lt;?php echo $this-&gt;get_field_id( 'text' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'text' ); ?&gt;\" value=\"&lt;?php echo esc_attr( $text ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\n&lt;p&gt;\n &lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'link'); ?&gt;\"&gt;Your link:&lt;\/label&gt;\n &lt;input class=\"widefat\" type=\"text\" id=\"&lt;?php echo $this-&gt;get_field_id( 'link' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'link' ); ?&gt;\" value=\"&lt;?php echo esc_attr( $link ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\n&lt;?php }<\/code><\/pre>\n<p>Cela donne aux utilisateurs un formulaire qu&rsquo;ils peuvent utiliser pour ajouter du texte et un lien vers la bo\u00eete d&rsquo;appel \u00e0 action.<\/p>\n<h4><strong>Cr\u00e9er la fonction pour enregistrer le widget<\/strong><\/h4>\n<p>Vous devez maintenant enregistrer tout ce qui est saisi dans ce formulaire. Ajoutez ceci.<\/p>\n<pre><code class=\"language-php\">\/\/function to define the data saved by the widget\n\nfunction update( $new_instance, $old_instance ) {\n $instance = $old_instance;\n $instance['title'] = strip_tags( $new_instance['title'] );\n $instance['text'] = strip_tags( $new_instance['text'] );\n $instance['link'] = strip_tags( $new_instance['link'] );\n return $instance;\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \n\n}<\/code><\/pre>\n<p>Cela permettra d&rsquo;enregistrer les donn\u00e9es saisies par les utilisateurs dans les r\u00e9glages du widget.<\/p>\n<h4><strong>Cr\u00e9er la fonction pour afficher le widget<\/strong><\/h4>\n<p>Vous devez maintenant ajouter le code qui affichera le widget sur le site. Encore une fois, ajoutez ceci \u00e0 l&rsquo;int\u00e9rieur des accolades :<\/p>\n<pre><code class=\"language-php\">\/\/function to display the widget in the site\n\nfunction widget( $args, $instance ) {\n \/\/define variables\n $title = apply_filters( 'widget_title', $instance['title'] );\n $text = $instance['text'];\n $link = $instance['link'];\n\n \/\/output code\n echo $args['before_widget'];\n ?&gt;\n\n &lt;div class=\"cta\"&gt;\n  &lt;?php if ( ! empty( $title ) ) {\n   echo $before_title . $title . $after_title;\n  };\n  echo '&lt;a href=\"' . $link . '\"&gt;' . $text . '&lt;\/a&gt;';\n  ?&gt;\n &lt;\/div&gt;\n\n &lt;?php\n echo $args['after_widget'];\n\n}<\/code><\/pre>\n<h3><strong>Enregistrer le widget<\/strong><\/h3>\n<p>Maintenant que votre classe est \u00e9crite, il est temps d&rsquo;enregistrer le widget WordPress pour qu&rsquo;il fonctionne. Ajoutez ce code en dehors de la classe.<\/p>\n<pre><code class=\"language-php\">\/\/function to register the widget\nfunction kinsta_register_cta_widget() {\n\n register_widget( 'kinsta_Cta_Widget' );\n\u00a0\u00a0\n}\nadd_action( 'widgets_init', 'kinsta_register_cta_widget' );<\/code><\/pre>\n<p>Enregistrez maintenant votre fichier d\u2019extension. Allez sur l&rsquo;\u00e9cran des widgets et vous verrez le widget \u00e0 utiliser.<\/p>\n<figure id=\"attachment_65287\" aria-describedby=\"caption-attachment-65287\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65287 size-full\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/nouveau-widget-dans-l-ecran-des-widgets.jpg\" alt=\"Nouveau widget dans l'\u00e9cran des widgets\" width=\"1500\" height=\"838\"><figcaption id=\"caption-attachment-65287\" class=\"wp-caption-text\">Nouveau widget dans l&rsquo;\u00e9cran des widgets<\/figcaption><\/figure>\n<p>Il se peut que cela n&rsquo;ait pas l&rsquo;air si bien que \u00e7a tout de suite. Vous devez ajouter un peu de CSS pour le styliser.<\/p>\n<figure id=\"attachment_65288\" aria-describedby=\"caption-attachment-65288\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65288 size-full\" src=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/nouveau-widget-sur-le-site.jpg\" alt=\"Nouveau widget sur le site\" width=\"1500\" height=\"761\"><figcaption id=\"caption-attachment-65288\" class=\"wp-caption-text\">Nouveau widget sur le site<\/figcaption><\/figure>\n<p>Il se peut que cela n&rsquo;ait pas l&rsquo;air si bien que \u00e7a tout de suite. Vous devez <a href=\"https:\/\/kinqsta.com\/fr\/blog\/css-wordpress\/\">ajouter un peu de CSS<\/a> pour le styliser.<\/p>\n<h3><strong>Ajouter le CSS au widget<\/strong><\/h3>\n<p>Pour ajouter du CSS \u00e0 votre extension, vous devez cr\u00e9er une feuille de style et la mettre en file d&rsquo;attente dans votre extension. Ajoutez-la \u00e0 votre fichier d\u2019extension avant la classe.<\/p>\n<pre><code class=\"language-php\">function kinsta_widget_enqueue_styles() {\n\n wp_register_style( 'widget_cta_css', plugins_url( 'css\/style.css', __FILE__ ) );\n wp_enqueue_style( 'widget_cta_css' );\n\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );<\/code><\/pre>\n<p>Vous devez maintenant ajouter un fichier<strong> style.css<\/strong> dans le dossier de l\u2019extension et y ajouter votre style. Je vous laisse faire !<\/p>\n<p>Vous disposez maintenant d&rsquo;un simple <a href=\"https:\/\/kinqsta.com\/fr\/blog\/conseils-optimisation-taux-conversion\/#2-strategic-ctas-button-popups-pricing-tables\">bouton d&rsquo;appel \u00e0 action<\/a> que vous pouvez ajouter \u00e0 n&rsquo;importe quelle zone de widgets sur votre site. Si vous l&rsquo;ajoutez \u00e0 votre barre lat\u00e9rale, par exemple, les gens pourront l&rsquo;utiliser pour acc\u00e9der \u00e0 votre page d&rsquo;inscription depuis n&rsquo;importe quel endroit du site.<\/p>\n<p>Vous pouvez cr\u00e9er des widgets plus complexes avec des r\u00e9glages et des options suppl\u00e9mentaires, mais cela vous donne une id\u00e9e de la mani\u00e8re de commencer \u00e0 cr\u00e9er votre propre widget.<\/p>\n<p>Si vous voulez voir mon code pour cette extension, y compris le style, vous pouvez le trouver sur <a href=\"https:\/\/github.com\/rachelmccollin\/kinsta-cta-widget-plugin\" target=\"_blank\" rel=\"noopener noreferrer\">Github<\/a>. Si vous d\u00e9butez avec le code, voici un guide approfondi sur <a href=\"https:\/\/kinqsta.com\/fr\/blog\/git-vs-github\/\" target=\"_blank\" rel=\"noopener noreferrer\">git vs GitHub<\/a> et comment commencer avec eux.<\/p>\n\n<h2><strong>R\u00e9sum\u00e9<\/strong><\/h2>\n<p>Les widgets sont l&rsquo;une de mes fonctionnalit\u00e9s pr\u00e9f\u00e9r\u00e9es de <a href=\"https:\/\/kinqsta.com\/fr\/blog\/qu-est-ce-que-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress<\/a>. Ils peuvent donner vie \u00e0 votre site web et vous aider \u00e0 obtenir plus d&rsquo;inscriptions ou \u00e0 <a href=\"https:\/\/kinqsta.com\/fr\/blog\/outils-ab-testing-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">convertir plus de visiteurs en clients<\/a>. Vous pouvez ajouter des widgets WordPress \u00e0 n&rsquo;importe quelle zone de widgets existante dans votre th\u00e8me, ou vous pouvez ajouter des zones de widgets suppl\u00e9mentaires afin de pouvoir ajouter plus de widgets dans plus d&rsquo;endroits.<\/p>\n<p>Il existe \u00e9galement de nombreux endroits o\u00f9 trouver des gadgets. WordPress est livr\u00e9 avec un certain nombre d&rsquo;entre eux pr\u00e9install\u00e9s, et vous pouvez \u00e9galement en installer d&rsquo;autres <a href=\"https:\/\/kinqsta.com\/fr\/sujets\/extensions-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">via des<\/a> extensions. Mais ce n&rsquo;est pas tout, si vous vous sentez \u00e0 l&rsquo;aise, vous pouvez aussi coder vos propres widgets en utilisant l&rsquo;API des widgets.<\/p>\n<p>C&rsquo;est maintenant votre tour : comment utilisez-vous les widgets WordPress sur votre site\u00a0?Combien en utilisez-vous ?<\/p>\n<div id=\"gtx-trans\">\n<div class=\"gtx-trans-icon\"><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Les widgets WordPress sont incroyablement utiles. Ils vous permettent d&rsquo;ajouter toutes sortes de contenus suppl\u00e9mentaires \u00e0 votre site web \u00e0 l\u2019ext\u00e9rieur du corps de l\u2019article ou &#8230;<\/p>\n","protected":false},"author":105,"featured_media":36826,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[112,33],"topic":[1028],"class_list":["post-36795","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webdesign","tag-wordpress","topic-developpement-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Le guide complet des widgets WordPress (le quoi, le comment et les snippets)<\/title>\n<meta name=\"description\" content=\"Utilisez les widgets WordPress pour am\u00e9liorer votre site : ajoutez un login sur la barre lat\u00e9rale, un bouton cta, une galerie. Apprenez \u00e0 ajouter, utiliser et coder des widgets WordPress en partant de z\u00e9ro.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Le guide complet des widgets WordPress : Comment les utiliser, les ajouter et les mettre en place pour personnaliser votre site\" \/>\n<meta property=\"og:description\" content=\"Utilisez les widgets WordPress pour am\u00e9liorer votre site : ajoutez un login sur la barre lat\u00e9rale, un bouton cta, une galerie. Apprenez \u00e0 ajouter, utiliser et coder des widgets WordPress en partant de z\u00e9ro.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-13T08:34:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-08T12:07:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widgets-wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rachel McCollin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Utilisez les widgets WordPress pour am\u00e9liorer votre site : ajoutez un login sur la barre lat\u00e9rale, un bouton cta, une galerie. Apprenez \u00e0 ajouter, utiliser et coder des widgets WordPress en partant de z\u00e9ro.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widgets-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rachel McCollin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"37 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/\"},\"author\":{\"name\":\"Rachel McCollin\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\"},\"headline\":\"Le guide complet des widgets WordPress : Comment les utiliser, les ajouter et les mettre en place pour personnaliser votre site\",\"datePublished\":\"2020-02-13T08:34:17+00:00\",\"dateModified\":\"2024-10-08T12:07:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/\"},\"wordCount\":6899,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widgets-wordpress.jpg\",\"keywords\":[\"webdesign\",\"WordPress\"],\"articleSection\":[\"D\u00e9veloppement WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/\",\"name\":\"Le guide complet des widgets WordPress (le quoi, le comment et les snippets)\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widgets-wordpress.jpg\",\"datePublished\":\"2020-02-13T08:34:17+00:00\",\"dateModified\":\"2024-10-08T12:07:18+00:00\",\"description\":\"Utilisez les widgets WordPress pour am\u00e9liorer votre site : ajoutez un login sur la barre lat\u00e9rale, un bouton cta, une galerie. Apprenez \u00e0 ajouter, utiliser et coder des widgets WordPress en partant de z\u00e9ro.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widgets-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widgets-wordpress.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Widgets WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement WordPress\",\"item\":\"https:\/\/kinqsta.com\/fr\/sujets\/developpement-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Le guide complet des widgets WordPress : Comment les utiliser, les ajouter et les mettre en place pour personnaliser votre site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#website\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\",\"name\":\"Rachel McCollin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"caption\":\"Rachel McCollin\"},\"description\":\"Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.\",\"url\":\"https:\/\/kinqsta.com\/fr\/blog\/author\/rachelmccollin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Le guide complet des widgets WordPress (le quoi, le comment et les snippets)","description":"Utilisez les widgets WordPress pour am\u00e9liorer votre site : ajoutez un login sur la barre lat\u00e9rale, un bouton cta, une galerie. Apprenez \u00e0 ajouter, utiliser et coder des widgets WordPress en partant de z\u00e9ro.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/","og_locale":"fr_FR","og_type":"article","og_title":"Le guide complet des widgets WordPress : Comment les utiliser, les ajouter et les mettre en place pour personnaliser votre site","og_description":"Utilisez les widgets WordPress pour am\u00e9liorer votre site : ajoutez un login sur la barre lat\u00e9rale, un bouton cta, une galerie. Apprenez \u00e0 ajouter, utiliser et coder des widgets WordPress en partant de z\u00e9ro.","og_url":"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2020-02-13T08:34:17+00:00","article_modified_time":"2024-10-08T12:07:18+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widgets-wordpress.jpg","type":"image\/jpeg"}],"author":"Rachel McCollin","twitter_card":"summary_large_image","twitter_description":"Utilisez les widgets WordPress pour am\u00e9liorer votre site : ajoutez un login sur la barre lat\u00e9rale, un bouton cta, une galerie. Apprenez \u00e0 ajouter, utiliser et coder des widgets WordPress en partant de z\u00e9ro.","twitter_image":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widgets-wordpress.jpg","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Rachel McCollin","Dur\u00e9e de lecture estim\u00e9e":"37 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/"},"author":{"name":"Rachel McCollin","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/52eb266d622b565d3206e355caac172e"},"headline":"Le guide complet des widgets WordPress : Comment les utiliser, les ajouter et les mettre en place pour personnaliser votre site","datePublished":"2020-02-13T08:34:17+00:00","dateModified":"2024-10-08T12:07:18+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/"},"wordCount":6899,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widgets-wordpress.jpg","keywords":["webdesign","WordPress"],"articleSection":["D\u00e9veloppement WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/","url":"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/","name":"Le guide complet des widgets WordPress (le quoi, le comment et les snippets)","isPartOf":{"@id":"https:\/\/kinqsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widgets-wordpress.jpg","datePublished":"2020-02-13T08:34:17+00:00","dateModified":"2024-10-08T12:07:18+00:00","description":"Utilisez les widgets WordPress pour am\u00e9liorer votre site : ajoutez un login sur la barre lat\u00e9rale, un bouton cta, une galerie. Apprenez \u00e0 ajouter, utiliser et coder des widgets WordPress en partant de z\u00e9ro.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#primaryimage","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widgets-wordpress.jpg","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/widgets-wordpress.jpg","width":1460,"height":730,"caption":"Widgets WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/fr\/blog\/widgets-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement WordPress","item":"https:\/\/kinqsta.com\/fr\/sujets\/developpement-wordpress\/"},{"@type":"ListItem","position":3,"name":"Le guide complet des widgets WordPress : Comment les utiliser, les ajouter et les mettre en place pour personnaliser votre site"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/fr\/#website","url":"https:\/\/kinqsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinqsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/52eb266d622b565d3206e355caac172e","name":"Rachel McCollin","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinqsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","caption":"Rachel McCollin"},"description":"Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.","url":"https:\/\/kinqsta.com\/fr\/blog\/author\/rachelmccollin\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/36795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/users\/105"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/comments?post=36795"}],"version-history":[{"count":9,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/36795\/revisions"}],"predecessor-version":[{"id":43280,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/posts\/36795\/revisions\/43280"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36795\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36795\/translations\/fr"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36795\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36795\/translations\/pt"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36795\/translations\/it"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36795\/translations\/nl"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36795\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36795\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36795\/translations\/dk"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36795\/translations\/se"},{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36795\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media\/36826"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/media?parent=36795"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/tags?post=36795"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/fr\/wp-json\/wp\/v2\/topic?post=36795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}