Ensuite, nous allons examiner le rendu du contenu sur le front-end. Nous approchons de la fin de la refactorisation du Boilerplate mais il reste juste un peu plus \u00e0 faire avant que nous soyons pr\u00eats \u00e0 le fusionner dans la branche master de la base de code.<\/p>\n<\/blockquote>\n
Donc dans ce post, on va reprendre l\u00e0. Maintenant, si vous avez suivi jusqu’\u00e0 ce point, vous devriez avoir tout ce dont vous avez besoin de la branche de d\u00e9veloppement.<\/p>\n
Sinon, assurez-vous de le tirer car c’est l\u00e0 que nous allons reprendre dans le reste du message.<\/p>\n
Le passe-partout du widget WordPress\u00a0: refactorisation de la partie 12<\/h2>\n
Maintenant, en ce qui concerne le front-end, il est facile de consid\u00e9rer le front-end comme tout ce que l’utilisateur voit devant lui, que ce soit dans la zone administrative ou non.<\/p>\n
Cependant, cette s\u00e9rie a clairement indiqu\u00e9 que nous divisons ce que l’utilisateur voit entre la zone administrative et la zone publique du site.<\/p>\n
Donc, ce que nous allons faire, c’est travailler sur la zone du code qui affiche des informations pour l’utilisateur sur la zone publique du site. Nous allons commencer par simplement lire les informations et les afficher.<\/p>\n
Ensuite, dans le prochain article, nous verrons comment travailler avec la logique conditionnelle concernant certaines des options pour voir s’il y a quelque chose que nous devons faire.<\/p>\n
Cela dit, passons au code.<\/p>\n
Sur les donn\u00e9es que nous afficherons<\/h3>\n
N’oubliez pas que le widget, \u00e0 ce stade, a trois choses qui influencent son affichage\u00a0:<\/p>\n
- \n
- le titre du widget,<\/li>\n
- le contenu du widget,<\/li>\n
- une bascule pour savoir si nous devons ou non afficher le titre<\/li>\n<\/ol>\n
La troisi\u00e8me option consiste principalement \u00e0 montrer comment utiliser un type d’\u00e9l\u00e9ment diff\u00e9rent. Parce que, techniquement, si nous ne voulions pas afficher le titre du widget, nous ne mettrions rien dans le widget.<\/p>\n
Mais je pense que cela aide \u00e0 montrer comment utiliser diff\u00e9rents types d’\u00e9l\u00e9ments et leurs valeurs de mani\u00e8re pratique (ou semi-pratique).<\/p>\n
Quoi qu’il en soit, cela dit, nous savons que pour chaque instance donn\u00e9e du widget, les donn\u00e9es sont stock\u00e9es avec le titre<\/strong> ,\u00a0 le contenu<\/strong> et\u00a0 le nom et les identifiants du titre d’affichage fournis par WordPress.<\/strong><\/p>\n
Ainsi, nous utiliserons ceux de notre code frontal pour afficher les valeurs.<\/p>\n
Pr\u00e9paration des fonctions d’affichage<\/h3>\n
En r\u00e8gle g\u00e9n\u00e9rale, la\u00a0 fonction widget<\/strong> est responsable de l’affichage de la sortie du widget. Mais l’une des choses que nous avons essay\u00e9 de faire est de s\u00e9parer les pr\u00e9occupations de notre widget en un ensemble plus cibl\u00e9 de classes et de fonctions.<\/p>\n
La premi\u00e8re chose que nous voulons faire est d’\u00e9crire une\u00a0 classe WidgetDisplay<\/strong> qui sera charg\u00e9e, comme cela est s\u00fbrement \u00e9vident, d’afficher le contenu du widget.<\/p>\n
Pour l’instant, cela inclura inconditionnellement le titre, le contenu et la valeur d’inclure ou non le titre. WordPress met \u00e9galement \u00e0 disposition certains contenus comme le balisage qui doit appara\u00eetre avant le widget et apr\u00e8s le widget, nous nous assurerons donc de l’inclure \u00e9galement.<\/p>\n
Mais d’abord, effa\u00e7ons la classe<\/a> :<\/p>\n
<?php\n\nnamespace WordPressWidgetBoilerplateWordPress;\n\nclass WidgetDisplay\n{\n private $widgetSlug;\n\n public function __construct(string $widgetSlug)\n {\n $this->widgetSlug = $widgetSlug;\n }\n\n public function show($args, $instance)\n {\n \/\/ More to come\n }\n}\n<\/code><\/pre>\nApr\u00e8s cela, nous devons nous assurer que nous l’\u00e9crivons \u00e9galement aux autres classes. Tout d’abord, nous nous assurerons de l’inclure dans notre classe Widget<\/a> :<\/p>\n
<?php\npublic function widget($args, $instance)\n{\n return $this->widgetDisplay->show($args, $instance);\n}<\/code><\/pre>\nEt puis nous l’ajouterons \u00e0 la classe WidgetAdmin<\/a> (puisque c’est l\u00e0 que r\u00e9sident les principales fonctions de l’API Widget – cela d\u00e9l\u00e8gue simplement la responsabilit\u00e9 \u00e0 la classe appropri\u00e9e):<\/p>\n
<?php\n\npublic function __construct($widgetSlug)\n{\n parent::__construct($widgetSlug);\n $this->widgetSerializer = new WidgetSerializer($this->getWidgetSlug());\n $this->widgetDisplay = new WidgetDisplay($this->getWidgetSlug());\n}<\/code><\/pre>\n\u00c0 ce stade, nous n’affichons encore rien. Nous sommes proches et nous nous concentrerons l\u00e0-dessus bient\u00f4t.<\/p>\n
Affichage des donn\u00e9es<\/h3>\n
En supposant que vous puissiez ajouter le code ci-dessus sans erreur, il est temps d’afficher le contenu du widget.<\/p>\n
Nous pouvons le faire de plusieurs fa\u00e7ons, d’un simple var_dump<\/strong> \u00e0 un travail r\u00e9el pour afficher le contenu d’une mani\u00e8re plus conviviale. Et je suis beaucoup plus fan de ce dernier.<\/p>\n
Alors faisons \u00e7a.<\/p>\n
Dans la\u00a0 fonction show<\/strong> de votre\u00a0 classe WidgetDisplay<\/strong>, ajoutez le code suivant<\/a> :<\/p>\n
<?php\npublic function show($args, $instance)\n{\n include_once 'Views\/Widget.php';\n}<\/code><\/pre>\n
![\"Widgets](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160763-61e7125f80aab.png\")
<\/a><\/p>\n