Widgets WordPress : refactorisation, partie 10
En ce qui concerne la refactorisation de WordPress Widget Boilerplate, nous sommes à un bon endroit. Beaucoup de travail a été fait pour que l’introduction de nouvelles classes, fonctionnalités et fonctionnalités soit beaucoup plus facile.
Et pas seulement cela: cela devrait être plus facile à suivre.
Grâce au travail effectué dans le dernier article, nous avons beaucoup de travail à faire, à savoir une interface administrative de base.
Enfin, le dernier post disait :
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.
Et c’est là que nous allons revenir dans cet article. Plus précisément, nous allons examiner la désinfection et la sérialisation des données ainsi que la récupération des données enregistrées dans le widget.
Le passe-partout du widget WordPress : refactorisation de la partie 10
Refactoriser l’interface utilisateur
Avant d’entrer dans la sérialisation, nous allons devoir effectuer quelques travaux mineurs sur notre vue administrative. Rappelez-vous des articles précédents de la série que nous avons créé un formulaire qui accepte :
- un titre,
- un peu de contenu,
- et une case à cocher.
Cela s’affiche très bien, mais cela exclut certaines fonctionnalités clés de l’ API Widgets. À savoir, nous devons nous assurer que nous nommons correctement nos éléments en utilisant les fonctions suivantes :
Et puis nous écrirons notre fonction simplement appelée get que j’expliquerai momentanément.
Les fonctions ci-dessus sont nécessaires car elles aident WordPress à suivre le nombre d’instances du widget utilisées et celle que l’utilisateur modifie. En d’autres termes, nous obtenons beaucoup de fonctionnalités gratuitement.
Avant de vous montrer le code, je veux discuter brièvement du but de la fonction get que nous allons introduire. En bref, c’est un moyen pour nous de passer une clé (comme dans la clé d’une paire clé/valeur) dans une fonction, puis de la faire récupérer facilement une valeur pour nous afin qu’elle garde notre interface aussi propre que possible.
Donc, d’abord, la méthode get :
<?php
/**
* If the value for the key exists in the current instance of the widget, then it will
* retrieve it. Otherwise, it will return an empty value.
*
* @param string $key the used to identify the value of the widget.
* @param array $instance the options for the instance of this widget
*/
protected function get($key, $instance)
{
return empty($instance[$key])? '': $instance[$key];
}La chose importante à noter est que cette méthode accepte non seulement la clé de la valeur que nous lisons, mais un tableau faisant référence à l’instance du tableau.
Et maintenant, l’UI refactorisée :
<?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.
*/
?>
<div class="widget-content">
<p>
<input
type="text"
id="<?php echo esc_attr($this->get_field_id('title')); ?>"
name="<?php echo esc_attr($this->get_field_name('title')); ?>"
value="<?php echo $this->get('title', $instance) ?>"
placeholder="Widget Title"
class="widefat"
/>
</p>
<p>
<textarea
id="<?php echo esc_attr($this->get_field_id('content')); ?>"
name="<?php echo esc_attr($this->get_field_name('content')); ?>"
placeholder="Widget Content"
style="width:100%;"><?php echo $this->get('content', $instance) ?></textarea>
</p>
<p>
<input
type="checkbox"
value="on"
name="<?php echo esc_attr($this->get_field_name('display-title')); ?>"
id="<?php echo esc_attr($this->get_field_id('display-title')); ?>"
<?php checked('on', $this->get('display-title', $instance), true); ?>
class="checkbox"
/>
<label for="<?php echo esc_attr($this->get_field_id('display-title')); ?>">Display Title?</label>
</p>
</div><!-- .widget-content -->
Mais cela laisse encore des fonctionnalités manquantes et cela nous laisse du travail à faire. À savoir, nous devons assainir les données et les renvoyer à WordPress, afin qu’il enregistre les données.
Assainissement et sérialisation
Aux fins de notre exemple, nous allons être très stricts dans ce que nous autorisons. À savoir, nous n’allons prendre en charge que le texte de base et nous allons tout supprimer de manière agressive.
Cela signifie que nous n’allons pas autoriser le balisage ou quelque chose comme ça. Au lieu de cela, nous allons supprimer tout ce qui n’est pas du texte de base. Nous pouvons le décorer un peu quand viendra le temps de l’afficher sur le front-end, mais nous laisserons cela jusqu’au poste approprié.
Pour ce faire, nous allons utiliser les fonctions suivantes :
Rappelez-vous que nous avons deux champs dans notre widget – le champ de titre et le champ de contenu. Selon le type de widget que vous construisez, vous n’aurez peut-être besoin que d’une seule classe ou fonction pour nettoyer les données. Dans d’autres situations, vous aurez peut-être besoin de quelque chose de plus complexe.
Gardez cela à l’esprit lorsque nous parcourons ce code, car il ne s’agira pas d’une solution unique. Au lieu de cela, ce sera spécifiquement pour cela.
Quoi qu’il en soit, pour assainir les données, nous allons écrire une classe spécifiquement à cet effet, puis nous la mettrons à la disposition de notre classe WidgetAdmin.
Voici la classe dans son intégralité avec une description à suivre :
<?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;
/**
* Santiizes and saves the data for the widget.
*/
class WidgetSerializer
{
/**
* Updates the values of the widget. Sanitizes the information before saving it.
*
* @param array $newInstance the array of new options to save
*/
public function update($newInstance)
{
$instance = [];
foreach ($newInstance as $key => $value) {
$instance[$key] = strip_tags(
stripslashes($value)
);
}
return $instance;
}
}
La classe doit être simple. Il prend les valeurs entrantes du widget, les nettoie, puis renvoie un nouveau tableau à restituer à WordPress.
Il y a un hic cependant. Cette classe doit être une propriété de la classe Widget principale qui a été affichée dans le dernier message.
Deuxièmement, la méthode de mise à jour qui fait partie de l’API Widgets est ce qui appellera cette classe. Il n’est pas nécessaire de transmettre la variable $oldInstance au sérialiseur, mais elle est requise pour la méthode de mise à jour.
Voici la classe Widget telle qu’elle est actuellement construite :
<?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;
use WP_Widget;
class Widget extends WP_Widget
{
/**
* @var string unique identifier for your widget
*/
protected $widgetSlug;
/**
* Initializes the plugin by setting its properties and calling the parent class with the description.
*
* @param string $widgetSlug unique identifier for your widget
* @param WidgetSerializer $widgetSerializer the class responsible for saving widget options
*/
public function __construct($widgetSlug)
{
$this->widgetSlug = $widgetSlug;
parent::__construct(
$this->getWidgetSlug(),
__('Widget Name', $this->getWidgetSlug()),
[
'classname' => $this->getWidgetSlug().'-class',
'description' => __('Short description of the widget goes here.', $this->getWidgetSlug()),
]
);
}
/**
* Return the widget slug.
*
* @return string slug variable
*/
public function getWidgetSlug()
{
return $this->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';
}
/**
* Updates the values of the widget. Uses the serialization class to sanitize the
* information before saving it.
*
* @param array $newInstance the values to be sanitized and saved
* @param array $oldInstance the values that were originally saved
*/
public function update($newInstance, $oldInstance)
{
return $this->widgetSerializer->update($newInstance, $oldInstance);
}
/**
* If the value for the key exists in the current instance of the widget, then it will
* retrieve it. Otherwise, it will return an empty value.
*
* @param string $key the used to identify the value of the widget
* @param array $instance the options for the instance of this widget
*/
protected function get($key, $instance)
{
return empty($instance[$key])? '': $instance[$key];
}
}
Mais si vous actualisez la page, vous remarquerez peut-être que le nettoyage et la sérialisation ne semblent pas fonctionner lors de la récupération des données. Et c’est ce que nous allons examiner dans le prochain article.
Récupération des données
Notez que bien que la fonctionnalité semble incomplète pour cela (puisque les données non nettoyées sont toujours affichées), nous nous efforçons de nous assurer que nous écrivons des classes avec cohésion, responsabilité et qui ne sont pas étroitement couplées.
Nous allons itérer un peu plus sur ce sujet dans le prochain post. Alors étudiez le code ci-dessus, implémentez-le si c’est ce que vous avez fait, et nous partirons de là dans le prochain article.