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.

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 :

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

So aussehen :

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 :

Und aktualisiere es so, dass es so aussieht :

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.