WordPress-Widgets: Refactoring, Teil 10
Was das WordPress-Widget-Boilerplate-Refactoring angeht, sind wir an einem guten Ort. Es wurde viel Arbeit geleistet, damit die Einführung neuer Klassen, Features und Funktionen viel einfacher sein sollte.
Und nicht nur das: Es soll leichter nachzuvollziehen sein.
Dank der Arbeit im letzten Beitrag haben wir noch viel Arbeit, auf der wir aufbauen können – nämlich eine grundlegende Verwaltungsschnittstelle.
Schließlich hieß es im letzten Post:
In den nächsten Artikeln wird sich dies weiterentwickeln, aber wie Sie sehen können, stellen wir sicher, dass wir eine einzige Basisklasse für die Funktionalität für die Kommunikation mit WordPress und eine Klasse speziell für die Darstellung des Verwaltungsformulars haben.
Und genau da werden wir in diesem Artikel ansetzen. Insbesondere werden wir uns mit der Bereinigung und Serialisierung der Daten sowie dem Abrufen der im Widget gespeicherten Daten befassen.
Das WordPress-Widget Boilerplate: Refactoring Teil 10
Refactoring der Benutzeroberfläche
Bevor wir uns mit der Serialisierung befassen, gibt es einige kleinere Arbeiten, die wir an unserer Verwaltungsansicht vornehmen müssen. Erinnern Sie sich an frühere Posts in der Serie, dass wir ein Formular erstellt haben, das Folgendes akzeptiert:
- ein Titel,
- einige Inhalte,
- und ein Kontrollkästchen.
Dies wird problemlos angezeigt, schließt jedoch einige Schlüsselfunktionen der Widgets-API aus. Wir müssen nämlich sicherstellen, dass wir unsere Elemente mit den folgenden Funktionen richtig benennen:
Und dann schreiben wir unsere Funktion, die einfach get genannt wird, was ich gleich erklären werde.
Die oben genannten Funktionen sind notwendig, da sie WordPress dabei helfen, den Überblick darüber zu behalten, wie viele Instanzen des Widgets verwendet werden und welche der Benutzer bearbeitet. Mit anderen Worten, wir bekommen viele Funktionen kostenlos.
Bevor ich Ihnen den Code zeige, möchte ich kurz auf den Zweck der get – Funktion eingehen, die wir einführen werden. Kurz gesagt, es ist eine Möglichkeit für uns, einen Schlüssel (wie den Schlüssel in einem Schlüssel/Wert-Paar) an eine Funktion zu übergeben und sie dann einfach einen Wert für uns abrufen zu lassen, damit unsere Schnittstelle so sauber wie möglich bleibt.
Also zuerst die get-Methode :
<?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];
}Es ist wichtig zu beachten, dass diese Methode nicht nur den Schlüssel für den Wert akzeptiert, den wir lesen, sondern auch ein Array, das auf die Instanz des Arrays verweist.
Und jetzt die umgestaltete Benutzeroberfläche :
<?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 -->
Aber dies lässt immer noch Funktionalität fehlen und lässt uns Arbeit übrig. Wir müssen nämlich die Daten bereinigen und an WordPress zurückgeben, damit es die Daten speichert.
Bereinigung und Serialisierung
Für die Zwecke unseres Beispiels werden wir sehr streng sein, was wir zulassen. Wir werden nämlich nur einfachen Text unterstützen und alles aggressiv entfernen.
Das bedeutet, dass wir kein Markup oder ähnliches zulassen werden. Stattdessen werden wir alles entfernen, was kein einfacher Text ist. Wir können es ein wenig dekorieren, wenn es an der Zeit ist, es im Frontend anzuzeigen, aber wir verschieben das auf den entsprechenden Beitrag.
Dazu verwenden wir die folgenden Funktionen:
Denken Sie daran, dass wir zwei Felder in unserem Widget haben – das Titelfeld und das Inhaltsfeld. Abhängig von der Art des Widgets, das Sie erstellen, benötigen Sie möglicherweise nur eine einzige Klasse oder Funktion, um die Daten zu bereinigen. In anderen Situationen benötigen Sie möglicherweise etwas Komplexeres.
Denken Sie daran, wenn wir diesen Code durchgehen, da dies keine Einheitslösung sein wird. Stattdessen wird es speziell dafür sein.
Wie auch immer, um die Daten zu bereinigen, schreiben wir eine Klasse speziell für diesen Zweck und stellen sie dann unserer WidgetAdmin-Klasse zur Verfügung.
Hier ist die Klasse in ihrer Gesamtheit mit einer folgenden Beschreibung:
<?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;
}
}
Die Klasse sollte direkt sein. Es nimmt die eingehenden Werte des Widgets auf, bereinigt sie und gibt dann ein neues Array zurück, das an WordPress zurückgegeben wird.
Es gibt jedoch einen Haken. Diese Klasse muss eine Eigenschaft der Haupt- Widget -Klasse sein, die im letzten Beitrag gezeigt wurde.
Zweitens ruft die Update -Methode, die Teil der Widgets-API ist, diese Klasse auf. Es ist nicht erforderlich, die $oldInstance- Variable an den Serializer zu übergeben, sie ist jedoch für die Update-Methode erforderlich.
Hier ist die Widget -Klasse, wie sie derzeit erstellt wird :
<?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];
}
}
Wenn Sie die Seite jedoch aktualisieren, stellen Sie möglicherweise fest, dass die Bereinigung und Serialisierung beim Abrufen der Daten nicht zu funktionieren scheinen. Und dem gehen wir im nächsten Beitrag nach.
Abrufen von Daten
Beachten Sie, dass, obwohl die Funktionalität dafür unvollständig zu sein scheint (da die nicht bereinigten Daten immer noch angezeigt werden), wir uns darauf konzentrieren, sicherzustellen, dass wir Klassen mit Zusammenhalt und Verantwortung schreiben und die nicht eng miteinander verbunden sind.
Wir werden dies im nächsten Beitrag ein wenig mehr wiederholen. Studieren Sie also den obigen Code, implementieren Sie ihn, wenn Sie das getan haben, und wir werden im nächsten Beitrag von dort aus weitermachen.