Wann immer es darum geht, Lösungen für Kunden zu entwickeln, wird es Zeiten geben, in denen Sie wahrscheinlich damit beauftragt sind, Informationen in modalen Dialogen von WordPress anzuzeigen.
Dafür gibt es viele Lösungen, und je vertrauter Sie mit JavaScript, verschiedenen Bibliotheken und den verfügbaren Bibliotheken sind, desto schwieriger (oder vielleicht sogar einfacher) ist es, die zu verwendende auszuwählen.
Aber WordPress verfügt über eine integrierte Infrastruktur, die es trivial macht, Funktionen in WordPress zu integrieren. In drei kommenden Beiträgen werde ich also Folgendes behandeln:
- Wie man modale WordPress-Dialoge mit eingebauten Bibliotheken einbindet,
- Befüllen der modalen Dialoge mit Daten,
- Befüllen des modalen Dialogs mit dynamischen Daten über Ajax.
Aufgrund der Natur der Serie werden die Posts nicht direkt hintereinander sein, aber sie werden alle ein eindeutiges Tag verwenden, das Sie verwenden können, um ein Lesezeichen zu setzen und als Serie zu verweisen, sobald die Posts fertig sind.
Lassen Sie uns mit diesen Worten über die einfache Integration von modalen WordPress-Dialogen mit integrierten Bibliotheken sprechen.
Modale Dialoge von WordPress, Teil 1
Um zu beginnen, gehe ich davon aus, dass Sie die grundlegende Grundlage einer Verwaltungsseite haben.
Auf Plugin-Seiten
Das heißt, Sie haben alles, was Sie brauchen, um ein Plugin einzurichten, zu aktivieren und dann eine Seite über ein Menü oder Untermenü anzuzeigen.
Wenn nicht, lesen Sie diesen Beitrag, um zu erfahren, wie Sie beginnen können.
Sobald Sie dies getan haben, benötigen Sie die grundlegende Infrastruktur für eine Plugin-Seite. Diese Seite kann zum einfachen Anzeigen von Informationen verwendet werden, oder sie kann sowohl zum Anzeigen von Informationen als auch zum Geben des Benutzers zum Speichern von Optionen verwendet werden.
Für dieses Tutorial bin ich nicht besonders daran interessiert, dem Benutzer die Möglichkeit zu geben, Optionen zu speichern. Stattdessen müssen wir einen Anker erstellen, der bei jedem Klick einen modalen Dialog anzeigt.
Und die darin enthaltenen Daten werden in einem späteren Tutorial behandelt.
Eine Beispiel-Plugin-Seite
An dieser Stelle gehe ich davon aus, dass Sie eine Plugin-Seite haben. Eine Grundstruktur dafür kann wie folgt aussehen :
Von dort aus sind zwei Dinge notwendig:
- Einbindung der Thickbox-Bibliothek
- Hinzufügen eines Ankers und eines Containers, die einen modalen Dialog anzeigen
Um die Thickbox-Bibliothek in Ihre Plugin-Seite einzubinden, fügen Sie einfach dieses Tag hinzu. Wenn Sie Codierungsstandards befolgen, hat Ihre Seite wahrscheinlich oben auf der Seite einen Dokumentblock. Hier füge ich normalerweise den Code hinzu.
Die add_thickbox- Funktion ist eine von WordPress bereitgestellte, die Folgendes tut:
Stellt die Standard-ThickBox-js und -css in die Warteschlange.
Etwas vage, oder? Technisch gesehen ist die längere Beschreibung:
ThickBox ist ein Webseiten-UI-Dialog-Widget, das in JavaScript auf der Grundlage der jQuery-Bibliothek geschrieben wurde. Seine Funktion besteht darin, ein einzelnes Bild, mehrere Bilder, Inline-Inhalte, Iframe-Inhalte oder Inhalte anzuzeigen, die über AJAX in einem hybriden Modal bereitgestellt werden.
Und wenn Sie allein an der Thickbox-Bibliothek interessiert sind, können Sie sie auf dieser Seite sehen .
Wie auch immer, zurück zur Seite. Jetzt, wo ich es mit der WordPress-API-Funktion zu meiner Plugin-Seite hinzufüge, sieht meine Seite in etwa so aus :
Als Nächstes gehen das Erstellen des Ankers und das Element zum Anzeigen von Daten Hand in Hand, da der Anker nämlich die ID des Elements benötigt, das als modaler Dialog dienen soll.
Der Anker benötigt folgende Informationen:
- die ID des Elements, das das Modal anzeigt,
- die Dimensionen des besagten modalen Dialogs
Für dieses Beispiel werde ich einen Dialog einrichten, der mit 800 x 600 Pixel angezeigt wird und die ID acme-modal-dialog hat .
Hinweis: Denken Sie daran, dass es eine gute Idee ist, Ihren Elementen etwas voranzustellen, das mit dem Namen Ihres Plugins verwandt ist, damit keine Konflikte entstehen.
Also werde ich einen Anker erstellen, der so aussieht :
Und dann erstelle ich ein Element wie dieses :
Und der obige Code sieht auch so aus, wie die endgültige Version der Plugin-Seite aussehen wird. Wenn Sie auf den Anker klicken, sollte ein leerer Dialog mit den angegebenen Abmessungen (d. h. 800 × 600 Pixel) angezeigt werden.
Natürlich ist es leer, da es keine Daten anzeigt.
Anzeigen von Daten
Im nächsten Beitrag der Serie werde ich erläutern, wie Daten im Kontext des Dialogfelds angezeigt werden.
Es ist einfach, aber es ist ein guter Ausgangspunkt, wenn Sie beginnen möchten, dynamische Daten über die REST-API oder Ajax einzubinden. Aber ich werde das vor dem Ende behandeln.