Damit die Lightbox überhaupt funktio­niert muss beim Einladen der Bilder in Beiträgen/Seiten die Funktion "Link zu" unter "ANZEIGE-EINSTEL­LUNGEN FÜR ANHÄNGE" auf "Medien-Datei" gesetzt sein!

CSS laden

Zunächst müssen wir die zugehörige CSS Datei in der funktions.php regis­trieren.

//Styles
add_action( 'wp_enqueue_scripts', 'ms_register_style' ); //Name kann frei gewählt werden
function ms_register_style() { //muss hier der Selbe sein
    wp_register_style( 'lightbox', get_template_directory_uri() . '/css/lightbox.css');
    wp_enqueue_style( 'lightbox' );
}

Javascript laden

Danach regis­trieren wir die Javascript Datei in der functions.php

//Scripts
add_action( 'wp_enqueue_scripts', 'ms_register_script' ); //Name kann frei gewählt werden
function ms_register_script() {
    //Laden der lightbox.js
    wp_register_script( 'lightbox', get_template_directory_uri() . '/js/lightbox.js', '', null, true); //true besagt, dass die Skripte im Footer eingebunden werden
    wp_enqueue_script( 'lightbox' );
}

data Attribut hinzu­fügen

Damit das lightbox Javascript weiß, auf welche Elemente es angewendet werden soll, benötigen alle Bilder, auf welche dies zutreffen soll das Attribut

data-lightbox="roadtrip"

Folgendes Script sucht alle Links mit der hyper­re­fe­rence der Endung aller gängigen Bildda­teien und ergänzt das oben genannte Attribut.

<!-- Anfang Lightbox -->
<script>
    jQuery(function($){
        jQuery('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".bmp"]').attr('data-lightbox','roadtrip');
    });
</script>
<!-- Ende Lightbox -->