{"id":229924,"date":"2022-11-16T10:14:00","date_gmt":"2022-11-16T07:14:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229924"},"modified":"2022-11-16T19:12:38","modified_gmt":"2022-11-16T16:12:38","slug":"modeles-wordpress-pour-debutants-html-appelant-php","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/modeles-wordpress-pour-debutants-html-appelant-php\/","title":{"rendered":"Mod\u00e8les WordPress pour d\u00e9butants : HTML appelant PHP"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/fr\/modeles-wordpress-pour-debutants-comment-cest\/\" title=\"Hier\">Hier<\/a>, j&rsquo;ai esquiss\u00e9 comment conceptualiser combien d&rsquo;entre nous sont probablement habitu\u00e9s \u00e0 travailler avec des mod\u00e8les WordPress.<\/p>\n<p>Bien que la s\u00e9paration des probl\u00e8mes avec CSS et JavaScript soit solide, les mod\u00e8les sont probl\u00e9matiques chaque fois qu&rsquo;il y a beaucoup de PHP m\u00e9lang\u00e9 \u00e0 notre balisage.<\/p>\n<p>Pour \u00eatre clair, nous ne pouvons pas nous emp\u00eacher d&rsquo;inclure des balises de mod\u00e8le car c&rsquo;est la nature du fonctionnement de WordPress et des syst\u00e8mes g\u00e9n\u00e9raux de gestion de contenu bas\u00e9s sur PHP.<\/p>\n<p>Le probl\u00e8me survient chaque fois que nous travaillons avec des mod\u00e8les contenant du code effectuant des appels plus complexes \u00e0 diverses API. Bien que je l&rsquo;aie d\u00e9montr\u00e9 en utilisant <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/WP_Query\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WP_Query<\/a> (et que je continuerai \u00e0 le faire), ce n&rsquo;est pas seulement cette requ\u00eate.<\/p>\n<p>Quoi qu&rsquo;il en soit, qu&rsquo;est-ce qu&rsquo;on est cens\u00e9 faire avec \u00e7a ?<\/p>\n<h2>Templates WordPress: quand HTML appelle PHP<\/h2>\n<p>Tout d&rsquo;abord, il est important de r\u00e9fl\u00e9chir \u00e0 la raison pour laquelle m\u00e9langer autant de PHP et de balisage est une mauvaise id\u00e9e.<\/p>\n<p>Il est facile de dire qu&rsquo;il est plus difficile de garder le code <a href=\"https:\/\/en.wikipedia.org\/wiki\/Don%27t_repeat_yourself\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">DRY<\/a> (et il y a du vrai l\u00e0-dedans), mais que se passe-t-il si nous n&rsquo;utilisons qu&rsquo;une seule requ\u00eate ou un seul bloc de code une fois\u00a0? Est-ce vraiment si important d&rsquo;\u00eatre SEC ?<\/p>\n<p>Pour \u00eatre clair, oui, je pense que c&rsquo;est important pour garder le code DRY, mais si nous n&rsquo;utilisons un appel qu&rsquo;une seule fois, je pense toujours que c&rsquo;est important si pour aucune autre raison que de garder le code du mod\u00e8le aussi propre que possible.<\/p>\n<p>Pensez-y de cette fa\u00e7on\u00a0: chaque fois que nous voulons afficher le titre, le contenu et l&rsquo;auteur du message, il nous suffit d&rsquo;appeler trois fonctions\u00a0:<\/p>\n<ul>\n<li><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/the_title\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">le titre();<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_content\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">le contenu();<\/a><\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/the_author_meta\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">the_author_meta();<\/a><\/li>\n<\/ul>\n<p>Imaginez donc adapter <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2c02b22272f645076f7f735bd61a4034#file-00-content-container-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">le code suivant<\/a> (c&rsquo;est ce que nous avons vu dans le post pr\u00e9c\u00e9dent):<\/p>\n<pre><code>&lt;div id=\"content-container\"&gt;\n\n  &lt;p&gt;\n    Oh! The garbage chute was a really wonderful idea. What an incredible smell you've discovered! Let's get out of here! \n    Get away from there... No! wait! Will you forget it? I already tried it. It's magnetically sealed! Put that \n    thing away! You're going to get us all killed.\n  &lt;\/p&gt;\n\n  &lt;h2&gt;List of Post Titles For Acme Post Type&lt;\/h2&gt;\n  &lt;?php\n  $args = array(\n    'post_status'    =&gt; 'publish',\n    'post_type'      =&gt; 'acme',\n    'posts_per_page' =&gt; '10'\n  );\n  $custom_query = new WP_Query( $args );\n\n  if ($custom_query-&gt;have_posts()) {\n    echo '&lt;ul&gt;';\n    while ($custom_query-&gt;have_posts()) {\n      $custom_query-&gt;the_post();\n      echo '&lt;li&gt;'. get_the_title(). '&lt;\/li&gt;';\n    }\n    echo '&lt;\/ul&gt;';\n    wp_reset_postdata();\n  }\n  ?&gt;\n\n  &lt;p&gt;\n    Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not \n    going to take them long to figure out what happened to us. It could be worst... It's worst. \n    There's something alive in here! That's your imagination. Something just moves past my leg! \n    Look! Did you see that? What? Help!\n  &lt;\/p&gt;\n\n&lt;\/div&gt;&lt;!-- #content-container --&gt;<\/code><\/pre>\n<p>Pour ressembler \u00e0 quelque chose comme \u00e7a :<\/p>\n<pre><code>&lt;div id=\"content-container\"&gt;\n\n  &lt;p&gt;\n    Oh! The garbage chute was a really wonderful idea. What an incredible smell you've discovered! Let's get out of here! \n    Get away from there... No! wait! Will you forget it? I already tried it. It's magnetically sealed! Put that \n    thing away! You're going to get us all killed.\n  &lt;\/p&gt;\n\n  &lt;h2&gt;List of Post Titles For Acme Post Type&lt;\/h2&gt;\n  &lt;?php acme_get_titles(); ?&gt;\n\n  &lt;p&gt;\n    Absolutely, Your Worship. Look, I had everything under control until you led us down here. You know, it's not \n    going to take them long to figure out what happened to us. It could be worst... It's worst. \n    There's something alive in here! That's your imagination. Something just moves past my leg! \n    Look! Did you see that? What? Help!\n  &lt;\/p&gt;\n\n&lt;\/div&gt;&lt;!-- #content-container --&gt;<\/code><\/pre>\n<p>Beaucoup plus propre, non? Mais il y a plus \u00e0 ce que vous voyez que cela. Plus pr\u00e9cis\u00e9ment, si nous allons travailler avec HTML en coulisses, nous devons nous assurer que nous le d\u00e9sinfectons <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2c02b22272f645076f7f735bd61a4034#file-02-acme-get-titles-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">correctement<\/a> en utilisant quelque chose comme <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_kses\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_kses<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/**\n * Runs a custom query to get the most recent ten published articles of the\n * acme post type and then prints a sanitized list of the the titles.\n *\/\nfunction acme_get_titles()\n{\n\n  $args = array(\n    'post_status'    =&gt; 'publish',\n    'post_type'      =&gt; 'acme',\n    'posts_per_page' =&gt; '10'\n  );\n  $custom_query = new WP_Query( $args );\n\n  if ($custom_query-&gt;have_posts()) {\n    $html = '&lt;ul&gt;';\n    while ($custom_query-&gt;have_posts()) {\n      $custom_query-&gt;the_post();\n      $html .= '&lt;li&gt;'. get_the_title(). '&lt;\/li&gt;';\n    }\n    $html .= '&lt;\/ul&gt;';\n    wp_reset_postdata();\n  }\n\n  echo _acme_sanitize_titles($html);\n}\n\n\/**\n * Uses the WordPress wp_kses() API to sanitize and echo the incoming markup.\n *\n * @param string $html The HTML to sanitize.\n *\/\nfunction _acme_sanitize_titles($html) {\n\n  if(empty($html)) {\n    echo $html;\n  }\n\n  echo wp_kses(\n    $html,\n    array(\n      'ul' =&gt; array(),\n      'li' =&gt; array(),\n    );\n  );\n}<\/code><\/pre>\n<p>Maintenant, l&rsquo;id\u00e9e de faire \u00e9cho du HTML de PHP dans un mod\u00e8le WordPress est consid\u00e9r\u00e9e comme un anti-mod\u00e8le par certains d\u00e9veloppeurs. Et ce n&rsquo;est pas sans m\u00e9rite.<\/p>\n<p>Il y a cependant un \u00e9quilibre \u00e0 jouer au cours de cette s\u00e9rie: il s&rsquo;agit d&rsquo;introduire la fa\u00e7on dont les gens pr\u00e9sentent souvent l&rsquo;information, puis de la nettoyer un peu.<\/p>\n<p>Pour aller un peu plus loin, il est possible \u2013 et pas du tout une mauvaise id\u00e9e \u2013 de s\u00e9parer encore plus la fonction WP_Query pour utiliser <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_template_part\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">get_template_part<\/a>. Cela comporte un peu de code plus propre, mais n\u00e9cessite \u00e9galement que nous examinions cette fonction en profondeur.<\/p>\n<p>Et c&rsquo;est quelque chose que je ne suis pas int\u00e9ress\u00e9 \u00e0 faire dans cette s\u00e9rie particuli\u00e8re.<\/p>\n<h2>Comment devrions-nous visualiser cela\u00a0?<\/h2>\n<p>En ce qui concerne les mod\u00e8les, nous pouvons conceptualiser cela de diff\u00e9rentes mani\u00e8res.<\/p>\n<ol>\n<li>Dans certains langages de mod\u00e8les, il est utile de penser que PHP injecte les informations dans le mod\u00e8le,<\/li>\n<li>Dans l&rsquo;exemple ci-dessus, il est utile de penser au fichier mod\u00e8le demandant les informations du script PHP.<\/li>\n<\/ol>\n<p>Ainsi, dans l&rsquo;exemple ci-dessus, nous avons une fonction situ\u00e9e dans, disons, <strong>functions.php<\/strong> et le fichier de mod\u00e8le qui l&rsquo;appelle\u00a0:<\/p>\n<p>Avoir du sens\u00a0? Mais comment cela est accompli &#8211; en termes de code derri\u00e8re cet appel de fonction unique &#8211; se contente d&rsquo;un article \u00e0 part enti\u00e8re.<\/p>\n<p>Et c&rsquo;est ce que je vais voir dans le post suivant.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comprendre comment les mod\u00e8les WordPress appellent les fichiers PHP peut nous aider \u00e0 \u00e9crire du code DRY, mais aussi du code plus facile \u00e0 lire et plus simple \u00e0 entretenir.<\/p>\n","protected":false},"author":1,"featured_media":223984,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,832,841,862],"tags":[1167],"class_list":["post-229924","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-guide-pour-les-debutants","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/229924","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=229924"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/229924\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/223984"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=229924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=229924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=229924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}