WordPress: Lightbox ohne Plugin

Es gibt bestimmt tausend sehr guter Plugins, die Bilder in einer Lightbox darstellen. Doch ich mag nun mal Code-Schnipsel für meine functions.php. Mein Vorhaben: Bilder in einer Lightbox darstellen und dabei auf Plugins verzichten. Und das geht. So hat zum Beispiel die Seite Netzgänger ein Tutorial veröffentlicht, indem man die benötigten Code-Schnipsel findet. Das Tutorial scheint schon etwas älter. Ein Datum fehlt, jedoch findet man Kommentare aus dem Jahr 2012.

Als Lightbox bezeichnet man vor allem im Webdesign eine besondere Form um Fotos, andere Bilder, Videos und sonstige Multimediainhalte zu präsentieren. Klickt der Benutzer ein Vorschaubild an, so wird die Seite abgedunkelt und das großformatige Bild darüber schwebend angezeigt.

Wikipedia

Die Snippets nutzen bereits in WordPress vorhandene Scripte. Der zusätzliche Code für die functions.php ist dementsprechend klein.

/**
 * Eine Lightbox für WordPress
 * ---------------------------
 * Rüstet eine Lightbox auf Basis der in WordPress schon vorhandenen Thickbox nach.
 */
 
add_action( 'wp_enqueue_scripts', 'add_thickbox' );

function add_thick_lightbox ($content) {
  $content = preg_replace("/<a/","<a class=\"thickbox[slides]\"",$content,1);
}
add_filter( 'wp_get_attachment_link', 'add_thick_lightbox');

Auch die Datei footer.php des Themes muss geändert werden. Dort werden mit nachfolgenden Zeilen die Scripte und auch das Stylesheet geladen. Recht einfach ist das wenn man sowieso ein Child-Theme nutzt.

<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('thickbox'); ?>
<?php wp_enqueue_style('thickbox'); ?>

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

Ich selbst nutze noch einige Zeilen CSS und blende die Vor- und Zurück-Navigation und das Schließen-Kreuz aus.

/* Lightbox --------------------------------------------------------------------*/
#TB_secondLine,
#TB_closeWindowButton {
  display: none !important;
}

#TB_caption,
#TB_closeWindow {
  height: 15px !important;
}