{"id":234272,"date":"2023-02-25T10:45:00","date_gmt":"2023-02-25T07:45:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=234272"},"modified":"2022-11-12T03:08:17","modified_gmt":"2022-11-12T00:08:17","slug":"tutoriel-sur-le-theme-wordpress-pour-les-debutants-partie-10-ajout-de-plus-de-modeles","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/tutoriel-sur-le-theme-wordpress-pour-les-debutants-partie-10-ajout-de-plus-de-modeles\/","title":{"rendered":"Tutoriel sur le th\u00e8me WordPress pour les d\u00e9butants \u2013 Partie 10 : Ajout de plus de mod\u00e8les"},"content":{"rendered":"\n<p>Dans cette le\u00e7on du didacticiel sur le th\u00e8me WordPress pour les d\u00e9butants, nous allons nous plonger davantage dans les mod\u00e8les. Nous allons en apprendre davantage sur les composants de mod\u00e8le et les impl\u00e9menter pour les r\u00e9utiliser. Et nous ajouterons plus de mod\u00e8les par d\u00e9faut de WordPress \u00e0 notre th\u00e8me.<\/p>\n<p>Mais avant de commencer \u00e0 ajouter d&rsquo;autres fichiers de mod\u00e8le, nous devons savoir pourquoi nous devrions nous soucier des <strong>\u00e9l\u00e9ments de mod\u00e8le<\/strong>.<\/p>\n<h2>Pi\u00e8ces de mod\u00e8le\u00a0: blocs de construction plus flexibles<\/h2>\n<p>Les parties de mod\u00e8le fonctionnent exactement comme <code>get_header()<\/code>et <code>get_footer()<\/code>dont nous avons <a href=\"http:\/\/awhitepixel.com\/blog\/wordpress-theme-tutorial-for-beginners-part-2-building-blocks\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">entendu parler dans la partie 2<\/a>, mais ne sont pas limit\u00e9es \u00e0 ces fichiers. Vous pouvez utiliser des \u00e9l\u00e9ments de mod\u00e8le pour le fichier de votre choix\u00a0!<\/p>\n<p>Les th\u00e8mes utilisent g\u00e9n\u00e9ralement une partie de mod\u00e8le pour les publications en boucle. Habituellement, de nombreux mod\u00e8les tels que la cat\u00e9gorie, les archives et les r\u00e9sultats de recherche affichent g\u00e9n\u00e9ralement chaque message en boucle de la m\u00eame mani\u00e8re. C&rsquo;est donc une tr\u00e8s bonne id\u00e9e de s\u00e9parer la sortie de la boucle post dans un seul fichier. De cette fa\u00e7on, vous n&rsquo;avez pas \u00e0 le r\u00e9p\u00e9ter dans chaque mod\u00e8le.<\/p>\n<p>&quot;Convertissons&quot; une partie de notre code existant en parties de mod\u00e8le avant de commencer \u00e0 cr\u00e9er d&rsquo;autres mod\u00e8les\u00a0!<\/p>\n<h2>Cr\u00e9ation d&rsquo;un composant de mod\u00e8le de boucle de publication<\/h2>\n<p>Cr\u00e9ez un nouveau fichier vide dans notre dossier de th\u00e8me\u00a0; appel\u00e9 <code>content-loop.php<\/code>. Vous pouvez nommer les parties du mod\u00e8le comme vous le souhaitez. Mais vous ne pouvez pas les nommer de la m\u00eame mani\u00e8re que n&rsquo;importe lequel des <a href=\"https:\/\/codex.wordpress.org\/File:Template_Hierarchy.png#file\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">mod\u00e8les d\u00e9finis par WordPress<\/a>. Dans notre <code>index.php<\/code>, localisez tout ce que vous avez \u00e0 l&rsquo;int\u00e9rieur de la boucle, d\u00e9coupez-le et collez-le \u00e0 l&rsquo;int\u00e9rieur <code>content-loop.php<\/code>.<\/p>\n<p>\u00c0 l&rsquo;int\u00e9rieur de la boucle maintenant vide dans <code>index.php<\/code>, utilisez l&rsquo;appel de fonction <code>get_template_part()<\/code>et d\u00e9finissez votre fichier de pi\u00e8ce de mod\u00e8le en tant que param\u00e8tre (sans l&rsquo; <code>.php<\/code>extension). Voici \u00e0 quoi cela devrait ressembler dans les deux fichiers\u00a0:<\/p>\n<pre><code>...\n    while (have_posts()): the_post(); \n        get_template_part('content-loop');\n    endwhile;\n    the_posts_pagination();\n...<\/code><\/pre>\n<pre><code>&lt;article &lt;?php post_class(); ?&gt;&gt;\n    &lt;h2&gt;&lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title(); ?&gt;\"&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;\n    &lt;?php if (has_post_thumbnail()) {\n        the_post_thumbnail();\n    } ?&gt;\n    &lt;?php the_excerpt(); ?&gt;\n    &lt;?php the_category(); ?&gt;\n&lt;\/article&gt;<\/code><\/pre>\n<p>Si vous actualisez votre page d&rsquo;accueil, vous ne devriez voir absolument aucune diff\u00e9rence.<\/p>\n<p>Super! Maintenant que notre <code>index.php<\/code>est beau et propre, nous pouvons l&rsquo;utiliser comme base pour le dupliquer dans plus de mod\u00e8les. Ci-dessous, je vais expliquer comment ajouter un mod\u00e8le de cat\u00e9gorie et un mod\u00e8le de r\u00e9sultats de recherche, mais je vous encourage \u00e0 cr\u00e9er plus de mod\u00e8les pour plus de contr\u00f4le sur la conception de votre th\u00e8me.<\/p>\n<h2>Ajout d&rsquo;un mod\u00e8le de cat\u00e9gorie<\/h2>\n<p>Si vous vous r\u00e9f\u00e9rez \u00e0 la <a href=\"https:\/\/codex.wordpress.org\/File:Template_Hierarchy.png#file\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">hi\u00e9rarchie des mod\u00e8les de WordPress<\/a>, vous pouvez voir que pour les cat\u00e9gories de publication, WordPress recherchera le mod\u00e8le nomm\u00e9 <code>category.php<\/code>. Nous allons d&rsquo;abord cr\u00e9er celui-ci.<\/p>\n<p>Dans votre dossier de th\u00e8me, faites une copie du <code>index.php<\/code>fichier et renommez la copie <code>category.php<\/code>.<\/p>\n<p>Et c&rsquo;est tout. Vous avez pratiquement termin\u00e9\u2026\u00a0!<\/p>\n<p>Cependant, nous ajouterons un d\u00e9tail; nous voulons afficher un titre qui nous indique que nous sommes sur une page de cat\u00e9gorie pour les articles de la cat\u00e9gorie nomm\u00e9e X. WordPress a une fonction pour cela que vous pouvez utiliser dans tous les mod\u00e8les d&rsquo;archives (cat\u00e9gorie, balises, archives de date), <code>the_archive_title<\/code>. Ajoutons-le avant la boucle, \u00e0 l&rsquo;int\u00e9rieur d&rsquo;une <code>&lt;h1&gt;<\/code>balise.<\/p>\n<pre><code>&lt;?php get_header(); ?&gt;\n&lt;h1&gt;&lt;?php the_archive_title(); ?&gt;&lt;\/h1&gt;\n&lt;?php\nif (have_posts()) {\n...<\/code><\/pre>\n<p>Si vous affichez une page de cat\u00e9gorie de publication, vous devriez voir quelque chose comme ceci, avec le titre d&rsquo;archive &quot;Cat\u00e9gorie\u00a0:&quot;. PS\u00a0: Si vous souhaitez modifier la sortie du titre de l&rsquo;archive (par exemple, ne pas afficher &quot;Cat\u00e9gorie\u00a0:\u00a0&quot;), vous pouvez ajouter un filtre \u00e0 <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/get_the_archive_title\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">get_the_archive_title<\/a>. La page de documentation montre un excellent exemple de la fa\u00e7on de proc\u00e9der.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7239f1b.png\"><\/a><\/p>\n<p>Eh bien, c&rsquo;\u00e9tait facile! G\u00e9rons ensuite le mod\u00e8le de r\u00e9sultats de recherche.<\/p>\n<h2>Ajout d&rsquo;un mod\u00e8le de r\u00e9sultats de recherche<\/h2>\n<p>La proc\u00e9dure est exactement la m\u00eame que pour les mod\u00e8les de cat\u00e9gories. Cette fois, faites une copie de <code>category.php<\/code>et renommez la copie en <code>search.php<\/code>.<\/p>\n<p>Tout ce que nous devons corriger, c&rsquo;est le titre. La fonction de titre d&rsquo;archive que nous avons utilis\u00e9e dans le mod\u00e8le de cat\u00e9gorie ne fonctionne malheureusement pas tr\u00e8s bien pour le mod\u00e8le de r\u00e9sultats de recherche. En fait, il n&rsquo;existe pas de fonction simple dans WordPress qui g\u00e9n\u00e8re un titre pour nous.<\/p>\n<p>Mais nous pouvons facilement en cr\u00e9er un nous-m\u00eames, et en m\u00eame temps, je montrerai comment g\u00e9n\u00e9rer une variable dynamique tout en gardant le texte traduisible.<\/p>\n<p>PHP a deux fonctions utiles, <code>printf()<\/code>et <code>sprintf()<\/code>. Ils font la m\u00eame chose, sauf qu&rsquo;ils <code>printf<\/code>le sortent (comme echo) et <code>sprintf<\/code>le renvoient, nous pouvons donc le stocker dans une variable. Apr\u00e8s avoir mis le texte comme premiers param\u00e8tres, nous pouvons ajouter des variables dynamiques comme arguments, qui sont ensuite inject\u00e9es dans le texte. \u00c0 l&rsquo;int\u00e9rieur de ceux-ci, nous pouvons utiliser les fonctions de texte traduisible <code>__()<\/code>et <code>_e()<\/code>. Je vous recommande de lire un peu le fonctionnement de <a href=\"https:\/\/www.php.net\/manual\/en\/function.printf.php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">printf<\/a> ou <a href=\"https:\/\/www.php.net\/manual\/en\/function.sprintf.php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sprintf<\/a>, car je n&rsquo;entrerai pas dans les d\u00e9tails ici.<\/p>\n<p>WordPress propose une fonction simple pour obtenir la cha\u00eene qui a \u00e9t\u00e9 recherch\u00e9e ; <code>get_search_query()<\/code>. Cela dit, rempla\u00e7ons la fonction de titre d&rsquo;archive par ceci ;<\/p>\n<pre><code>&lt;h1&gt;&lt;?php printf(__('Search: %s', 'wptutorial'), get_search_query()); ?&gt;&lt;\/h1&gt;<\/code><\/pre>\n<p>Ce que fait le code ci-dessus est de l&rsquo;int\u00e9rieur vers l&rsquo;ext\u00e9rieur\u00a0; d\u00e9finir un texte traduisible \u00ab\u00a0Rechercher\u00a0:\u00a0%s\u00a0\u00bb qui est plac\u00e9 \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un <code>printf<\/code>qui fait \u00e9cho \u00e0 la cha\u00eene, et remplace la cha\u00eene constante (<code>%s<\/code>) par le deuxi\u00e8me argument\u00a0; qui est <code>get_search_query()<\/code>.<\/p>\n<p>En cons\u00e9quence, nous obtenons un titre comme celui-ci lors de la recherche de &quot;er&quot;:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7331b74.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7331b74.png\" alt=\"Tutoriel sur le th\u00e8me WordPress pour les d\u00e9butants \u2013 Partie 10 : Ajout de plus de mod\u00e8les\" ><\/a><\/p>\n<p>Agr\u00e9able! Un autre mod\u00e8le fait. Quant \u00e0 la derni\u00e8re partie de cette le\u00e7on, nous allons entrer dans notre mod\u00e8le de publication unique et ajouter quelque chose de tr\u00e8s courant dans WordPress ; le mod\u00e8le de commentaires.<\/p>\n<h2>Ajout d&rsquo;un mod\u00e8le de commentaires \u00e0 un seul article<\/h2>\n<p>Dans notre <code>single.php<\/code>, apr\u00e8s l&rsquo;article de publication, nous voulons afficher les commentaires. Les commentaires doivent g\u00e9n\u00e9rer une liste des commentaires pr\u00e9c\u00e9dents et un formulaire pour ajouter un nouveau commentaire.<\/p>\n<p>Le mod\u00e8le de commentaires est un fichier de mod\u00e8le que vous pouvez ajouter \u00e0 votre th\u00e8me, mais WordPress a en fait sa propre sortie de mod\u00e8le de commentaires par d\u00e9faut. Si vous n&rsquo;en avez pas <code>comments.php<\/code>dans votre th\u00e8me, demander le mod\u00e8le de commentaires renverra la sortie par d\u00e9faut de WordPress pour celui-ci. C&rsquo;est ce que nous allons faire dans ce tutoriel.<\/p>\n<p>Nous ne voulons appeler le mod\u00e8le de commentaires que si la publication a des commentaires activ\u00e9s (c&rsquo;est un param\u00e8tre pour chaque publication et un param\u00e8tre global du site). Nous ajoutons donc une v\u00e9rification if pour v\u00e9rifier si les commentaires sont autoris\u00e9s avec <code>comments_open()<\/code>et s&rsquo;il renvoie true, nous demandons un mod\u00e8le de commentaires avec <code>comments_template()<\/code>. Gardez \u00e0 l&rsquo;esprit que tout cela doit se produire dans la boucle. Je l&rsquo;ai ajout\u00e9 apr\u00e8s la fin de <code>&lt;\/article&gt;<\/code>, juste avant la fermeture de la boucle.<\/p>\n<pre><code>...\n        &lt;p&gt;&lt;?php _e('Author', 'wptutorial'); ?&gt;: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n    &lt;\/article&gt;\n    &lt;?php \n    if (comments_open()) {\n        comments_template();\n    }\n    endwhile;\n} else {\n    ?&gt;&lt;p&gt;&lt;?php _e('No posts, sorry.', 'wptutorial'); ?&gt;&lt;\/p&gt;&lt;?php\n...<\/code><\/pre>\n<p>Si vous visitez un seul article qui a autoris\u00e9 les commentaires (j&rsquo;ai ajout\u00e9 un commentaire juste pour vous montrer \u00e9galement la liste des commentaires); vous obtiendrez ce magnifique (ahem) mod\u00e8le de commentaires par d\u00e9faut\u00a0:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7412986.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7412986.png\" alt=\"Tutoriel sur le th\u00e8me WordPress pour les d\u00e9butants \u2013 Partie 10 : Ajout de plus de mod\u00e8les\" ><\/a><\/p>\n<p>Maintenant, vous pouvez (et c&rsquo;est souvent encourag\u00e9) cr\u00e9er le v\u00f4tre <code>comments.php<\/code>dans votre th\u00e8me, ce qui remplacera la sortie par d\u00e9faut de WordPress. Cependant, je ne vais pas cr\u00e9er de mod\u00e8le de commentaires dans ce didacticiel, car la sortie par d\u00e9faut de WordPress fonctionne tr\u00e8s bien tant que vous la stylisez correctement. Si vous inspectez le code HTML, de nombreux wrappers et classes sont disponibles.<\/p>\n<h2>Documentation sur les m\u00e9thodes utilis\u00e9es<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_template_part\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">get_template_part<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_archive_title\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">the_archive_title<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_search_query\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">get_search_query<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/comments_open\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">comments_open<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/comments_template\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">commentaires_template<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cette le\u00e7on, nous allons en apprendre davantage sur les parties de mod\u00e8le et cr\u00e9er plus de mod\u00e8les pour notre th\u00e8me WordPress. Nous ajouterons \u00e9galement un mod\u00e8le de commentaires \u00e0 la vue de publication unique.<\/p>\n","protected":false},"author":1,"featured_media":223663,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,893,717,717,832,915,1110,832,925,925,841,841,862,862],"tags":[1167],"class_list":["post-234272","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-guide-pour-les-debutants","category-n-a","category-sujets","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=234272"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/234272\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/223663"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=234272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=234272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=234272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}