{"id":231270,"date":"2022-12-19T17:38:00","date_gmt":"2022-12-19T14:38:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231270"},"modified":"2022-12-19T17:38:29","modified_gmt":"2022-12-19T14:38:29","slug":"widgets-wordpress-refactorisation-partie-8","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/widgets-wordpress-refactorisation-partie-8\/","title":{"rendered":"Widgets WordPress : refactorisation, partie 8"},"content":{"rendered":"\n<p>En ce qui concerne la refactorisation du WordPress Widget Boilerplate, nous avons fait beaucoup de travail pour amener la base de code \u00e0 une norme plus orient\u00e9e objet. De plus, nous avons introduit une vari\u00e9t\u00e9 d&rsquo;autres outils qui nous permettent d&rsquo;adapter notre code \u00e0 des normes plus modernes.<\/p>\n<p>Maintenant que nous avons pass\u00e9 du temps \u00e0 le faire, il est temps de revenir dans le code et de commencer \u00e0 le refactoriser de mani\u00e8re \u00e0 permettre l&rsquo;utilisation de <a href=\"https:\/\/wordpress.mediadoma.com\/fr\/classes-abstraites-partie-1-comportement-dabstraction\/\" title=\"classes abstraites\">classes abstraites<\/a> et d&rsquo;abonn\u00e9s (qui fonctionnent dans le cadre du <a href=\"https:\/\/wordpress.mediadoma.com\/fr\/les-bases-des-crochets-daction-dans-wordpress\/\" title=\"mod\u00e8le de conception pilot\u00e9 par les \u00e9v\u00e9nements\">mod\u00e8le de conception pilot\u00e9 par les \u00e9v\u00e9nements<\/a> ).<\/p>\n<p>A la fin du message pr\u00e9c\u00e9dent, j&rsquo;ai \u00e9crit :<\/p>\n<blockquote>\n<p>Dans les prochains articles, nous verrons comment nous pouvons impl\u00e9menter des abonn\u00e9s pour le c\u00f4t\u00e9 public du site (c&rsquo;est-\u00e0-dire l\u00e0 o\u00f9 le contenu du widget est affich\u00e9). Et nous ferons de m\u00eame pour la zone d&rsquo;administration du site.<\/p>\n<\/blockquote>\n<p>Donc, dans cet article, nous allons faire exactement cela. Plus pr\u00e9cis\u00e9ment, nous allons commencer par travailler sur un abonn\u00e9 pour le widget, puis faire en sorte que le widget de base s&rsquo;affiche d&rsquo;abord du c\u00f4t\u00e9 administratif du site.<\/p>\n<h2>Le passe-partout du widget WordPress\u00a0: refactorisation, partie 8<\/h2>\n<p>La raison pour laquelle je souhaite me concentrer d&rsquo;abord sur le c\u00f4t\u00e9 administratif du site est que cela nous permet de\u00a0:<\/p>\n<ul>\n<li>comprendre le fonctionnement des abonn\u00e9s,<\/li>\n<li>voir comment la base de code devra \u00eatre organis\u00e9e,<\/li>\n<li>coder en dur certaines informations avant de travailler avec la s\u00e9rialisation.<\/li>\n<\/ul>\n<p>Une fois que tout cela sera en place, nous serons en bonne position pour porter notre attention sur des choses plus avanc\u00e9es. \u00c0 savoir, nous pourrons introduire des abonn\u00e9s pour afficher des informations dans la zone d&rsquo;administration et des abonn\u00e9s pour nettoyer, s\u00e9rialiser, r\u00e9cup\u00e9rer, valider et afficher des donn\u00e9es.<\/p>\n<p>Mais d&rsquo;abord, faisons le travail n\u00e9cessaire pour mettre en place une nouvelle classe, configurer le chargeur automatique et afficher le contenu dans la zone administrative du site.<\/p>\n<h3>1 L&rsquo;abonn\u00e9 abstrait<\/h3>\n<p><a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-00-abstract-subscriber-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Examinons d&rsquo;<\/a> abord l&rsquo;abonn\u00e9 abstrait, car c&rsquo;est ce que tous les abonn\u00e9s impl\u00e9menteront.<\/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\nnamespace WordPressWidgetBoilerplateSubscriber;\n\n\/**\n * An abstract implementation of a subscriber that requires a hook and the ability to\n * start the class.\n *\/\nabstract class AbstractSubscriber\n{\n    \/**\n     * @var string a reference to the hook to which the subscriber should be registered\n     *\/\n    protected $hook;\n\n    \/**\n     * @param string $hook the hook to which the subscriber is registered\n     *\/\n    public function __construct(string $hook)\n    {\n        $this-&gt;hook = $hook;\n    }\n\n    \/**\n     * @return string the hook to which the subscriber is registered\n     *\/\n    public function getHook(): string\n    {\n        return $this-&gt;hook;\n    }\n\n    \/**\n     * Implements the domain logic for the concrete class implementating this subcriber.\n     *\/\n    abstract public function load();\n}\n<\/code><\/pre>\n<p>Notez qu&rsquo;il a deux fonctions publiques &#8211; la construction qui d\u00e9finit le crochet et une fonction pour r\u00e9cup\u00e9rer le crochet. Il a \u00e9galement une fonction de chargement abstraite qui est l&rsquo;endroit o\u00f9 toute classe qui \u00e9tend cette classe impl\u00e9mente sa fonctionnalit\u00e9 sp\u00e9cifique.<\/p>\n<p>Rappelez-vous qu&rsquo;en raison de la fa\u00e7on dont WordPress g\u00e8re les actions et les filtres, tout est attach\u00e9 \u00e0 un crochet sp\u00e9cifique (soit ceux <a href=\"https:\/\/codex.wordpress.org\/Plugin_API\/Hooks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">que WordPress d\u00e9finit<\/a>, soit des crochets personnalis\u00e9s).<\/p>\n<h3>2 L&rsquo;espace de noms WordPress<\/h3>\n<p>Chaque fois que je travaille sur une fonctionnalit\u00e9 \u00e9troitement li\u00e9e \u00e0 WordPress, j&rsquo;essaie de m&rsquo;assurer de la placer dans un espace de noms WordPress. Cela m&rsquo;indique, ainsi qu&rsquo;aux autres d\u00e9veloppeurs, que tout ce qui r\u00e9side dans cet espace de noms ne peut pas \u00eatre s\u00e9par\u00e9 de l&rsquo;application principale.<\/p>\n<p>Donc, dans le\u00a0 r\u00e9pertoire <strong>src<\/strong>, cr\u00e9ez un\u00a0 r\u00e9pertoire <strong>WordPress<\/strong>. C&rsquo;est l\u00e0 que la classe Widget de base r\u00e9sidera avec toutes les autres classes introduites tout au long de cette s\u00e9rie.<\/p>\n<p>Cela signifie que nous n&rsquo;avons plus besoin de la classe dans le r\u00e9pertoire de l&rsquo;API. Assurez-vous donc de d\u00e9placer la classe, de mettre \u00e0 jour son espace de noms et de supprimer le r\u00e9pertoire. J&rsquo;aurai une capture d&rsquo;\u00e9cran et du code pour cela un peu plus tard.<\/p>\n<p>De plus, rappelez-vous plus t\u00f4t dans la s\u00e9rie, nous avons plac\u00e9 le\u00a0 r\u00e9pertoire <strong>Views<\/strong> \u00e0 la racine du\u00a0 r\u00e9pertoire <strong>src<\/strong>, mais maintenant nous pouvons le d\u00e9placer vers le\u00a0 r\u00e9pertoire <strong>WordPress<\/strong>. Alors allez-y et faites-le maintenant.<\/p>\n<p>Le r\u00e9sultat final devrait ressembler \u00e0 ceci\u00a0:<\/p>\n<p>Nous pouvons maintenant porter notre attention sur le code.<\/p>\n<h3>3 Un regard sur la classe Widget<\/h3>\n<p>Nous allons simplifier un peu la classe principale des widgets dans cet article. Cela va annuler une partie du travail que nous avons fait, mais nous avions besoin de ce travail ant\u00e9rieur pour arriver \u00e0 ce point.<\/p>\n<p>Pour l&rsquo;instant, nous nous concentrons sur le constructeur et la fonction de r\u00e9cup\u00e9ration du slug de widget. C&rsquo;est ce qui nous permettra finalement de voir quelque chose dans la zone administrative de WordPress.<\/p>\n<p>Donc, d&rsquo;abord, assurez-vous que votre classe Widget ressemble <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-01-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\nnamespace WordPressWidgetBoilerplateWordPress;\n\nuse WP_Widget;\n\nclass Widget extends WP_Widget\n{\n    \/**\n     * @var string unique identifier for your widget\n     *\/\n    protected $widgetSlug;\n\n    \/**\n     * Initializes the plugin by setting its properties and calling the parent class with the description.\n     *\n     * @param mixed $widgetSlug\n     *\/\n    public function __construct($widgetSlug)\n    {\n        $this-&gt;widgetSlug = $widgetSlug;\n\n        parent::__construct(\n            $this-&gt;getWidgetSlug(),\n            __('Widget Name', $this-&gt;getWidgetSlug()),\n            [\n                'classname' =&gt; $this-&gt;getWidgetSlug().'-class',\n                'description' =&gt; __('Short description of the widget goes here.', $this-&gt;getWidgetSlug()),\n            ]\n        );\n    }\n\n    \/**\n     * Return the widget slug.\n     *\n     * @return string slug variable\n     *\/\n    public function getWidgetSlug()\n    {\n        return $this-&gt;widgetSlug;\n    }\n}<\/code><\/pre>\n<p>Ensuite, puisque nous avons d\u00e9plac\u00e9 ce fichier vers l&rsquo;\u00a0 espace de noms <strong>WordPress<\/strong>, nous devons mettre \u00e0 jour la section autoload de <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-02-composer-json\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">notre fichier de configuration Composer<\/a> :<\/p>\n<pre><code>\"autoload\": {\n    \"psr-4\": {\n        \"WordPressWidgetBoilerplate\": \"src\/\",\n        \"WordPressWidgetBoilerplateUtilities\": \"src\/Utilities\/\",\n        \"WordPressWidgetBoilerplateSubscriber\": \"src\/Subscriber\/\",\n        \"WordPressWidgetBoilerplateWordPress\": \"src\/WordPress\/\"\n    }\n},<\/code><\/pre>\n<p>Ensuite, nous devons pr\u00e9senter un abonn\u00e9.<\/p>\n<h3>4 Pr\u00e9sentation de l&rsquo;abonn\u00e9 Widget<\/h3>\n<p>Chaque fois que j&rsquo;ai une classe principale quelconque, j&rsquo;essaie g\u00e9n\u00e9ralement de cr\u00e9er un abonn\u00e9 simple qui instancie la classe principale et lui permet de faire son travail.<\/p>\n<p>Je le fais parce que WordPress, comme mentionn\u00e9, utilise le mod\u00e8le de conception pilot\u00e9 par les \u00e9v\u00e9nements, ce qui signifie que tout doit \u00eatre enregistr\u00e9 sur un type de crochet. Et je n&rsquo;aime pas m\u00e9langer la logique de domaine avec la m\u00eame classe qui s&rsquo;accroche \u00e0 WordPress. Alors je les s\u00e9pare.<\/p>\n<p>Et c&rsquo;est ce que fait un abonn\u00e9. Il s&rsquo;enregistre aupr\u00e8s de WordPress puis invoque la classe responsable de l&rsquo;ex\u00e9cution du travail.<\/p>\n<p>Cela dit, portez votre attention sur le\u00a0 r\u00e9pertoire des <strong>abonn\u00e9s<\/strong> et ajoutez une classe appel\u00e9e <strong>WidgetSubscriber<\/strong>. Dans cette classe, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-03-widget-subscriber-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ajoutez le code suivant<\/a>\u00a0:<\/p>\n<pre><code>&lt;?php\n\n&lt;?php\n\nnamespace WordPressWidgetBoilerplateSubscriber;\n\nuse WordPressWidgetBoilerplateWordPressWidget;\n\n\/**\n * Initializes the core Widget class that's used by WordPress to instantiate the widget,\n * renders the administrative area, provide serialization functionality, and displays the\n * public-facing view.\n *\/\nclass WidgetSubscriber extends AbstractSubscriber\n{\n    \/**\n     * {@inheritdoc}\n     *\/\n    public function __construct(string $hook)\n    {\n        parent::__construct($hook);\n    }\n\n    \/**\n     * Registers the core Widget class using the WordPress APIs.\n     *\/\n    public function load()\n    {\n        register_widget(new Widget('widget-name'));\n    }\n}\n<\/code><\/pre>\n<p>Le constructeur enregistrera la classe avec un hook sp\u00e9cifique que nous verrons dans un instant ; puis il utilisera l&rsquo;API WordPress pour instancier notre widget (c&rsquo;est ce qui se passe dans la\u00a0 fonction de <strong>chargement<\/strong> ).<\/p>\n<h3>5 Le bootstrap<\/h3>\n<p>Enfin, nous devons mettre \u00e0 jour le bootstrap afin qu&rsquo;il\u00a0:<\/p>\n<ul>\n<li>enregistre le <strong>WidgetSubscriber<\/strong> avec le crochet appropri\u00e9,<\/li>\n<li>ajoute l&rsquo;abonn\u00e9 au <strong>Registre<\/strong> ,<\/li>\n<li>et d\u00e9marre le plugin (ce que nous avons fait).<\/li>\n<\/ul>\n<p>Le bootstrap, apr\u00e8s tout cela, devrait ressembler <a href=\"https:\/\/gist.github.com\/tommcfarlin\/f2e397e634ed2422d4840e6402a59fb9#file-04-bootstrap-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00e0 ceci<\/a> :<\/p>\n<pre><code>&lt;?php\n\nnamespace WordPressWidgetBoilerplate;\n\nuse WordPressWidgetBoilerplateUtilitiesRegistry;\nuse WordPressWidgetBoilerplatePlugin;\nuse WordPressWidgetBoilerplateSubscriberWidgetSubscriber;\n\n\/\/ Prevent this file from being called directly.\ndefined('WPINC') || die;\n\n\/\/ Include the autoloader.\nrequire_once __DIR__. '\/vendor\/autoload.php';\n\n\/\/ Setup a filter so we can retrieve the registry throughout the plugin.\n$registry = new Registry();\nadd_filter('wpwBoilerplateRegistry', function() use ($registry) {\n    return $registry;\n});\n\n\/\/ Add the Widget base class to the Registry.\n$registry-&gt;add('widgetSubscriber', new WidgetSubscriber('widgets_init'));\n\n\/\/ Start the machine.\n(new Plugin($registry))-&gt;start();<\/code><\/pre>\n<p>Ensuite, vous devriez pouvoir vous connecter \u00e0 WordPress et activer le plugin.<\/p>\n<h2>Un regard sur la zone administrative<\/h2>\n<p>\u00c0 ce stade, il n&rsquo;y a pas grand-chose \u00e0 regarder, mais nous y arrivons. Tout d&rsquo;abord, vous devez remarquer que le widget appara\u00eet maintenant dans la zone qui comprend les widgets disponibles\u00a0:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160941-61e7175c46bcc.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-160941-61e7175c46bcc.png\" alt=\"Widgets WordPress : refactorisation, partie 8\"><\/a><\/p>\n<p>Et vous devriez \u00e9galement voir que lorsque vous faites glisser le widget vers une zone widgetis\u00e9e (ou n&rsquo;importe quelle barre lat\u00e9rale), aucune option n&rsquo;est disponible.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160941-61e7175f91557.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-160941-61e7175f91557.png\" alt=\"Widgets WordPress : refactorisation, partie 8\"><\/a><\/p>\n<p>Cela dit, nous sommes bien plac\u00e9s pour continuer \u00e0 b\u00e2tir sur ce que nous avons. Vous pouvez toujours continuer \u00e0 suivre le d\u00e9veloppement du passe-partout <a href=\"https:\/\/github.com\/tommcfarlin\/WordPress-Widget-Boilerplate\/tree\/develop\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sur GitHub<\/a>.<\/p>\n<h2>Continuer<\/h2>\n<p>Ensuite, nous continuerons \u00e0 d\u00e9velopper des fonctionnalit\u00e9s pour la zone administrative du widget. Apr\u00e8s cela, nous porterons notre attention sur le c\u00f4t\u00e9 public du widget ainsi que sur la fonctionnalit\u00e9 de s\u00e9rialisation.<\/p>\n<p>Vous devriez \u00eatre en mesure de voir comment les choses commencent \u00e0 prendre forme alors que nous commen\u00e7ons \u00e0 s\u00e9parer la logique en ses diverses composantes. Sinon, ne vous inqui\u00e9tez pas &#8211; il y a beaucoup plus \u00e0 venir.<\/p>\n<p>Et la version finale du Boilerplate d\u00e9montrera bien s\u00fbr tous les principes sur lesquels nous nous appuyons tout au long de cette s\u00e9rie de publications.<\/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>Nous allons commencer \u00e0 s\u00e9parer les diff\u00e9rents composants qui entrent dans la composition des widgets WordPress en commen\u00e7ant par la zone administrative.<\/p>\n","protected":false},"author":1,"featured_media":234945,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[717,841,862],"tags":[1167],"class_list":["post-231270","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developpeur","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/231270","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=231270"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/231270\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/234945"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=231270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=231270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=231270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}