{"id":5764,"date":"2017-09-19T09:29:31","date_gmt":"2017-09-19T09:29:31","guid":{"rendered":"https:\/\/blog.hostinger.io\/fr-tutoriels\/?p=5764"},"modified":"2025-07-10T18:57:57","modified_gmt":"2025-07-10T18:57:57","slug":"creer-un-widget-wordpress","status":"publish","type":"post","link":"\/fr\/tutoriels\/creer-un-widget-wordpress\/","title":{"rendered":"Cr\u00e9er un widget WordPress facilement et simplement"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Saviez-vous que vous pouvez cr&eacute;er un widget WordPress facilement et le personnaliser ?&nbsp;Bien qu&rsquo;il existe des tonnes de widgets suppl&eacute;mentaires qui contiennent des th&egrave;mes et des plugins, WordPress donne &eacute;galement la possibilit&eacute; de coder des widgets personnalis&eacute;s manuellement pour tous les utilisateurs.&nbsp;Dans ce&nbsp;<a href=\"\/fr\/tutoriels\/tuto-wordpress\/\">tuto WordPress<\/a>, vous apprendrez comment impl&eacute;menter un widget basique dans WordPress.&nbsp;Si cela semble vous intimidant, rassurez-vous, les seuls &eacute;l&eacute;ments dont vous aurez besoin sont des connaissances de base sur WordPress et PHP.&nbsp;Donc, sans plus tarder, commen&ccedil;ons.<\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-FR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/public\" alt=\"\" class=\"wp-image-41459\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-ce-dont-vous-aurez-besoin\"><span id=\"What-you8217ll-need\">Ce dont vous aurez besoin<\/span><\/h2><p class=\"wp-block-paragraph\">Avant de commencer ce tutoriel, vous aurez besoin de ce qui suit:<\/p><ul class=\"wp-block-list\">\n<li>Acc&egrave;s au tableau de bord de l&rsquo;administration WordPress<\/li>\n\n\n\n<li>N&rsquo;importe quel &eacute;diteur de texte<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-un-mot-sur-les-widgets-wordpress\"><span id=\"A-Word-on-WordPress-Widgets\">Un mot sur les widgets WordPress<\/span><\/h2><p class=\"wp-block-paragraph\">Les <a href=\"\/fr\/tutoriels\/widget-wordpress\/\">widgets WordPress<\/a> sont destin&eacute;s &agrave; faciliter l&rsquo;ajout d&rsquo;&eacute;l&eacute;ments sur votre site via une simple interface de glisser-d&eacute;poser.&nbsp;&Agrave; la pointe de la technologie, WordPress est livr&eacute; avec plusieurs widgets.&nbsp;Ces widgets par d&eacute;faut vous donnent un utilitaire de base et sont compatibles avec chaque th&egrave;me de WordPress.&nbsp;Mais parfois, ces widgets ne suffisent pas.&nbsp;<\/p><p class=\"wp-block-paragraph\">Dans de tels cas, la meilleure option est de cr&eacute;er les plugins qui vous offrent la fonctionnalit&eacute; que vous d&eacute;sirez.&nbsp;Vous pouvez trouver des plugins pour la plupart des t&acirc;ches typiques, mais il existe des sc&eacute;narios o&ugrave; m&ecirc;me les plugins tiers ne r&eacute;pondent pas &agrave; vos besoins.&nbsp;C&rsquo;est l&agrave; que les widgets personnalis&eacute;s sont utiles.&nbsp;Des widgets personnalis&eacute;s doivent &ecirc;tre cr&eacute;&eacute;s &agrave; partir de rien.&nbsp;Cela donne aux utilisateurs un contr&ocirc;le complet sur leur utilisation de WordPress.<\/p><h2 class=\"wp-block-heading\" id=\"h-bien-commencer\"><span id=\"Setting-the-stage\">Bien commencer<\/span><\/h2><p class=\"wp-block-paragraph\">Pour commencer &agrave; cr&eacute;er un widget WordPress, vous devez prendre certaines d&eacute;cisions cl&eacute;s.&nbsp;Tout d&rsquo;abord, vous pouvez choisir de coder le widget dans un plugin personnalis&eacute;.&nbsp;Cela lui permettra de fonctionner avec n&rsquo;importe quel site utilisant ce plugin.&nbsp;Ou, vous pouvez simplement ajouter le widget au&nbsp;fichier&nbsp;<a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/creer-un-theme-wordpress\/\"><strong>functions.php<\/strong>&nbsp;d&rsquo;un th&egrave;me<\/a> sp&eacute;cifique, ce qui le fera fonctionner avec ce seul th&egrave;me.&nbsp;Deuxi&egrave;mement, vous avez la possibilit&eacute; d&rsquo;ajouter le widget sur un site en ligne ou dans un environnement local.&nbsp;Conform&eacute;ment aux pratiques de <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/developpeur-wordpress\/\">d&eacute;veloppement WordPress<\/a>, nous vous recommandons fortement de cr&eacute;er le widget dans un environnement local (voir le didacticiel sur l&rsquo;<a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/docker-wordpress\/\">ex&eacute;cution de WordPress sur Docker<\/a>).&nbsp;Une fois que vous vous &ecirc;tes assur&eacute; que cela fonctionne bien, vous pourrez facilement le&nbsp;transf&eacute;rer sur votre site.<\/p><h2 class=\"wp-block-heading\" id=\"h-fonctionnement-des-widgets-personnalises-de-wordpress-widgets-api\"><span id=\"How-do-WordPress-custom-widgets-work-Widgets-API\">Fonctionnement des widgets personnalis&eacute;s de WordPress: Widgets API<\/span><\/h2><p class=\"wp-block-paragraph\">WordPress permet &agrave; vos codes de personnaliser les widgets en vous fournissant l&rsquo;<a href=\"https:\/\/codex.wordpress.org\/Widgets_API\" target=\"_blank\" rel=\"noopener\">API Widgets<\/a>&nbsp;(en anglais).&nbsp;Pour cr&eacute;er un widget personnalis&eacute;, vous devez utiliser la&nbsp;classe&nbsp;<a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_widget\/\" target=\"_blank\" rel=\"noopener\">WP_Widget<\/a>&nbsp;(en anglais) de l&rsquo;API.&nbsp;Cette classe de base offre environ 20 fonctions avec lesquelles vous pouvez jouer.&nbsp;En dehors de cela, seules 4 sont n&eacute;cessaires pour qu&rsquo;un widget fonctionne.&nbsp;Ces 4 fonctions sont:<\/p><ul class=\"wp-block-list\">\n<li><strong>__construct()<\/strong>&nbsp;&ndash; fonction constructeur<\/li>\n\n\n\n<li><strong>widget()<\/strong>&nbsp;&ndash; contient la sortie du widget<\/li>\n\n\n\n<li><strong>form()<\/strong>&nbsp;&ndash; d&eacute;termine les param&egrave;tres du widget dans le tableau de bord WordPress<\/li>\n\n\n\n<li><strong>update()<\/strong>&nbsp;&ndash;&nbsp;met &agrave; jour les param&egrave;tres du plugin<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Bien s&ucirc;r, il existe de nombreuses autres m&eacute;thodes qui offrent des fonctionnalit&eacute;s suppl&eacute;mentaires.<\/p><h2 class=\"wp-block-heading\" id=\"h-creer-un-widget-wordpress-personnalise\"><span id=\"Creating-WordPress-custom-widget\">Cr&eacute;er un widget WordPress personnalis&eacute;<\/span><\/h2><p>\n\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>IMPORTANT:<\/strong>&nbsp;Il est fortement recommand&eacute; de cr&eacute;er une&nbsp;<a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/sauvegarder-site\/\"><strong>sauvegarde<\/strong>&nbsp;<strong>compl&egrave;te&nbsp;de votre site <\/strong><\/a>avant d&rsquo;aller plus loin.&nbsp;En outre, vous devriez &eacute;galement&nbsp;<strong><a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/theme-enfant-wordpress\/\">utiliser le th&egrave;me enfant WordPress<\/a><\/strong>.\n            <\/p><\/div>\n\n\n\n<\/p><p class=\"wp-block-paragraph\">Maintenant que nous avons d&eacute;fini les bases conceptuelles de notre t&acirc;che, nous allons travailler sur sa mise en &oelig;uvre.&nbsp;Pour ce tutoriel, nous allons cr&eacute;er un widget WordPress personnalis&eacute; appel&eacute;&nbsp;<strong>Hello World<\/strong>, afin que vous puissiez apprendre les bases pour cr&eacute;er un widget WordPress.&nbsp;Bien s&ucirc;r, vous pouvez ensuite cr&eacute;er des widgets plus complexes par vous-m&ecirc;me.<\/p><p class=\"wp-block-paragraph\">Encore une chose: nous &eacute;crivons ce code dans le&nbsp;fichier&nbsp;<strong>functions.php<\/strong>&nbsp;du th&egrave;me actuellement charg&eacute;, mais vous pouvez le faire dans n&rsquo;importe quel plugin personnalis&eacute;.<\/p><p class=\"wp-block-paragraph\">Ouvrez maintenant n&rsquo;importe quel &eacute;diteur de texte dans votre ordinateur et cr&eacute;ez une nouvelle classe qui &eacute;tend la&nbsp;classe&nbsp;<strong>WP_Widget<\/strong>&nbsp;de base, comme ceci:<\/p><pre class=\"wp-block-preformatted\">class hstngr_widget extends WP_Widget {\n\n\/\/Insert functions here\n\n}<\/pre><p class=\"wp-block-paragraph\">Maintenant, nous commen&ccedil;ons &agrave; impl&eacute;menter les 4 fonctions mentionn&eacute;es ci-dessus une par une.&nbsp;Le premier de la liste est la m&eacute;thode constructor, que nous utiliserons pour d&eacute;terminer une ID, le nom du widget tel qu&rsquo;il appara&icirc;t dans l&rsquo;interface utilisateur et une description :<\/p><pre class=\"wp-block-preformatted\">function __construct() {\nparent::__construct(\n\/\/ widget ID\n'hstngr_widget',\n\/\/ widget name\n__('Hostinger Sample Widget', ' hstngr_widget_domain'),\n\/\/ widget description\narray( 'description' =&gt; __( 'Hostinger Widget Tutorial', 'hstngr_widget_domain' ), )\n);\n}<\/pre><p class=\"wp-block-paragraph\">Ensuite, nous passons &agrave; l&rsquo;apparence du widget, ou comment le front-end du widget s&rsquo;affichera.&nbsp;Cela se fera par la fonction&nbsp;<strong>widget()<\/strong>&nbsp;:<\/p><pre class=\"wp-block-preformatted\">public function widget( $args, $instance ) {\n$title = apply_filters( 'widget_title', $instance['title'] );\necho $args['before_widget'];\n\/\/if title is present\nif ( ! empty( $title ) )\necho $args['before_title'] . $title . $args['after_title'];\n\/\/output\necho __( 'Hello, World from Hostinger.com', 'hstngr_widget_domain' );\necho $args['after_widget'];\n}<\/pre><div id=\"gist49386879\" class=\"gist\">\n<div class=\"gist-file\">\n<div class=\"gist-data\">\n<div class=\"js-gist-file-update-container js-task-list-container file-box\">\n<div id=\"file-widget\" class=\"file\">\n<div class=\"blob-wrapper data type-text\">Ici, nous avons configur&eacute; la sortie de notre widget afin qu&rsquo;il affiche le terme &lsquo;Hello World!&rsquo;, Et affiche le titre du widget tel que sp&eacute;cifi&eacute; par l&rsquo;utilisateur.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><p class=\"wp-block-paragraph\">Maintenant, nous devons programmer l&rsquo;arri&egrave;re-plan du widget en utilisant la&nbsp;m&eacute;thode&nbsp;<strong>form()<\/strong>&nbsp;:<\/p><pre class=\"wp-block-preformatted\">public function form( $instance ) {\nif ( isset( $instance[ 'title' ] ) )\n$title = $instance[ 'title' ];\nelse\n$title = __( 'Default Title', 'hstngr_widget_domain' );\n?&gt;\n&lt;p&gt;\n&lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\"&gt;&lt;?php _e( 'Title:' ); ?&gt;&lt;\/label&gt;\n&lt;input class=\"widefat\" id=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;\" type=\"text\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;\n&lt;\/p&gt;\n&lt;?php\n}\n<\/pre><p class=\"wp-block-paragraph\">Ici, vous pouvez voir comment le widget personnalis&eacute; a &eacute;t&eacute; configur&eacute;.&nbsp;Si l&rsquo;utilisateur fournit un titre, ce titre sera ins&eacute;r&eacute; dans le formulaire HTML que nous avons cr&eacute;&eacute;.&nbsp;Sinon, nous d&eacute;finirons le titre en <strong>Titre par&nbsp;<\/strong><strong>d&eacute;faut<\/strong>.&nbsp;C&rsquo;est ainsi que le widget appara&icirc;tra dans la zone d&rsquo;administration de WordPress.<\/p><p class=\"wp-block-paragraph\">Enfin, nous devons impl&eacute;menter la fonction de mise &agrave; jour pour actualiser le widget chaque fois que les param&egrave;tres sont modifi&eacute;s.<\/p><pre class=\"wp-block-preformatted\">public function update( $new_instance, $old_instance ) {\n$instance = array();\n$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';\nreturn $instance;\n}<\/pre><p class=\"wp-block-paragraph\">Tout cela fait, prenez le titre actuel de l&rsquo;instance nouvellement cr&eacute;&eacute;e, supprimez toutes les balises HTML\/PHP, envoyez le titre &agrave; l&rsquo;instance et renvoyez-le.<\/p><p class=\"wp-block-paragraph\">Il reste encore une chose &agrave; faire ici: vous devez utiliser une fonction suppl&eacute;mentaire pour enregistrer le widget avec WordPress:<\/p><pre class=\"wp-block-preformatted\">function hstngr_register_widget() {\nregister_widget( 'hstngr_widget' );\n}\nadd_action( 'widgets_init', 'hstngr_register_widget' );<\/pre><p class=\"wp-block-paragraph\">Notez que les lignes ci-dessus doivent &ecirc;tre plac&eacute;es en dehors de la fonction&nbsp;<strong>hstngr_widget<\/strong>&nbsp;.<\/p><p class=\"wp-block-paragraph\">Nous avons d&eacute;fini une nouvelle fonction appel&eacute;e&nbsp;<strong>hstngr_register_widget()<\/strong>&nbsp;, qui enregistre notre widget &agrave; l&rsquo;aide de l&rsquo;identifiant du widget, sp&eacute;cifi&eacute; dans&nbsp;la fonction<strong> __construct()<\/strong>&nbsp;.&nbsp;Ensuite, nous avons attach&eacute; cette fonction en utilisant&nbsp;<strong>widgets_init<\/strong>&nbsp;, qui charge ce widget dans WordPress &agrave; travers la&nbsp;m&eacute;thode&nbsp;<strong>add_action()<\/strong> int&eacute;gr&eacute;e&nbsp;.&nbsp;Votre code utilisateur final de WordPress personnalis&eacute; devrait ressembler &agrave; ceci:<\/p><pre class=\"wp-block-preformatted\">function hstngr_register_widget() {\nregister_widget( 'hstngr_widget' );\n}\n\nadd_action( 'widgets_init', 'hstngr_register_widget' );\n\nclass hstngr_widget extends WP_Widget {\n\nfunction __construct() {\nparent::__construct(\n\/\/ widget ID\n'hstngr_widget',\n\/\/ widget name\n__('Hostinger Sample Widget', ' hstngr_widget_domain'),\n\/\/ widget description\narray( 'description' =&gt; __( 'Hostinger Widget Tutorial', 'hstngr_widget_domain' ), )\n);\n}\npublic function widget( $args, $instance ) {\n$title = apply_filters( 'widget_title', $instance['title'] );\necho $args['before_widget'];\n\/\/if title is present\nif ( ! empty( $title ) )\necho $args['before_title'] . $title . $args['after_title'];\n\/\/output\necho __( 'Hello, World from Hostinger.com', 'hstngr_widget_domain' );\necho $args['after_widget'];\n}\npublic function form( $instance ) {\nif ( isset( $instance[ 'title' ] ) )\n$title = $instance[ 'title' ];\nelse\n$title = __( 'Default Title', 'hstngr_widget_domain' );\n?&gt;\n&lt;p&gt;\n&lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\"&gt;&lt;?php _e( 'Title:' ); ?&gt;&lt;\/label&gt;\n&lt;input class=\"widefat\" id=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;\" type=\"text\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;\n&lt;\/p&gt;\n&lt;?php\n}\npublic function update( $new_instance, $old_instance ) {\n$instance = array();\n$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';\nreturn $instance;\n}\n\n}<\/pre><p class=\"wp-block-paragraph\">Vous pouvez utiliser le Gestionnaire de fichiers, le client FTP ou l&rsquo;&eacute;diteur WordPress pour ajouter ce code au&nbsp;fichier&nbsp;<strong>functions.php <\/strong>de&nbsp;votre th&egrave;me&nbsp;.&nbsp;Ajoutez le code au&nbsp;fichier&nbsp;<strong>functions.php<\/strong>&nbsp;du th&egrave;me actif&nbsp;et appuyez sur le&nbsp;bouton <strong>Mettre &agrave;<\/strong>&nbsp;<strong>jour le fichier<\/strong>&nbsp;pour enregistrer les modifications.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"569\" height=\"294\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/09\/mettre-a-jour.png\/public\" alt=\"mettre a jour editeur wordpress\" class=\"wp-image-5798\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/09\/mettre-a-jour.png\/w=569,fit=scale-down 569w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/09\/mettre-a-jour.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/09\/mettre-a-jour.png\/w=300,fit=scale-down 300w\" sizes=\"(max-width: 569px) 100vw, 569px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Maintenant, acc&eacute;dez simplement &agrave; votre zone d&rsquo;administration WordPress et acc&eacute;dez &agrave; la section&nbsp;<strong>Apparence&nbsp;<\/strong>&nbsp;<strong>-&gt;&nbsp;<\/strong><strong>Widgets<\/strong>&nbsp;.&nbsp;Vous devriez voir un widget appel&eacute;&nbsp;<strong>Hostinger Sample Widget&nbsp;<\/strong>dans la&nbsp;liste&nbsp;<strong>Widgets disponibles<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"821\" height=\"258\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/09\/ajout-widget.png\/public\" alt=\"ajout widget\" class=\"wp-image-5797\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/09\/ajout-widget.png\/w=821,fit=scale-down 821w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/09\/ajout-widget.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/09\/ajout-widget.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/09\/ajout-widget.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 821px) 100vw, 821px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">&Agrave; partir d&rsquo;ici, faites glisser le widget et d&eacute;posez-le dans la box <strong>Colonne lat&eacute;rale <\/strong>du blog&nbsp;sur le c&ocirc;t&eacute; droit de la page.&nbsp;Vous pourrez maintenant d&eacute;finir le titre du widget.&nbsp;Enregistrez-le, puis visitez votre site.&nbsp;Vous verrez avec un widget personnalis&eacute; avec le titre de votre choix et rempli des mots &laquo;Hello World!&raquo;&nbsp;&agrave; l&rsquo;int&eacute;rieur.<\/p><p class=\"wp-block-paragraph\">F&eacute;licitations, vous avez cr&eacute;&eacute; avec succ&egrave;s votre premier widget WordPress personnalis&eacute;.&nbsp;Vous pouvez maintenant voir &agrave; quoi votre widget ressemble.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/wordpress-widget-in-frontend.png\" rel=\"lightbox[4953]\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2017\/06\/wordpress-widget-in-frontend.png\/public\" alt=\"Widget WordPress personnalis&eacute; activ&eacute;\" class=\"wp-image-5129\"><\/a><\/figure>\n<\/div><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-41453\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\"><span id=\"Conclusion\">Conclusion<\/span><\/h2><p class=\"wp-block-paragraph\">Cr&eacute;er un widget WordPress peut sembler &ecirc;tre une montagne insurmontable.&nbsp;En r&eacute;alit&eacute;, cependant, cela est facilement r&eacute;alisable pour toute personne ayant un ensemble de comp&eacute;tences de base en HTML et PHP.&nbsp;Dans ce didacticiel, nous vous avons montr&eacute; comment cr&eacute;er un widget WordPress avec le minimum d&rsquo;&eacute;tapes.&nbsp;&Agrave; partir de l&agrave;, vous pouvez cr&eacute;er des widgets plus fonctionnels.&nbsp;Si vous avez trouv&eacute; cela utile, assurez-vous de consulter d&rsquo;autres&nbsp;<a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wordpress\/\">guides WordPress<\/a>&nbsp;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Saviez-vous que vous pouvez cr&eacute;er un widget WordPress facilement et le personnaliser ?&nbsp;Bien qu&rsquo;il existe des tonnes de widgets suppl&eacute;mentaires qui contiennent des th&egrave;mes et des plugins, WordPress donne &eacute;galement la possibilit&eacute; de coder des widgets personnalis&eacute;s manuellement pour tous les utilisateurs.&nbsp;Dans ce&nbsp;tuto WordPress, vous apprendrez comment impl&eacute;menter un widget basique dans WordPress.&nbsp;Si cela semble [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/creer-un-widget-wordpress\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":261,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"%title%","rank_math_description":"Vous aimeriez cr\u00e9er un widget WordPress facilement ? Nous vous montrons quelques astuces pour y arriver dans notre guide !","rank_math_focus_keyword":"cr\u00e9er un widget wordpress","footnotes":""},"categories":[5866,5848],"tags":[5146,5145,5147],"class_list":["post-5764","post","type-post","status-publish","format-standard","hentry","category-personnalisation-et-design","category-wordpress","tag-creer-un-widget","tag-creer-un-widget-wordpress","tag-widgets-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-criar-widget-wordpress\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/creer-un-widget-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/crear-widgets-wordpress-personalizados\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/create-wordpress-custom-widget\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/create-wordpress-custom-widget\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-create-custom-widget-in-wordpress\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/crear-widgets-wordpress-personalizados\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/crear-widgets-wordpress-personalizados\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/crear-widgets-wordpress-personalizados\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-criar-widget-wordpress\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/5764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/261"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=5764"}],"version-history":[{"count":15,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/5764\/revisions"}],"predecessor-version":[{"id":40976,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/5764\/revisions\/40976"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=5764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=5764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=5764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}