Eine Lightbox in WordPress einbauen

WordPress bietet dank seiner umfangreichen Plugin-Funktionen verschiedene Möglichkeiten, eine Lightbox in eine bestehende WordPress-Installation zu integrieren. Je nach Plugin ist diese Integration mehr oder weniger komfortabel zu bedienen und bietet verschiedene Optionen, den Inhalt der Lightbox zu definieren und darzustellen. Es gibt mittlerweile zahlreiche Entwicklungen von Plugins, die einen derartigen Effekt zur Verfügung stellen. Einzelne Bildergalerien bringen diesen auch bereits von Haus aus mit, können jedoch durch externe Module um Funktionen und Darstellungsweisen erweitert werden.

Was ist eine Lightbox?

Eine Lightbox ist eine Box, die sich bei einem Klick mit der linken Maustaste öffnet. Das Besondere im Vergleich zu beispielsweise einem Pop-Up ist, dass die Ausgangsseite nicht verlassen wird. Das Fenster öffnet sich vielmehr auf der betreffenden Seite, die außerhalb des dargestellten Inhaltes entweder ausgegraut oder komplett schwarz angezeigt wird. Dadurch wird die Bedienung weiterer Elemente auf der Homepage unterbunden.

Besonders für Bilder und Galerien wird diese Darstellung gerne und immer zunehmender eingesetzt. Allerdings werden auch zunehmend Kontaktformulare, Eingaben oder Registrierungen in einer Lightbox angezeigt. Technisch gesehen handelt es sich um eine Reihe von Anweisungen, die in der im Internet verbreiteten Programmiersprache Javascript geschrieben sind.

Eine einfache Lightbox ohne Plugin in WordPress einbauen

Werden keine speziellen Funktionen benötigt, ist es möglich, eine einfache Lightbox ohne die Installation von zusätzlichen Plugins in Worpress zu integrieren. Dazu wird der Befehl thickbox des in WordPress enthaltenen Skriptes „wp_enqueue_script“ genutzt. Um diesen zu aktivieren, muss er erst einmal in die Datei functions.php geschrieben werden. Öffnen Sie dazu die Datei mit einem Texteditor Ihrer Wahl und ergänzen Sie sie um den Befehl

add_action( 'wp_enqueue_scripts', 'add_thickbox' );

Als nächstes muss die Klasse der Galerielinks in derselben Datei noch geändert werden, damit diese auch korrekt zugeordnet werden können. Ergänzen Sie dazu das Skript um den Absatz

add_filter( 'wp_get_attachment_link', 'sant_prettyadd');

function sant_prettyadd ($content) {

$content = preg_replace("/<a/","<a class=\"thickbox[slides]\"",$content,1);
}

Nun werden die Dateien header.php und footer.php noch um folgenden Text ergänzt, damit die richtigen Variablen übernommen werden können. header.php:

wp_enqueue_script('jquery');
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');
wp_head();

footer.php:

wp_enqueue_script('jquery');
wp_enqueue_script('thickbox');
wp_enqueue_style('thickbox');
wp_footer();

Die Lightbox als solches funktioniert in WordPress bereits mit diesen Ergänzungen, allerdings müssen die Links bis jetzt aufwendig per Hand um die Klasse thickbox ergänzt werden. Damit dies automatisch geschieht, müssen Sie ein PHP-Skript verwenden, das diese Klasse automatisch in Links, die auf Bilder verweisen, einfügt. Dazu öffnen Sie wiederum die Datei footer.php und ergänzen diese kurze Anweisung, die Bilder der mittleren Größe mit der benötigten Klasse versieht.

<script>
jQuery('a img.size-medium').parent().addClass('thickbox').attr('rel', 'page');
</script>

wp_footer();

Beachten Sie, dass Sie all diese Anweisungen innerhalb des PHP-Skriptes einfügen müssen. Die auf diese Weise erstellte Lightbox ist jedoch in ihrem Funktionsumfang noch sehr rudimentär, so ist z.B. keine Erkennung von Tasten integriert. Sollten Sie deshalb eine aufwändigere Umsetzung wünschen, so können Sie entweder die Skripte darum erweitern, oder Sie nehmen die Hilfe eines passenden Plugins in Anspruch.

Welche Lightbox-Plugins gibt es für WordPress?

WordPress wird von einer aktiven Gemeinschaft mit einer großen Menge an Plugins versorgt und die Lightbox stellt keine Ausnahme dar. Ein paar der populärsten sind die Lightbox Gallery, das Lightbox Pop, das Form Lightbox Plugin, WP Lightbox 2 (meine Empfehlung) oder die WP Video Lightbox. Darüber hinaus enthalten einzelne Sammlungen von Funktionen wie das Jetpack Plugin ihre eigenen Routinen (in diesem Fall das Modul Carousel).

Welche von diesen Plugins Sie bevorzugen, ist von dem persönlichen Geschmack und den speziellen Anforderungen abhängig. Sie taugen prinzipiell alle für das gewünschte Ergebnis, wobei hier beachtet werden sollte, dass die meisten auf eine spezielle Verwendung z.B. mit Bildern, Videos oder Eingabemasken zugeschnitten sind.

Sollten verschiedene Verwendungen gewünscht sein, ist es notwendig, auf ein Plugin mit genereller Funktionsweise zu setzen. Die WP Lightbox 2 oder die WP Video Lightbox sind in Worpress Beispiele für solche, die mit einer Vielzahl von in dem Pop-Up dargestellten Inhalte kompatibel sind.

Fazit: Es ist relativ simpel eine Lightbox in WordPress einzubauen. Entweder man entscheidet sich für die bequeme Variante mit einem Plugin. Oder aber man baut die oben genannte Lösung selber ein uns spart sich Balast durch ein weiteres Plugin.

Letzte Version vom 20. November 2015 von Netzgänger
Jetzt WordPress Newsletter in dein Postfach

Melde dich jetzt für meinen Newsletter an und du erhältst regelmäßig Tipps und Tricks zu WordPress in dein Postfach. Natürlich kannst du ihn jederzeit abbestellen.


9 Kommentare

  1. Chris sagt:

    Hallo,
    ich habe vor kurzem mein Theme „Bridge child“ aktualisiert und nun funktioniert die Slideshow der integrierten WP-Bildergalerie nicht mehr. Die Galerie erscheint zwar unter dem Post wie gehabt, nur leider lassen sich die angeklickten Bilder nicht mehr als Slideshow anschauen.

    Über Hilfe wäre ich sehr dankbar!

  2. Eva sagt:

    Hallo,
    kann es sein, dass die Lightbox Gallery für das WordPress Theme Paradise nicht richtig funktioniert? Habe die neueste Version installiert 0.8, jedoch werden die Fotos nicht korrekt im Rahmen angezeigt, erst beim zweiten Anklicken „rutschen“ sie förmlich hinein. Woran kann das denn noch liegen? Über Hilfe wäre ich sehr dankbar!
    Liebe Grüße

  3. Mario Berger sagt:

    Super, besten Dank, habe einen möglichst einfachen Weg gesucht eine Lightbox einzubinden.

    Wäre das Facebook hätten Sie jetzt ein Like

  4. Mirjam sagt:

    Vielen Dank für die perfekte Erklärung. Hat auf Anhieb wunderbar funktioniert.

  5. Helge Cramer sagt:

    Vielen Dank für die ausführliche Beschreibung- mir ist alllrdings aufgefallen, dass es Deinen zweiten Code-Schnippsel etwas „zerrissen“ hat.
    Statt
    $content = preg_replace(„/<a/"," return $content;
    muss es heißen
    $content = preg_replace("/<a/","<a class=\"thickbox[slides]\"",$content,1);
    Dann klappt es auch 😉

    • Hey, danke dir für den Hinweis. WordPress schmeisst die kleiner und größer Zeichen raus. Da hatte ich wohl vergessen eines zu maskieren. Falls jemand ne Idee hat, wie man das umgeht…bin für Tipps ja auch immer dankbar.

Kommentar schreiben

Mit Absenden deines Kommentars erklärst du dich mit der Verarbeitung deiner hier angegebenen Daten einverstanden (Datenschutzerklärung). Diese werden nur zur Verwaltung der Kommentare verwendet und keinem anderen Zweck zugefügt. Du kannst jederzeit per E-Mail an info@netz-gaenger.de der Speicherung deiner Daten widersprechen.

* Notwendige Angaben

Netzgänger Webdesign | Rohrersmühlstraße 22 in Schwabach | Bayern
Kontakt: info@netz-gaenger.de
↑ oben
Inhalt