Obwohl der letzte Beitrag in dieser Refactoring-Serie nicht unglaublich lang war, denke ich, dass er ein bisschen dicht war. Das heißt, es war ziemlich viel Arbeit erforderlich, um den Code an einen Ort zu bringen, an dem wir leichter damit arbeiten können.

Aber das ist es auch schon: All die Arbeit, die wir geleistet haben, sollte es einfacher machen, mit dem restlichen Code, den wir schreiben müssen, voranzukommen.

Und um sicherzustellen, dass wir die Arbeit und die Grundlage, die wir bisher gelegt haben, nutzen, werden wir die Serie mit einer Reihe kürzerer, fokussierterer Artikel abrunden, deren Lesen und Implementieren weniger Zeit in Anspruch nehmen sollte, und verstehen, was wir mit dem Code machen.

Das WordPress-Widget Boilerplate: Refactoring Teil 9

Rückruf vom letzten Post:

Als Nächstes bauen wir die Funktionalität für den Verwaltungsbereich des Widgets weiter aus. Danach wenden wir uns der öffentlich zugänglichen Seite des Widgets sowie der Serialisierungsfunktion zu.

Und das bereitet uns genau darauf vor, wohin wir in diesem speziellen Beitrag gehen. Wir werden nämlich ein administratives Front-End schreiben, das uns Folgendes ermöglicht:

• einen Titel für das Widget definieren,
• Textinhalte für das Widget definieren,
• und schalten Sie um, ob wir den Titel anzeigen möchten oder nicht.

Es soll weder innovativ noch die Art von Widget sein, die jemand anderes verkaufen möchte. Stattdessen soll es zeigen, wie wir mit dem, was wir haben, etwas Ähnliches schaffen können, wie wir es bereits in WordPress gesehen haben, und wie wir solide Programmierpraktiken anwenden.

Die Benutzeroberfläche: Ein erster Durchgang

Nach unserer Arbeit beim letzten Mal haben wir ein Widget, das im Verwaltungsbereich von WordPress erscheint und sogar in eine Seitenleiste oder einen anderen mit Widgets versehenen Bereich verschoben werden kann; jedoch tut es eigentlich nichts.

Lassen Sie uns vorerst fortfahren und der Benutzeroberfläche drei Elemente hinzufügen:

1. eine Texteingabe für den Titel des Widgets hinzufügen,
2. Ein textarea-Element zum Anzeigen eines Textabschnitts enthalten,
3. und fügen Sie schließlich ein Kontrollkästchen hinzu, um die Titelinformationen umzuschalten.

Dazu müssen wir eine Datei im Views – Verzeichnis bearbeiten. Wir werden nämlich die  Datei Admin.php aktualisieren. Wir beginnen mit den Elementen genau nach Bedarf ohne überflüssiges Markup.

<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>

Es wird am Frontend noch nicht viel zu sehen geben, aber es bringt uns näher an das, wo wir sein wollen.

Eine Klasse für Administratoren

Als nächstes wollen wir sicherstellen, dass wir konsequent ein hohes Maß an Zusammenhalt mit unseren Klassen aufrechterhalten. Das bedeutet, dass wir keine einzelne Klasse benötigen, um alles für die Verwaltung, Anzeige und alle anderen Arbeiten zu erledigen, die von der WordPress-API benötigt werden.

Zu diesem Zweck erstellen wir eine zweite Klasse namens WidgetAdmin im WordPress – Verzeichnis und -Namespace.

In diese Datei fügen wir den folgenden Code ein :

<?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';
    }
}

Dann ändern wir im ursprünglichen Code zum Instanziieren unseres Widgets diese Zeile :

<?php

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

So aussehen :

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

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.

Die Benutzeroberfläche: Ein zweiter Durchgang

Lassen Sie uns zum Schluss das Formular aufräumen, damit es ein bisschen mehr solide UX hat, die sich gut in den gesamten WordPress-Verwaltungsbereich einfügt.

Nehmen Sie den folgenden Code :

<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>

Und aktualisiere es so, dass es so aussieht :

<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 -->

Wenn alles gut gelaufen ist, sollten Sie jetzt etwas sehen, das so aussieht:

Und hier hören wir mit den Verwaltungsfunktionen für diesen Beitrag auf. Denken Sie daran, dass Sie all dies auch im Entwicklungszweig auf GitHub verfolgen können.

Bereinigung und Serialisierung

Im nächsten Beitrag sehen wir uns an, was notwendig ist, um den Inhalt unseres Widgets zu bereinigen und zu serialisieren (oder zu bereinigen und zu speichern).

Wir stellen auch sicher, dass wir die Informationen im Verwaltungsbereich anzeigen, nachdem die Informationen gespeichert und abgerufen wurden.

Schließlich werden sich die Vererbung und die Klassenkohäsion weiterentwickeln, aber konzentrieren Sie sich vorerst auf das, was in diesem Beitrag behandelt wird, und dann fahren wir im nächsten Artikel fort.