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<\/blockquote>\n
Et cela nous pr\u00e9pare exactement o\u00f9 nous nous dirigeons dans ce poste particulier. A savoir, nous allons \u00e9crire un front-end administratif qui nous permet de :<\/p>\n
- \n
- d\u00e9finir un titre pour le widget,<\/li>\n
- d\u00e9finir le contenu textuel du widget,<\/li>\n
- et basculez si nous voulons ou non afficher le titre.<\/li>\n<\/ul>\n
Il n’est pas cens\u00e9 \u00eatre innovant ni \u00eatre le type de widget que quelqu’un d’autre pourrait vouloir vendre. Au lieu de cela, il est destin\u00e9 \u00e0 montrer comment nous pouvons prendre ce que nous avons pour cr\u00e9er quelque chose de similaire \u00e0 ce que nous avons d\u00e9j\u00e0 vu dans WordPress et comment nous utilisons des pratiques de programmation solides.<\/p>\n
L’interface utilisateur\u00a0: un premier passage<\/h3>\n
Apr\u00e8s notre travail la derni\u00e8re fois, nous avons un widget qui appara\u00eet dans la zone administrative de WordPress et il peut m\u00eame \u00eatre d\u00e9plac\u00e9 dans une barre lat\u00e9rale ou une autre zone widgetis\u00e9e ; cependant, cela ne fait rien.<\/p>\n
Pour l’instant, allons-y et ajoutons trois \u00e9l\u00e9ments \u00e0 l’interface utilisateur\u00a0:<\/p>\n
- \n
- ajouter une entr\u00e9e de texte pour le titre du widget,<\/li>\n
- inclure un \u00e9l\u00e9ment textarea pour afficher ce qui peut \u00eatre un paragraphe de texte,<\/li>\n
- et enfin, ajoutez une case \u00e0 cocher pour basculer les informations sur le titre.<\/li>\n<\/ol>\n
Pour ce faire, nous devrons \u00e9diter un fichier dans le\u00a0 r\u00e9pertoire Views<\/strong>. A savoir, nous allons mettre \u00e0 jour le\u00a0 fichier Admin.php<\/strong>. Nous commencerons avec les \u00e9l\u00e9ments<\/a> exactement comme n\u00e9cessaire sans aucun balisage superflu.<\/p>\n
<input type=\"text\" name=\"widget-title\" value=\"\" \/>\n\n<textarea name=\"widget-content\"><\/textarea>\n\n<label>\n <input\n type=\"checkbox\"\n value=\"1\"\n name=\"widget-title-enabled\"\n \/>\n Display Title?\n<\/label><\/code><\/pre>\nCela ne fera pas grand-chose \u00e0 regarder sur le front-end, mais cela nous rapproche de l’endroit o\u00f9 nous voulons \u00eatre.<\/p>\n
Une classe pour les administrateurs<\/h3>\n
Ensuite, nous voulons nous assurer que nous restons coh\u00e9rents en maintenant un haut niveau de coh\u00e9sion avec nos classes. Cela signifie que nous n’avons pas besoin d’une seule classe pour tout faire pour l’administration, l’affichage et tous les autres travaux requis par l’API WordPress.<\/p>\n
\u00c0 cette fin, nous allons cr\u00e9er une deuxi\u00e8me classe appel\u00e9e WidgetAdmin<\/strong> dans le\u00a0 r\u00e9pertoire et l’espace de noms WordPress<\/strong>.<\/p>\n
Dans ce fichier, nous inclurons le code suivant<\/a>\u00a0:<\/p>\n
<?php\n\n\/*\n * This file is part of WordPress Widget Boilerplate\n * (c) Tom McFarlin <tom@tommcfarlin.com>\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\n\/**\n * Manages the administrative functionality of the widget.\n *\/\nclass WidgetAdmin extends Widget\n{\n \/**\n * {@inheritdoc}\n *\/\n public function __construct($widgetSlug)\n {\n parent::__construct($widgetSlug);\n }\n\n \/**\n * Displays the administrative view of the form and includes the options\n * for the instance of the widget as arguments passed into the function.\n *\n * @param array $instance the options for the instance of this widget.\n *\/\n public function form($instance)\n {\n include plugin_dir_path(__FILE__).'Views\/Admin.php';\n }\n}\n<\/code><\/pre>\nEnsuite, dans le code original d’instanciation de notre widget, nous allons changer cette ligne<\/a> :<\/p>\n
<?php\n\n\/**\n * Registers the core Widget class using the WordPress APIs.\n *\/\npublic function load()\n{\n register_widget(new Widget('widget-name'));\n}<\/code><\/pre>\nPour ressembler \u00e0 \u00e7a<\/a> :<\/p>\n
<?php\n\/**\n * Registers the core Widget class using the WordPress APIs.\n *\/\npublic function load()\n{\n register_widget(new WidgetAdmin('widget-name'));\n}<\/code><\/pre>\nAu cours des prochains articles, cela va continuer \u00e0 \u00e9voluer mais, comme vous pouvez le voir, nous nous assurons d’avoir une seule classe de fonctionnalit\u00e9s de base pour parler avec WordPress et une classe sp\u00e9cifiquement pour rendre le formulaire administratif.<\/p>\n
L’interface utilisateur\u00a0: une deuxi\u00e8me passe<\/h3>\n
Enfin, nettoyons le formulaire afin qu’il ait un peu plus d’exp\u00e9rience utilisateur solide qui s’int\u00e8gre bien \u00e0 la zone d’administration de WordPress dans son ensemble.<\/p>\n
Prenez le code suivant<\/a> :<\/p>\n
<input type=\"text\" name=\"widget-title\" value=\"\" \/>\n\n<textarea name=\"widget-content\"><\/textarea>\n\n<label>\n <input\n type=\"checkbox\"\n value=\"1\"\n name=\"widget-title-enabled\"\n \/>\n Display Title?\n<\/label><\/code><\/pre>\n
![\"Widgets](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-160909-61e71613309d7.png\")
<\/a><\/p>\n