Share
Diese Serie konzentriert sich auf Tipps und Strategien, mit denen wir WordPress-Plugins schreiben können - insbesondere solche, die Meta-Boxen verwenden - die logisch organisiert sind und einfach zu warten sind.
In den ersten beiden Beiträgen der Serie haben wir die anfängliche Verzeichnisstruktur festgelegt, den Code für das Plugin eingerichtet und die Funktionsweise des Plugins besprochen. Im letzten Post haben wir mit der Erstellung der Meta-Box begonnen und die Registerkarten eingeführt, die alle Funktionen enthalten werden, die wir bearbeiten werden.
Dieser Artikel baut auf dem auf, was wir bisher gemacht haben. Wir werden in jede der Registerkarten Inhalt einführen und Funktionen implementieren, die es uns ermöglichen, den Inhalt umzuschalten, und wir werden die Felder für die Inhalte auf der ersten Registerkarte einführen.
Bevor wir mit der Implementierung der Registerkarten beginnen, die zwischen allen möglichen Optionen wechseln, müssen wir Partials, Vorlagen, Ansichten oder wie auch immer Sie sie nennen möchten, einführen, damit wir Dateien für den Umgang mit unseren Informationen haben.
Navigieren Sie zuerst zu der admin / views / partials verzeichnis und fügen Sie die folgenden Dateien hinzu (alle können leer sein, für den Moment habe ich jedoch den folgenden grundlegenden Code bereitgestellt):
Accentsconagua
drafts.phpresources.phpPublished.phpJede dieser Dateien entspricht einer der Registerkarten in der MetaBox-Benutzeroberfläche. Lassen Sie uns fortfahren und Platzhalterinhalt für jede der Registerkarten einführen. Bevor wir mit dem Artikel fertig sind, implementieren wir die Benutzeroberfläche des ersten Registers. Dies gibt uns jedoch ein visuelles Verhalten, mit dem wir arbeiten können, bevor wir die eigentliche Funktion des Registers weiter bearbeiten.
Fügen Sie den folgenden Code hinzu drafts.php.
Hier befindet sich der Inhalt des Entwurfs.
Wir werden uns dies später in diesem Artikel teilweise ansehen.
Fügen Sie den folgenden Code hinzu resources.php.
Hier befindet sich der Inhalt der Ressource.
Wir werden uns dieses Teil später in der Serie ansehen.
Fügen Sie den folgenden Code hinzuveröffentlicht.php.
Hier wird sich der veröffentlichte Inhalt befinden.
Wir werden uns diesen Teil auch später in der Serie ansehen.
Bevor wir dies im WordPress-Dashboard testen, haben wir noch etwas zu tun: Wir müssen diese Dateien tatsächlich in die Meta-Box-Ansicht einschließen, damit wir die Informationen sehen können.
Das ist einfach zu machen. Zuerst öffnen Autoren-Kommentar-Navigation.php. Fügen Sie der Datei den folgenden Code hinzu (beachten Sie, dass der gesamte neue Code eine Reihe von ist include_once Aussagen).
Entwurfsressourcen veröffentlicht
Vorausgesetzt, Sie haben alle Dateien erstellt und korrekt eingefügt, können wir uns das Dashboard ansehen. Wenn alles korrekt implementiert wurde, sollte Folgendes angezeigt werden:
Natürlich möchten wir nicht, dass der gesamte Inhalt auf der ersten Registerkarte angezeigt wird. Daher müssen wir einige Änderungen vornehmen. Also lass uns das tun.
Letztendlich ist es unser Ziel, als integrierte Stile und Funktionen von WordPress zu verwenden. Jedes Mal, wenn Sie etwas einführen, das sich außerhalb der Kernfunktionen von WordPress befindet, sind Sie für die Aufrechterhaltung der Zeit verantwortlich.
Außerdem erstellen Sie ein Plugin, das so eng wie möglich in die WordPress-Benutzeroberfläche integriert ist. Zu diesem Zweck verwenden wir eine Kombination aus integrierten Stilen und benutzerdefinierten Stilen sowie JavaScript, um genau das zu erreichen, was wir erreichen wollen.
Wir wissen, dass wir als Erstes alles außer der ersten Ansicht (also alles außer) verbergen möchten Entwürfe).
Dazu müssen wir ein hinzufügen Klasse Attribut von versteckt zu den partials für die Ressourcen Tab und zum Veröffentlicht Tab.
Jede der folgenden Dateien sollte folgendermaßen aussehen:
drafts.php:
Hier befindet sich der Inhalt des Entwurfs.
resources.php:
Hier befindet sich der Inhalt der Ressource.
veröffentlicht.php:
Hier wird sich der veröffentlichte Inhalt befinden.
Das Ergebnis dieser geringfügigen Änderung sollte folgendes sein:
Einfach richtig? Aus diesem Grund empfehle ich, die Kernfunktionen und -stile von WordPress so weit wie möglich beizubehalten.
Natürlich müssen wir noch den Code zum Umschalten der Daten zwischen den Registerkarten einführen, oder? Also lass uns das jetzt tun.
Zuerst müssen wir sicherstellen, dass die erste Registerkarte als aktiv markiert ist. Vorausgesetzt, Sie haben dieses Tutorial und das entsprechende GitHub-Repository mitverfolgt, dann sollte Ihr Code so aussehen:
Entwurfsressourcen veröffentlicht
Was großartig ist, weil es bereits den ersten Tab als aktiv markiert Nav-Tab aktiv Klassenattribut. Wir haben unsere Arbeit für uns erledigt:
Nun gibt es eine Reihe von Möglichkeiten, Schritt zwei durchzuführen. Wir werden es auf eine Weise tun, die im Verlauf dieses Artikels dokumentiert und erklärt wird, aber wissen das dort sind andere Alternativen, die Sie wahrscheinlich sehen werden und die nicht unbedingt falsch sind.
Unter dem Strich gibt es eine Reihe von Möglichkeiten, um damit umzugehen. Wir behandeln es mit einer der vielen Möglichkeiten, die verfügbar sind.
Fügen wir also zunächst eine JavaScript-Datei hinzu admin / assets / js und wir werden anrufen tabs.js. Das Skelett für die Datei sollte folgendermaßen aussehen:
(function ($) 'use strict'; $ (function () );) (jQuery);
Stellen Sie als Nächstes sicher, dass wir das JavaScript nur auf Postseiten importieren. Dazu führen wir einen Haken in unseren Konstruktor ein, in den wir bereits einige Stylesheets aufgenommen haben. Der vollständige Konstruktor befindet sich unten:
name = $ name; $ this-> version = $ version; $ this-> meta_box = new Authors_Commentary_Meta_Box (); add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_styles')); add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_scripts')); Und dann implementieren wir die Funktion:
id) wp_enqueue_script ($ this-> name. '-tabs', plugins_url ('Autorskommentar / admin / assets / js / tabs.js'), array ('jquery'), $ this-> version); An dieser Stelle haben wir alles, was wir benötigen, um JavaScript zur Steuerung der Registerkarten zu implementieren. Nachfolgend finden Sie den kommentierten Code und eine kurze Erklärung nach dem Code-Snippet:
(Funktion ($) 'use strict'; $ (Funktion () // Nimm den Wrapper für die Navigationsregisterkarten.) var navTabs = $ ('# Autors-Kommentar-Navigation'). children ('.nav-tab-wrapper '), tabIndex = null; / * Wenn Sie auf eine der Registerkarten für die Navigation klicken, prüfen Sie, ob sie den Klassennamen' nav-tab-active '* hat. Wenn nicht, markieren Sie sie als aktiv, andernfalls nicht tun Sie alles (da es bereits * als aktiv markiert ist. * * Wenn eine neue Registerkarte als aktiv markiert wird, muss die entsprechende untergeordnete Ansicht als sichtbar markiert werden.) Dies geschieht durch Umschalten des Attributs 'hidden' der entsprechenden Klasse variables. * / navTabs.children (). each (function () $ (this) .on ('click', function (evt) evt.preventDefault (); // Wenn diese Registerkarte nicht aktiv ist ... wenn (! $ (this) .hasClass ('nav-tab-active')) // Heben Sie die Markierung der aktuellen Registerkarte auf und markieren Sie die neue als aktiv. $ ('.nav-tab-active') .removeClass ('nav-tab-active.) '); $ (this) .addClass (' nav-tab-active '); // Speichern Sie den Index der Registerkarte, die gerade als aktiv markiert wurde sei 0 - 3. tabIndex = $ (this) .index (); // Ausblenden des alten aktiven Inhalts $ ('# Autors-Kommentar-Navigation') .children ('div: not (.inside.hidden)') .addClass ('hidden'); $ ('# Autors-Kommentar-Navigation') .children ('div: nth-child (' + (tabIndex) + ')') .addClass ('hidden'); // Und den neuen Inhalt anzeigen $ ('# Autors-Kommentar-Navigation') .children ('div: nth-child (' + (tabIndex + 2) + ')') .removeClass ('hidden'); ); ); ); ) (jQuery);Für den Fall, dass die Codekommentare nicht eindeutig sind, wird mit dem obigen Code ein Ereignishandler für alle Registerkarten eingerichtet. Wenn Sie auf eine Registerkarte klicken, wird geprüft, ob die Registerkarte vorhanden ist Nav-Tab aktiv Klasse. Wenn ja, passiert nichts.
Ansonsten wechseln wir die Registerkarte und blenden den Inhalt aus war aktiv und zeigen Sie den neuen Inhalt an, indem Sie die versteckt Klassenname, den wir zuvor im Artikel hinzugefügt haben.
Inzwischen sollten Sie in der Lage sein, zwischen den Registerkarten zu wechseln und die drei verschiedenen Implementierungen problemlos zu sehen. Nachdem dies gesagt wurde, gehen wir weiter und implementieren die Funktionalität für die erste Registerkarte.
Obwohl wir in diesem Lernprogramm nicht die vollständige Funktionalität abschließen, haben wir uns im folgenden Artikel mit unserer Arbeit beschäftigt. Nehmen wir an, dass für die Zwecke dieses Plugins das Entwürfe Die Benutzeroberfläche wird ein Ort sein, an dem der Benutzer es einfach wie ein Notizblock für Ideen behandelt.
Es kann Links zu Artikeln, Links zu Tweets, kurze Anmerkungen zur Gliederung, einige Sätze usw. enthalten. Im Allgemeinen dient es als "Catch-All" für alle Artefakte, die der Autor während seines gesamten Postens verwendet.
Zu diesem Zweck verwenden wir eine einfache Single Textbereich. Darüber hinaus möchten wir nicht mehr Elemente der Benutzeroberfläche einführen, als nötig sind nicht einen Senden-Button einführen. Stattdessen speichern wir die Daten, wenn der Benutzer im Post-Editor auf "Aktualisieren" klickt.
Auf diese Weise wird alles gleichzeitig gespeichert.
Auch hier werden wir uns nicht mit dem Validierungs-, Desinfektions- und Serialisierungsprozess befassen, sondern einen Textbereich innerhalb von Entwürfe Teilweise, um uns an einem schönen Ort für den Folgeartikel zu erhalten.
Öffnen drafts.php, Fügen Sie den folgenden Code hinzu, und der endgültige Code sollte folgendermaßen aussehen:
Danach aktualisieren Sie die admin.css Datei, um sicherzustellen, dass die Textbereich passt gut in den Rest der Meta-Box:
# Autors-Kommentar-Entwürfe width: 100%; Höhe: 250px;
Wenn Sie nun die Meta-Box anzeigen, sollten Sie ein gut formatiertes sehen Textbereich mit der Meta-Box mit Registerkarten, die beim Klicken funktionieren.
Im nächsten Artikel implementieren wir weiterhin die Benutzeroberfläche für jede der Registerkarten, die in der Meta-Box vorhanden sind.
Dann beginnen wir mit der Bereinigung, Serialisierung und Validierung, während wir anfangen, tatsächlich Informationen zu speichern, die der Benutzer in der Meta-Box ablegt. Wir werden auch weitere Felder in das Plugin aufnehmen.
.
