Erstellen von wartungsfähigen WordPress-Meta-Boxen Beenden Sie das Front-End

In dieser Artikelserie behandeln wir eine Handvoll Tipps und Strategien, mit denen wir wartungsfähigere WordPress-Plugins erstellen können, und wir gehen durch den Kontext eines Plugins, das Tab-Meta-Boxen nutzt.

Im vorherigen Post haben wir die Funktionalität speziell für unsere Registerkarten implementiert und auch die erste implementiert Textbereich Dies wird zum Erfassen einiger Benutzereingaben verwendet. Für diejenigen, die mitverfolgt haben, wissen Sie, dass wir nur so weit gekommen sind:

Die Registerkarten funktionsfähig machen
Einführung eines einzelnen Oberflächenelements, mit dem der Benutzer interagieren kann

Wir haben weder den eigentlichen Prozess des Bereinigens, Validierens und Speicherns der Daten abgeschlossen, noch haben wir uns mit der Einführung des Inhalts für die restlichen Registerkarten beschäftigt. In den nächsten beiden Artikeln werden wir genau das tun.

In diesem Artikel werden wir insbesondere den Rest der Benutzeroberfläche einführen und dann mit dem eigentlichen Schreiben von Code fortfahren, der für die Überprüfung der Benutzereingaben verantwortlich ist und sie dem angegebenen Beitrag zuordnet.

Nachdem das vor uns liegt, beginnen wir.

Registerkartenvorlagen, überarbeitet

Wie bereits erwähnt, haben wir im letzten Post a Textbereich in unser Entwurf Tab. Wenn Sie die Tutorials und / oder den Code im verfügbaren Repository verwendet haben, sollten Sie etwa Folgendes sehen:

Die Idee hinter dem Entwurf tab ist einfach: Hier können Benutzer Notizen machen, Ideen sammeln und haben im Grunde einen Notizblock, mit dem sie ihre Ideen sammeln können, bevor sie einen Beitrag schreiben.

Ressourcen

Was ist mit Ressources Tab? Die Idee hinter dieser Registerkarte ist, dass Benutzer verschiedene URLs zu Seiten, Tweets, Bildern und anderen Informationen zu den Inhalten sammeln können, die sie schreiben möchten, sodass sie diese in ihren Beitrag einbetten, verknüpfen und / oder referenzieren können.

So wird es funktionieren:

Es wird eine Schaltfläche geben, mit der der Benutzer zusätzliche Felder hinzufügen kann
Wenn Sie auf die Schaltfläche klicken, wird ein einzelnes Eingabefeld über der Schaltfläche hinzugefügt, um die Eingaben des Benutzers zu erfassen.
Wenn der Benutzer Informationen angibt, werden diese beim Speichern des Beitrags gespeichert.
Wenn der Benutzer keine Informationen bereitstellt, werden diese nicht gespeichert.

Was die letzten beiden Punkte angeht, werden wir uns im nächsten Artikel darum kümmern. Wir kümmern uns jetzt darum, Eingabefelder dynamisch hinzuzufügen.

Lokalisieren admin / views / partials / resources.php und aktualisieren Sie den Code, um folgendermaßen auszusehen:

Als nächstes erstellen wir eine Datei in admin / assets / js und nenne es resources.js. Stub die Datei so aus, dass sie wie folgt aussieht:

(function ($) 'use strict'; $ (function () );) (jQuery);

Als nächstes müssen wir einen Event-Handler so einrichten, dass, wenn der Benutzer auf klickt Ressource hinzufügen Schaltfläche, führt er Folgendes aus:

Erzeugt ein neues Eingabeelement.
Stellt die richtigen ID- und Namensattribute bereit, damit die Informationen serialisiert werden können.
Fügte es an die vorhandene Liste der Eingabeelemente an.

Hier ist der vollständig kommentierte Code, wie er dies mit weiteren Informationen erreichen kann:

/ ** * Erstellt ein neues Eingabeelement, das an das DOM angehängt werden soll und zur Darstellung einer einzelnen * Ressource (Adresse, Tweet, Bild-URL usw.) dient, auf die im Beitrag verwiesen wird. * * @since 0.4.0 * @param object $ Eine Referenz auf das jQuery-Objekt. * @return object Ein Eingabeelement, das an das DOM angehängt werden soll. * / function createInputElement ($) var $ inputElement, iInputCount; / * Zählen Sie zunächst die Anzahl der bereits vorhandenen Eingabefelder. So implementieren wir * die Namen und ID-Attribute des Elements. * / iInputCount = $ ('# Autors-Kommentar-Ressourcen') .children (). length; iInputCount ++; // Erstellen Sie als Nächstes das tatsächliche Eingabeelement und geben Sie es an den Aufrufer zurück. $ InputElement = $ ('') .attr (' Typ ',' Text ') .attr (' Name ',' Autors-Kommentar-Ressource- '+ iInputCount) .attr (' ID ',' Autors-Kommentar-Ressource- '+ IInputCount). attr ('value', "); return $ inputElement; (Funktion ($) 'use strict'; $ (function () var $ inputElement; $ ('#autors-commentary-add-resource') .on ('click', function (evt) evt.preventDefault (); / * Erstellt ein neues Eingabeelement, mit dem die Eingaben der Benutzer * erfasst und an den Container direkt über dieser Schaltfläche angehängt werden. * / $ ('# autors-commentary-resources ') .append (createInputElement ($));););) (jQuery);

Im obigen Code gibt es eine Funktion, die speziell für die Erstellung eines Eingabeelements und die Verwendung der Anzahl der bereits vorhandenen Elemente entwickelt wurde, um ihm einen eindeutigen Namen und eine eindeutige ID zu geben.

Es gibt auch einen DOM-ready-Handler, der eine Funktion einstellt, die ausgelöst wird, wenn der Benutzer auf die Schaltfläche klickt Ressource hinzufügen Taste. Wenn Sie auf die Schaltfläche klicken, wird die zuvor genannte Funktion aufgerufen, und das Eingabeelement wird an den übergeordneten Container angehängt.

Um sicherzustellen, dass dies optimal aussieht, müssen wir einige Stile schreiben. Finden Sie also genau wie bei der JavaScript-Quelle admin / assets / css / admin.css Fügen Sie dann den folgenden Code am Ende der Datei hinzu:

# Autors-Kommentar-Ressourcen Eingabe [Typ = "Text"] Breite: 100%; Rand unten: 10px;

Dadurch wird sichergestellt, dass jedes Eingabeelement eine Breite von 100% hat, sodass es sich jeweils in einer eigenen Zeile befindet.

Schließlich müssen wir das JavaScript, das wir mit WordPress geschrieben haben, in die Warteschlange setzen, damit es richtig auf die Elemente reagiert, die wir in unserem Partial angezeigt haben. Suchen Sie dazu das enqueue_admin_scripts Funktion in admin / class -hors-commentary.php, und aktualisieren Sie die Funktion, so dass es so aussieht:

id) wp_enqueue_script ($ this-> name. '-tabs', plugin_dir_url (__FILE__). 'Autors-Kommentar / admin / assets / js / tabs.js'), array ('jquery'), $ this-> version) ; wp_enqueue_script ($ this-> name. '-resources', plugin_dir_url (__FILE__). 'Autorskommentar / admin / assets / js / resources.js', array ('jquery'), $ this-> version);

An dieser Stelle sollten Sie den Post-Editor in Ihren Browser laden können, klicken Sie auf Ressourcen und beginnen Sie mit dem dynamischen Hinzufügen mehrerer Eingabefelder zu Ihrer Seite.

Denken Sie daran, dass wir derzeit noch nichts auf der Serverseite tun. Desinfizieren, validieren oder speichern wir diese Informationen also nicht. Das machen wir im nächsten Artikel.

Veröffentlicht

Nun, da wir einen Ort haben, an dem wir verschiedene Notizen und Ressourcen sammeln können, die in unseren Posts verwendet werden sollen, welche Elemente wären das? Veröffentlicht Tab enthalten?

Würde es einen Bereich enthalten, in dem wir unsere eigenen Kommentare und Notizen hinterlassen könnten, ähnlich wie beim Entwürfe Tab? Vielleicht.
Würde es einen Ort zum Speichern von Links zu Kommentaren und anderen Ressourcen enthalten, die für das Follow-up nach dem Beitrag nützlich sind??
Vielleicht würde es nur eine Liste aller Kommentare zum Beitrag zusammen mit einem Link zu den Kommentaren und einem Ankreuzfeld enthalten, ob der Kommentar eine Antwort erhalten hat oder nicht.

Alle drei sind durchaus akzeptable Dinge, um sie in die Veröffentlicht Tab; Um das Rad jedoch nicht neu zu erfinden und um weiterhin neue Funktionen sowie andere Möglichkeiten der Arbeit mit der WordPress-API einzuführen, werden wir uns für die letzte Option entscheiden.

Insbesondere laden wir eine Liste aller Kommentare, die in dem Beitrag vorhanden sind. Neben jedem Kommentar wird ein Kontrollkästchen angezeigt. Wenn der Kommentar eine Antwort erhalten hat, wird er geprüft. Andernfalls wird das Kontrollkästchen deaktiviert.

Wir werden nicht Dazu gehören Pingbacks, da ein Autor normalerweise nicht auf Pingbacks reagiert.

Mit dem gesagt, laden admin / views / partials / Published.php und fügen Sie den folgenden Code hinzu:

  load_post_comments (); ?>      Dieser Kommentar hat eine Antwort erhalten.   comment_author; ?>: Kommentar_Inhalt; ?>

Beachten Sie, dass wir eine aufgerufene Funktion aufrufen load_post_comments. Da wir es noch nicht definiert haben, hüpfen wir hinein admin / class -hors-comment-meta-box.php und fügen Sie den folgenden Code hinzu:

 get_the_ID (), 'status' => 'approve'); $ comments = get_comments ($ args); $ Kommentare zurückgeben;

Diese Funktion ruft eine Sammlung aller genehmigten Kommentare für den angegebenen Beitrag ab. Das oben aufgeführte Teilstück durchläuft dann die Kommentare und erstellt dann ein Etikett und ein Kontrollkästchen, in dem der Benutzer auswählen kann, ob der Kommentar eine Antwort erhalten hat oder nicht.

Unter dem Label werden Sie den Autor und den Kommentar des Kommentars sehen. Dies ist hauptsächlich dazu gedacht, den Kommentar, der hinterlassen wurde, leicht zu identifizieren.

Schließlich müssen wir unserem Stylesheet noch etwas hinzufügen:

# Autor-Kommentar-Kommentarbeschriftung font-weight: fett;

Und wir sind fertig.

Letztendlich sollten Sie mit einem Bildschirm enden, wie Sie es oben sehen.

Umzug auf die Serverseite

Im nächsten Artikel werden wir uns wieder auf die Serverseite begeben und mit der Arbeit an Code für die Validierung, Bereinigung, Serialisierung und den gesamten Code der gerade erstellten Benutzeroberfläche beginnen.

Vergessen Sie in der Zwischenzeit nicht, den Code auf GitHub (auf der rechten Seite dieses Beitrags verfügbar) zu checken, und hinterlassen Sie alle Fragen und Kommentare im untenstehenden Feed.

Code