Widgets WordPress : refactorisation, partie 9

Bien que le dernier article de cette série de refactoring n’ait pas été incroyablement long, je pense qu’il était un peu dense. Autrement dit, il a fallu beaucoup de travail pour obtenir le code dans un endroit où nous pouvons plus facilement travailler avec.

Mais c’est juste ça: tout le travail que nous avons fait devrait permettre d’avancer plus facilement avec le reste du code que nous devons écrire.

Et pour nous assurer que nous profitons du travail et des bases que nous avons posés jusqu’à présent, nous allons compléter la série avec un ensemble d’articles plus courts et plus ciblés qui devraient prendre moins de temps à lire, à mettre en œuvre, et comprendre ce que nous faisons avec le code.

Le passe-partout du widget WordPress : refactorisation de la partie 9

Rappel du dernier post :

Ensuite, nous continuerons à développer des fonctionnalités pour la zone administrative du widget. Après cela, nous porterons notre attention sur le côté public du widget ainsi que sur la fonctionnalité de sérialisation.

Et cela nous prépare exactement où nous nous dirigeons dans ce poste particulier. A savoir, nous allons écrire un front-end administratif qui nous permet de :

• définir un titre pour le widget,
• définir le contenu textuel du widget,
• et basculez si nous voulons ou non afficher le titre.

Il n’est pas censé être innovant ni être le type de widget que quelqu’un d’autre pourrait vouloir vendre. Au lieu de cela, il est destiné à montrer comment nous pouvons prendre ce que nous avons pour créer quelque chose de similaire à ce que nous avons déjà vu dans WordPress et comment nous utilisons des pratiques de programmation solides.

L’interface utilisateur : un premier passage

Après notre travail la dernière fois, nous avons un widget qui apparaît dans la zone administrative de WordPress et il peut même être déplacé dans une barre latérale ou une autre zone widgetisée ; cependant, cela ne fait rien.

Pour l’instant, allons-y et ajoutons trois éléments à l’interface utilisateur :

1. ajouter une entrée de texte pour le titre du widget,
2. inclure un élément textarea pour afficher ce qui peut être un paragraphe de texte,
3. et enfin, ajoutez une case à cocher pour basculer les informations sur le titre.

Pour ce faire, nous devrons éditer un fichier dans le  répertoire Views. A savoir, nous allons mettre à jour le  fichier Admin.php. Nous commencerons avec les éléments exactement comme nécessaire sans aucun balisage superflu.

<input type="text" name="widget-title" value="" />

<textarea name="widget-content"></textarea>

<label>
    <input
        type="checkbox"
        value="1"
        name="widget-title-enabled"
    />
    Display Title?
</label>

Cela ne fera pas grand-chose à regarder sur le front-end, mais cela nous rapproche de l’endroit où nous voulons être.

Une classe pour les administrateurs

Ensuite, nous voulons nous assurer que nous restons cohérents en maintenant un haut niveau de cohésion 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.

À cette fin, nous allons créer une deuxième classe appelée WidgetAdmin dans le  répertoire et l’espace de noms WordPress.

Dans ce fichier, nous inclurons le code suivant :

<?php

/*
 * This file is part of WordPress Widget Boilerplate
 * (c) Tom McFarlin <tom@tommcfarlin.com>
 *
 * This source file is subject to the GPL license that is bundled
 * with this source code in the file LICENSE.
 */

namespace WordPressWidgetBoilerplateWordPress;

/**
 * Manages the administrative functionality of the widget.
 */
class WidgetAdmin extends Widget
{
    /**
     * {@inheritdoc}
     */
    public function __construct($widgetSlug)
    {
        parent::__construct($widgetSlug);
    }

    /**
     * Displays the administrative view of the form and includes the options
     * for the instance of the widget as arguments passed into the function.
     *
     * @param array $instance the options for the instance of this widget.
     */
    public function form($instance)
    {
        include plugin_dir_path(__FILE__).'Views/Admin.php';
    }
}

Ensuite, dans le code original d’instanciation de notre widget, nous allons changer cette ligne :

<?php

/**
 * Registers the core Widget class using the WordPress APIs.
 */
public function load()
{
    register_widget(new Widget('widget-name'));
}

Pour ressembler à ça :

<?php
/**
 * Registers the core Widget class using the WordPress APIs.
 */
public function load()
{
    register_widget(new WidgetAdmin('widget-name'));
}

Au cours des prochains articles, cela va continuer à évoluer mais, comme vous pouvez le voir, nous nous assurons d’avoir une seule classe de fonctionnalités de base pour parler avec WordPress et une classe spécifiquement pour rendre le formulaire administratif.

L’interface utilisateur : une deuxième passe

Enfin, nettoyons le formulaire afin qu’il ait un peu plus d’expérience utilisateur solide qui s’intègre bien à la zone d’administration de WordPress dans son ensemble.

Prenez le code suivant :

<input type="text" name="widget-title" value="" />

<textarea name="widget-content"></textarea>

<label>
    <input
        type="checkbox"
        value="1"
        name="widget-title-enabled"
    />
    Display Title?
</label>

Et mettez-le à jour pour qu’il ressemble à ceci :

<div class="widget-content">
    <p>
        <input
            type="text"
            name="widget-title"
            value=""
            placeholder="Widget Title"
            class="widefat"
        />
    </p>

    <p>
        <textarea
            name="widget-content"
            placeholder="Widget Content"
            style="width:100%;"></textarea>
    </p>

    <p>
        <input
            type="checkbox"
            value="1"
            name="widget-title-enabled"
            class="checkbox"
        />
        <label for="widget-title-enabled">Display Title?</label>
    </p>
</div><!-- .widget-content -->

En supposant que tout s’est bien passé, vous devriez maintenant voir quelque chose qui ressemble à ceci :

Et c’est là que nous allons nous arrêter avec les fonctionnalités administratives de ce poste. N’oubliez pas que vous pouvez également suivre tout cela dans la branche de développement sur GitHub.

Désinfection et sérialisation

Dans le prochain article, nous verrons ce qui est nécessaire pour nettoyer et sérialiser (ou nettoyer et enregistrer) le contenu de notre widget.

Nous nous assurerons également d’afficher les informations dans la zone administrative une fois les informations enregistrées et récupérées.

Enfin, l’héritage et la cohésion de classe continueront d’évoluer mais, pour l’instant, concentrez-vous sur ce qui est couvert dans cet article, puis nous continuerons dans le prochain article.