{"id":231398,"date":"2022-12-22T18:11:00","date_gmt":"2022-12-22T15:11:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231398"},"modified":"2022-12-22T18:11:33","modified_gmt":"2022-12-22T15:11:33","slug":"widgets-wordpress-refactorisation-partie-13","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/widgets-wordpress-refactorisation-partie-13\/","title":{"rendered":"Widgets WordPress : refactorisation, partie 13"},"content":{"rendered":"\n<p>Nous sommes enfin au dernier article de la s\u00e9rie sur la refactorisation du WordPress Widget Boilerplate. \u00c0 la fin de cet article, nous aurons termin\u00e9 la branche de d\u00e9veloppement de notre code et nous serons pr\u00eats \u00e0 tout fusionner dans la branche principale.<\/p>\n<p>Il reste cependant encore un peu de travail \u00e0 faire. <a href=\"https:\/\/wordpress.mediadoma.com\/fr\/widgets-wordpress-refactorisation-partie-12\/\" title=\"A savoir\">A savoir<\/a> :<\/p>\n<blockquote>\n<p>La derni\u00e8re chose que nous allons examiner apr\u00e8s cela est de resserrer une partie de la logique conditionnelle avec un mot sur la mise en cache des donn\u00e9es (puisque nous en faisons d\u00e9j\u00e0 un peu dans les articles pr\u00e9c\u00e9dents).<\/p>\n<\/blockquote>\n<p>Ce sont donc les deux choses que nous allons examiner dans cet article. Plus pr\u00e9cis\u00e9ment, nous allons examiner la gestion de la logique conditionnelle pour le frontal, puis la mise en \u0153uvre de la mise en cache de base.<\/p>\n<h2>Le passe-partout du widget WordPress\u00a0: refactorisation de la partie\u00a013<\/h2>\n<p>Avant d&rsquo;entrer dans la derni\u00e8re s\u00e9rie de d\u00e9tails, je veux m&rsquo;assurer que vous ex\u00e9cutez <a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/tree\/develop\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la derni\u00e8re version du code<\/a> car c&rsquo;est la seule fois o\u00f9 je pense qu&rsquo;il est imp\u00e9ratif que le code soit pr\u00eat pour la derni\u00e8re s\u00e9rie de modifications.<\/p>\n<p>Donc, si vous n&rsquo;avez pas le code en cours d&rsquo;ex\u00e9cution sur votre machine, c&rsquo;est le moment. Le dernier morceau de code sur lequel nous devons travailler est assez petit.<\/p>\n<p>Mais il est important de vous assurer que vous utilisez la derni\u00e8re version. Donc, une fois que vous avez extrait le dernier code, nous sommes pr\u00eats \u00e0 conclure.<\/p>\n<h3>1 Rendu du Front-End<\/h3>\n<p>Rappelez-vous dans le post pr\u00e9c\u00e9dent, nous avons rendu les informations g\u00e9n\u00e9rales du widget &#8211; le titre, le contenu et si le titre doit \u00eatre affich\u00e9 ou non &#8211; en affichant simplement les valeurs sur le front-end.<\/p>\n<p>Mais maintenant, il est temps de configurer les informations pour s&rsquo;assurer que nous n&rsquo;allons pas seulement rendre les informations en fonction des options de la zone d&rsquo;administration du widget, mais aussi s&rsquo;il y a des informations.<\/p>\n<p>Nous allons donc commencer par l&rsquo;option la plus simple: L&rsquo;option qui nous permet de basculer si le titre est affich\u00e9. En d&rsquo;autres termes, nous allons supposer que les valeurs sont renseign\u00e9es et que cette option est coch\u00e9e dans le backend.<\/p>\n<p>Pour rappel, le fichier <strong>Widget.php ressemble actuellement<\/strong> <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-00-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00e0 ceci<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/*\n * This file is part of WordPress Widget Boilerplate\n * (c) Tom McFarlin &lt;tom@tommcfarlin.com&gt;\n *\n * This source file is subject to the GPL license that is bundled\n * with this source code in the file LICENSE.\n *\/\n?&gt;\n&lt;div id=\"&lt;?php echo $args['id']; ?&gt;\"&gt;\n    &lt;h3 class=\"widget-title\"&gt;&lt;?php echo $instance['title']; ?&gt;&lt;\/h3&gt;\n    &lt;p&gt;&lt;?php echo $instance['content']; ?&gt;&lt;\/p&gt;\n    &lt;pre&gt;&lt;?php echo $instance['display-title']; ?&gt;&lt;\/pre&gt;\n&lt;\/div&gt;&lt;!-- #&lt;?php echo $args['id']; ?&gt;--&gt;\n<\/code><\/pre>\n<p>Nous allons donc d&rsquo;abord refactoriser cette partie. Bien s\u00fbr, c&rsquo;est une chose relativement facile \u00e0 introduire, n&rsquo;est-ce pas? C&rsquo;est-\u00e0-dire que la logique est la suivante\u00a0:<\/p>\n<ul>\n<li>Si l&rsquo;option d&rsquo;affichage du titre est coch\u00e9e, nous affichons le titre ; sinon, nous ne le faisons pas.<\/li>\n<\/ul>\n<p>Cela peut \u00eatre r\u00e9solu avec une simple\u00a0 instruction <strong>if<\/strong> en \u00e9valuant la valeur de l&rsquo;\u00a0 option <strong>display-title<\/strong> que nous avons. En raison de la fa\u00e7on dont nous avons construit la fonction tout au long de cette s\u00e9rie, si l&rsquo;option est coch\u00e9e, elle a l&rsquo;option <strong>on<\/strong> ; sinon, c&rsquo;est vide.<\/p>\n<p>Cela signifie que nous pouvons configurer une condition comme celle-ci dans le m\u00eame code que nous avons <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-01-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">partag\u00e9 ci-dessus<\/a>\u00a0:<\/p>\n<pre><code>&lt;?php\n\n\/*\n * This file is part of WordPress Widget Boilerplate\n * (c) Tom McFarlin &lt;tom@tommcfarlin.com&gt;\n *\n * This source file is subject to the GPL license that is bundled\n * with this source code in the file LICENSE.\n *\/\n?&gt;\n&lt;div id=\"&lt;?php echo $args['id']; ?&gt;\"&gt;\n  &lt;?php if (isset($instance['display-title']) &amp;&amp; 'on' === $instance['display-title']): ?&gt;\n        &lt;h3 class=\"widget-title\"&gt;&lt;?php echo $instance['title']; ?&gt;&lt;\/h3&gt;\n    &lt;?php endif; ?&gt;\n    &lt;p&gt;&lt;?php echo $instance['content']; ?&gt;&lt;\/p&gt;\n&lt;\/div&gt;&lt;!-- #&lt;?php echo $args['id']; ?&gt;--&gt;\n<\/code><\/pre>\n<p>Ainsi, si l&rsquo;option est coch\u00e9e, le titre sera affich\u00e9.<\/p>\n<h3>Un corollaire \u00e0 ceci<\/h3>\n<p>Je pense qu&rsquo;une chose qui m\u00e9rite d&rsquo;\u00eatre mentionn\u00e9e est qu&rsquo;il y a des moments o\u00f9 les gens peuvent activer des widgets mais choisir de n&rsquo;avoir aucun contenu. Bien s\u00fbr, vous pouvez dire que s&rsquo;ils font cela, c&rsquo;est de leur faute.<\/p>\n<p>Il y a du vrai l\u00e0-dedans.<\/p>\n<p>Mais je pense aussi que prendre soin des utilisateurs qui peuvent comprendre des choses ou qui ont peut-\u00eatre accidentellement fait quelque chose qu&rsquo;ils ne savaient pas peut les aider. Peut-\u00eatre que cela fait de nous des d\u00e9veloppeurs responsables (ou peut-\u00eatre que cela nous rend plus agressifs \u2013 faites votre choix, je suis avec le premier).<\/p>\n<p>Donc, dans ce cas, je pense qu&rsquo;il vaut la peine de s&rsquo;assurer que le titre et le contenu ne sont pas vides. Si c&rsquo;est le cas, ne rendez rien.<\/p>\n<p>Le code ressemble alors <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-02-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00e0 ceci<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/*\n * This file is part of WordPress Widget Boilerplate\n * (c) Tom McFarlin &lt;tom@tommcfarlin.com&gt;\n *\n * This source file is subject to the GPL license that is bundled\n * with this source code in the file LICENSE.\n *\/\n?&gt;\n\n&lt;?php if (empty($instance['title']) &amp;&amp; empty($instance['content'])): return;\nendif; ?&gt;\n\n&lt;div id=\"&lt;?php echo $args['id']; ?&gt;\"&gt;\n    &lt;?php if (isset($instance['display-title']) &amp;&amp; 'on' === $instance['display-title']): ?&gt;\n        &lt;h3 class=\"widget-title\"&gt;&lt;?php echo $instance['title']; ?&gt;&lt;\/h3&gt;\n    &lt;?php endif; ?&gt;\n    &lt;p&gt;&lt;?php echo $instance['content']; ?&gt;&lt;\/p&gt;\n&lt;\/div&gt;&lt;!-- #&lt;?php echo $args['id']; ?&gt;--&gt;\n<\/code><\/pre>\n<p>Et cela conclura cela en ce qui concerne le front-end. Mais qu&rsquo;en est-il de la mise en cache dont nous avons parl\u00e9 dans un article pr\u00e9c\u00e9dent ?<\/p>\n<h3>2 Pr\u00e9sentation de la mise en cache<\/h3>\n<p>La mise en cache, pour un widget comme celui-ci, est quelque chose que je consid\u00e8re comme facultatif, mais puisque nous avons int\u00e9gr\u00e9 la fonctionnalit\u00e9 de base dans le Boilerplate pour vider le cache, il s&rsquo;ensuit logiquement d&rsquo;introduire la fonctionnalit\u00e9 de mise en cache des donn\u00e9es, n&rsquo;est-ce pas\u00a0?<\/p>\n<p>Alors faisons \u00e7a. Cela ne devrait pas \u00eatre difficile non plus. En r\u00e9alit\u00e9, nous prenons simplement le titre, le contenu et la case \u00e0 cocher et mettons en cache les valeurs pour l&rsquo;instance donn\u00e9e du widget.<\/p>\n<p>Pour ce faire, nous devons localiser la fonction du <strong>widget<\/strong>, puis proc\u00e9der comme suit\u00a0:<\/p>\n<p>Tout d&rsquo;abord, nous allons introduire <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-03-cache-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">une fonction pour mettre en cache le widget<\/a>\u00a0:<\/p>\n<pre><code>&lt;?php\n\n\/**\n * Caches the values for the instance of this widget.\n *\n * @param array $args     argument provided by WordPress that may be useful in rendering the widget\n * @param array $instance the values of the widget\n *\/\nprivate function cacheWidget($args, $instance)\n{\n    $cache = [];\n    $cache['widget_id'] = $args['widget_id'];\n    $cache['title'] = empty($instance['title'])? '': $instance['title'];\n    $cache['content'] = empty($instance['content'])? '': $instance['content'];\n\n    $instance['display-title'] = isset($instance['display-title'])? $instance['display-title']: '';\n    $cache['display-title'] = $instance['display-title'];\n\n    wp_cache_set($this-&gt;getWidgetSlug(), $cache, 'widget');\n}<\/code><\/pre>\n<p>Ensuite nous introduirons une fonction pour r\u00e9cup\u00e9rer <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-04-get-cached-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la version en cache du widget<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/**\n * @return array the cached instance of this widget if it's not empty\n *\/\nprivate function getCachedWidget()\n{\n    $cache = wp_cache_get($this-&gt;getWidgetSlug(), 'widget');\n    if (!empty($cache)) {\n        return $cache;\n    }\n    return [];\n}<\/code><\/pre>\n<p>Ensuite, nous revisitons la fonction d&rsquo;origine pour nous assurer que nous affichons ce qui est n\u00e9cessaire. Si le cache est vide, nous ne faisons rien d&rsquo;autre que d&rsquo;afficher les valeurs <a href=\"https:\/\/gist.github.com\/tommcfarlin\/2f6bbe19253188596f804a7c211d9cd5#file-05-widget-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">telles qu&rsquo;elles sont<\/a>.<\/p>\n<pre><code>&lt;?php\n\n\/**\n * Displays the widget based on the contents of the included template.\n *\n * @param array $args     argument provided by WordPress that may be useful in rendering the widget\n * @param array $instance the values of the widget\n *\/\npublic function widget($args, $instance)\n{\n    \/\/ Get a cached version of the widget. If it's empty, cache what we have.\n    $cache = $this-&gt;getCachedWidget();\n    if (empty($cache)) {\n        $this-&gt;cacheWidget($args, $instance);\n    }\n\n    return $this-&gt;widgetDisplay-&gt;show($args, $instance);\n}<\/code><\/pre>\n<p>Et cela r\u00e9sume la fonctionnalit\u00e9 du Widget Boilerplate enti\u00e8rement remani\u00e9.<\/p>\n<h2>La fin<\/h2>\n<p>Ce s\u00e9rieux particulier a \u00e9t\u00e9 long. Personnellement, cela a \u00e9t\u00e9 vraiment bien de revoir le WordPress Widget Boilerplate et de le mettre \u00e0 des normes plus modernes.<\/p>\n<p>Il me reste encore quelques choses \u00e0 faire, comme mettre \u00e0 jour le fichier README, puis fournir quelques instructions suppl\u00e9mentaires avant de le fusionner dans la\u00a0 branche <strong>principale<\/strong>, mais si vous avez suivi toute cette s\u00e9rie, alors vous \u00eates probablement \u00e0 bord avec tout. De plus, j&rsquo;appr\u00e9cie le temps que vous y avez pass\u00e9 et j&rsquo;esp\u00e8re que cela vous a \u00e9t\u00e9 b\u00e9n\u00e9fique \u00e0 certains niveaux.<\/p>\n<p>Cela dit, je chercherai \u00e0 passer \u00e0 un contenu premium plus court, car cette s\u00e9rie et la derni\u00e8re ont \u00e9t\u00e9 assez longues. Comme d&rsquo;habitude, vous pouvez toujours me contacter ou proposer des demandes d&rsquo;extraction si n\u00e9cessaire &#8211; c&rsquo;est open source et il accueille \u00e9galement des am\u00e9liorations.<\/p>\n<p>Pour l&rsquo;instant, cependant, cela conclut cette s\u00e9rie.<\/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>Ici, nous finalisons la version mise \u00e0 jour du WordPress Widget Boilerplate en mettant \u00e0 jour ce que les utilisateurs voient sur le front-end et en travaillant avec la mise en cache.<\/p>\n","protected":false},"author":1,"featured_media":236089,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,717,841,862],"tags":[1167],"class_list":["post-231398","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/231398","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=231398"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/231398\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/236089"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=231398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=231398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=231398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}