{"id":91445,"date":"2022-09-26T08:22:49","date_gmt":"2022-09-26T08:22:49","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/ajouter-un-pied-de-page-de-widget-a-votre-theme-wordpress\/"},"modified":"2022-09-26T08:22:49","modified_gmt":"2022-09-26T08:22:49","slug":"ajouter-un-pied-de-page-de-widget-a-votre-theme-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/ajouter-un-pied-de-page-de-widget-a-votre-theme-wordpress\/","title":{"rendered":"Ajouter un pied de page de widget \u00e0 votre th\u00e8me WordPress"},"content":{"rendered":"<div>\n<p>L&#8217;inspiration pour ce tutoriel vient d&#8217;un tweet que j&#8217;ai re\u00e7u avec des commentaires sur le prochain th\u00e8me RS12.<\/p>\n<p>Bien que le pied de page widgetis\u00e9 n&#8217;ait finalement pas \u00e9t\u00e9 int\u00e9gr\u00e9 \u00e0 la version du th\u00e8me RS12, j&#8217;ai d\u00e9cid\u00e9 d&#8217;\u00e9crire ce didacticiel pour montrer aux gens exactement comment ajouter un pied de page widgetis\u00e9 \u00e0 leur th\u00e8me.  Dans ce guide, vous apprendrez\u00a0:<\/p>\n<ul>\n<li>Le code HTML et CSS n\u00e9cessaire pour produire le pied de page widgetis\u00e9.<\/li>\n<li>Comment ajouter des balises de mod\u00e8le WordPress couramment utilis\u00e9es en tant qu&#8217;espaces r\u00e9serv\u00e9s<\/li>\n<li>Comment widgetiser le pied de page et placer des widgets \u00e0 l&#8217;int\u00e9rieur<\/li>\n<\/ul>\n<p>Il y aura beaucoup de code dans ce post, donc si vous \u00eates partant, lisez la suite&#8230;<\/p>\n<p>J&#8217;utiliserai le th\u00e8me WordPress Green Rays comme exemple dans ce tutoriel.  Pour le moment, le pied de page n&#8217;a qu&#8217;un message standard de &#8220;copyright&#8221; et des cr\u00e9dits.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"le_HTML\"><\/span>le HTML<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La premi\u00e8re \u00e9tape consiste \u00e0 ajouter le balisage HTML.  Disons que nous allons avoir trois sections diff\u00e9rentes dans le pied de page avec des widgets r\u00e9pertoriant les derniers messages, les archives mensuelles et les archives quotidiennes.  Nous placerons ce code HTML au-dessus de la ligne &#8220;copyright&#8221; actuelle.<\/p>\n<p>Fondamentalement, ce code place chaque &#8220;widget&#8221; dans une div.  \u00c0 l&#8217;int\u00e9rieur de chaque widget se trouvent un en-t\u00eate et une liste non ordonn\u00e9e avec des liens.  Oui, je sais que les liens ne vont nulle part.  Nous remplacerons cela plus tard par des balises de mod\u00e8le WordPress.  Voici ce que nous avons jusqu&#8217;\u00e0 pr\u00e9sent\u00a0:<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" loading=\"lazy\" alt=\"Rayons verts Pied de page 1\" width=\"400\" height=\"129\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/12\/1639226290_212_Agregue-un-pie-de-pagina-con-widget-a-su-tema.png\"\/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"le_CSS\"><\/span>le CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Comme vous pouvez le voir, cela n&#8217;a pas l&#8217;air aussi bien sans style CSS.  Ajoutez le code suivant \u00e0 votre feuille de style.<\/p>\n<p>.footer-item {<br \/>flotteur gauche\u00a0;<br \/>largeur : 33 % ;<br \/>arri\u00e8re-plan rembourr\u00e9\u00a0: 10px\u00a0;<br \/>}<br \/>.footer-item ul {<br \/>rembourrage \u00e0 gauche\u00a0: 15\u00a0px\u00a0;<br \/>}<\/p>\n<p>Ce que fait ce code est de faire flotter chaque \u00e9l\u00e9ment de pied de page vers la gauche, ce qui signifie essentiellement qu&#8217;ils peuvent \u00eatre c\u00f4te \u00e0 c\u00f4te.  La largeur est d\u00e9finie sur 33\u00a0%, ce qui laisse suffisamment de place pour trois \u00e9l\u00e9ments de pied de page sur une seule ligne.  Un peu de rembourrage est \u00e9galement ajout\u00e9 sous chaque \u00e9l\u00e9ment de pied de page.  La deuxi\u00e8me pi\u00e8ce consiste simplement \u00e0 remplir les listes de 15 pixels vers la gauche. <\/p>\n<p>Vous pouvez maintenant voir que HTML et CSS commencent \u00e0 se rejoindre.  Voici ce que vous devriez avoir jusqu&#8217;\u00e0 pr\u00e9sent\u00a0:<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" loading=\"lazy\" alt=\"Pied de page Rayons verts 2\" width=\"400\" height=\"61\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/12\/1639226290_366_Agregue-un-pie-de-pagina-con-widget-a-su-tema.png\"\/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Code_WordPress\"><\/span>Code WordPress<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Pour le moment, nous avons un tas de liens HTML vides, sans code WordPress r\u00e9el.  Rempla\u00e7ons les listes dans les publications r\u00e9centes, les archives mensuelles et les archives quotidiennes par les balises de mod\u00e8le WordPress \u00e9quivalentes.  Remplacez ce que vous avez actuellement par ce qui suit\u00a0:<\/p>\n<p>Les param\u00e8tres devraient \u00eatre assez explicites, mais si vous n&#8217;\u00eates pas s\u00fbr de l&#8217;un d&#8217;entre eux, essayez de rechercher wp_get_archives dans l&#8217;outil de recherche de balises de mod\u00e8le WordPress.  N&#8217;oubliez pas que j&#8217;utilise simplement les balises de mod\u00e8le wp_get_archives() comme espace r\u00e9serv\u00e9.  Nous les \u00e9changerons avec d&#8217;autres widgets WordPress plus tard, apr\u00e8s avoir ajout\u00e9 le pied de page.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Widgetiser\"><\/span>Widgetiser<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Pour cette section du didacticiel, j&#8217;emprunterai des parties de mon pr\u00e9c\u00e9dent didacticiel sur le th\u00e8me du widget.<\/p>\n<p>La premi\u00e8re \u00e9tape consiste \u00e0 enregistrer les &#8220;barres lat\u00e9rales&#8221;.  Pour ce faire, remplacez simplement le contenu actuel du fichier functions.php par ce qui suit :<\/p>\n<p><?php <br \/?>if(function_exists(&#8216;register_sidebar&#8217;))<br \/>register_sidebar(tableau(<br \/>&#8216;nom&#8217; => &#8216;Barre lat\u00e9rale&#8217;,<br \/>&#8216;avant_widget&#8217; => &#8216;<\/p>\n<p>&#8216;,<br \/>&#8216;before_title&#8217; => &#8216;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%E2%80%98_%E2%80%98after_title_%3E_%E2%80%98\"><\/span>&#8216;,<br \/>&#8216;after_title&#8217; => &#8216;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>&#8216;,<br \/>));<br \/>if(function_exists(&#8216;register_sidebar&#8217;))<br \/>register_sidebar(tableau(<br \/>&#8216;nom&#8217; => &#8216;Pied de page&#8217;,<br \/>&#8216;avant_widget&#8217; => &#8216;<\/p>\n<p>&#8216;,<br \/>&#8216;before_title&#8217; => &#8216;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%E2%80%98_%E2%80%98after_title_%3E_%E2%80%98-2\"><\/span>&#8216;,<br \/>&#8216;after_title&#8217; => &#8216;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>&#8216;,<br \/>));<br \/>?><\/p>\n<p>Nous allons maintenant aller sur sidebar.php et remplacer la balise conditionnelle actuelle de la barre lat\u00e9rale dynamique par ceci\u00a0:<\/p>\n<p>Avec \u00e7a:<\/p>\n<p>Nous allons maintenant entrer dans notre fichier footer.php et envelopper les \u00e9l\u00e9ments de pied de page dans leur propre balise conditionnelle de barre lat\u00e9rale respective.  Juste avant le premier div &#8220;\u00e9l\u00e9ment de barre lat\u00e9rale&#8221;, ajoutez ce qui suit.<\/p>\n<p>Juste apr\u00e8s la derni\u00e8re div &#8220;footer-item&#8221; de fermeture (et au-dessus de la div &#8220;clear&#8221; que nous avons ajout\u00e9e plus t\u00f4t), nous ajouterons ce qui suit\u00a0:<\/p>\n<p>Ok, maintenant le pied de page de la barre lat\u00e9rale devrait avoir un widget.  Testons-le en ajoutant des widgets dans le pied de page.  Je vais ajouter un widget Blogroll, un widget Commentaires r\u00e9cents et un widget Texte.  Voici \u00e0 quoi cela devrait ressembler\u00a0:<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" loading=\"lazy\" alt=\"Pied de page Rayons verts 3\" width=\"400\" height=\"82\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/12\/1639226290_185_Agregue-un-pie-de-pagina-con-widget-a-su-tema.png\"\/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"conclusion\"><\/span>conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Eh bien, c&#8217;est la base de l&#8217;ajout d&#8217;un pied de page widget \u00e0 votre th\u00e8me.  Vous pouvez ajouter des r\u00e8gles de style distinctes pour d&#8217;autres types de widgets, tels que le calendrier ou le champ de recherche.  Cela ne fonctionnera probablement pas avec tous les th\u00e8mes, comme le th\u00e8me RS12 par exemple, car il avait un pied de page non extensible.<\/p>\n<p>Si quelqu&#8217;un veut par hasard le th\u00e8me Green Rays mis \u00e0 jour, il peut le t\u00e9l\u00e9charger ici.  De cette fa\u00e7on, vous pouvez voir exactement o\u00f9 j&#8217;ai ajout\u00e9 le code.  Vous pouvez \u00e9galement le comparer au th\u00e8me original.<\/p>\n<p>J&#8217;esp\u00e8re que vous avez aim\u00e9 le tutoriel.  Ajouterez-vous un pied de page widgetis\u00e9 \u00e0 votre th\u00e8me\u00a0?  Y a-t-il quelque chose dans le code que j&#8217;ai utilis\u00e9 ci-dessus que je ferais diff\u00e9remment?  Les questions, commentaires, suggestions et critiques sont les bienvenus, alors n&#8217;h\u00e9sitez pas \u00e0 vous exprimer dans les commentaires.<\/p>\n<\/p><\/div>\n  <div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 ez-toc-wrap-center counter-flat ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogging-techies.com\/fr\/ajouter-un-pied-de-page-de-widget-a-votre-theme-wordpress\/#le_HTML\" >le HTML<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogging-techies.com\/fr\/ajouter-un-pied-de-page-de-widget-a-votre-theme-wordpress\/#le_CSS\" >le CSS<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogging-techies.com\/fr\/ajouter-un-pied-de-page-de-widget-a-votre-theme-wordpress\/#Code_WordPress\" >Code WordPress<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blogging-techies.com\/fr\/ajouter-un-pied-de-page-de-widget-a-votre-theme-wordpress\/#Widgetiser\" >Widgetiser<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blogging-techies.com\/fr\/ajouter-un-pied-de-page-de-widget-a-votre-theme-wordpress\/#%E2%80%98_%E2%80%98after_title_%3E_%E2%80%98\" >&#8216;,&#8216;after_title&#8217; => &#8216;<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/blogging-techies.com\/fr\/ajouter-un-pied-de-page-de-widget-a-votre-theme-wordpress\/#%E2%80%98_%E2%80%98after_title_%3E_%E2%80%98-2\" >&#8216;,&#8216;after_title&#8217; => &#8216;<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/blogging-techies.com\/fr\/ajouter-un-pied-de-page-de-widget-a-votre-theme-wordpress\/#conclusion\" >conclusion<\/a><\/li><\/ul><\/nav><\/div>\n ","protected":false},"excerpt":{"rendered":"<p>L&#8217;inspiration pour ce tutoriel vient d&#8217;un tweet que j&#8217;ai re\u00e7u avec des commentaires sur le prochain th\u00e8me RS12. Bien que le pied de page widgetis\u00e9 n&#8217;ait finalement pas \u00e9t\u00e9 int\u00e9gr\u00e9 \u00e0 la version du th\u00e8me RS12, j&#8217;ai d\u00e9cid\u00e9 d&#8217;\u00e9crire ce didacticiel pour montrer aux gens exactement comment ajouter un pied de page widgetis\u00e9 \u00e0 leur [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":91446,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[274,947,14931,548,154,3074,45],"class_list":["post-91445","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogs","tag-ajouter","tag-page","tag-pied","tag-theme","tag-votre","tag-widget","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/91445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/comments?post=91445"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/posts\/91445\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media\/91446"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/media?parent=91445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/categories?post=91445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/fr\/wp-json\/wp\/v2\/tags?post=91445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}