Integrieren Sie das modale Dialogfeld mit der integrierten ThickBox in WordPress

Modale Dialoge müssen manchmal unbedingt in eine WordPress-Website integriert werden. Mit dem modalen Dialog können wir den Inhalt oben auf der aktuellen Seite anzeigen.

Wenn es um modales Popup geht, bevorzugen die Leute normalerweise die Lightbox- oder Fancybox- Bibliothek. Dies sind die beliebten Bibliotheken und funktionieren ziemlich gut.

Um diese Bibliotheken in WordPress einzubinden, müssen wir JS- und CSS-Dateien einer Bibliothek herunterladen und auf dem Standardweg in das Projekt einbinden. Danach müssen wir gemäß der Bibliotheksdokumentation den Inhalt umschließen und die Methode aufrufen, um das modale Fenster zu öffnen.

WordPress hat das ThickBox jQuery-Plugin mit modifizierter Version in seinen Kern integriert. Und es kann anstelle von externen Bibliotheken verwendet werden. Mit dieser Kernfunktion erhalten wir die Benutzeroberfläche, die den modalen Popups im WordPress-Administrator wie auf der Medienschaltfläche entspricht.

Sie können diese integrierte Funktion ausprobieren. Wenn es Ihre Anforderungen erfüllt, spart es Zeit für die Integration externer Bibliotheken.

Wenn Sie ThickBox mit Inline-Inhalten verwenden, erhalten Sie die Ausgabe etwa wie im folgenden Screenshot gezeigt.

Modales Dialogfeld mit ThickBox

WordPress ThickBox funktioniert gut mit dem Inline-Inhalt. Shortcode kann auch im modalen Dialog verwendet werden. Als Beispiel können Sie das Kontaktformular im modalen Fenster mit dem Shortcode des Kontaktformulars 7 anzeigen.

Sehen wir uns jedoch an, wie Sie ThickBox in WordPress verwenden.

Zum Beispiel zeigen wir Dummy-Inline-Inhalte beim Klicken auf das Anker-Tag an. Platzieren Sie den folgenden Code also überall dort, wo Sie die ThickBox verwenden möchten.

<?php add_ThickBox(); ?>
<div id="dummy-content-id" style="display:none;">
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>
 
<a href="#TB_inline?width=600&height=350&inlineId=dummy-content-id" title="Inline Content" class="ThickBox">View dummy content!</a>

Um die Thichbox zu verwenden, müssen wir die erste add_ThickBox()Methode einschließen. Diese Funktion lädt die Bibliothek aus dem Kern. Als nächstes müssen wir im href-Attribut des Anker-Tags #TB_inline zusammen mit Breite, Höhe und ID eines Containers übergeben, in den unser Inline-Inhalt eingeschlossen ist.

Auf die gleiche Weise, wenn Sie das Kontaktformular im modalen Dialog anzeigen müssen, müssen Sie anstelle von Dummy-Inhalten einen Shortcode mit der do_shortcode()Funktion von WordPress platzieren.

<?php echo do_shortcode('[shortcode_here]'); ?>

Das ist es! Wir hoffen, dass Sie verstehen, wie Sie mit ThickBox in WordPress ein modales Dialogfeld hinzufügen. Wir würden gerne Ihre Meinung im Kommentar unten hören.

Vielleicht möchten Sie auch unsere Artikel Weiterleiten zur Dankesseite nach der Übermittlung des Kontaktformulars 7 und zum Speichern von Übermittlungen des Kontaktformulars 7 in der WordPress-Datenbank lesen