FOL9000

fancyBox in WordPress einbinden — ohne Plugin

nach | Keine Kommentare

Zum Einbinden von fancyBox in WordPress gibt es eine Reihe von Plugins. Um ein paar JavaScript- und CSS-Dateien einzubinden erscheint mir ein Plugin aber eine Nummer zu groß. Eine so kleine Aufgabe ist besser von Hand erledigt. Der Beitrag erklärt wie.

Ein Plugin, nur um ein zwei Dateien in den head der WordPress-Seiten einzubinden? Das ist doch mit Kanonen auf Spatzen schießen. Ganz besonders, weil jedes zusätzliche Plugin ein Risiko bedeutet. Ein besonders beliebtes Plugin für fancyBox hatte denn auch jüngst ein Sicherheitsproblem.

Sowas kann man sich sparen, denn das Einbinden von fancyBox ist wirklich einfach.

Der erste Schritt ist natürlich der Download von http://fancyapps.com/fancybox/. Das entpackte Verzeichnis benennt man z.B. nach „fancybox“ um und kopiert es direkt in das Verzeichnis des benutzten Themes. (Das fancyBox-Verzeichnis kann hier noch etwas aufgeräumt werden: README, Demos etc. haben auf dem Server nichts zu suchen.)

Anschließend kann fancyBox über folgende Anweisungen in der functions.php des Themes eingebunden werden:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_fancybox' );
function theme_enqueue_fancybox() {
  wp_enqueue_style( 'fancybox-style', get_stylesheet_directory_uri() . '/fancybox/source/jquery.fancybox.css' )       
  wp_enqueue_script('jquery');
  wp_enqueue_script('theme_fancybox', get_stylesheet_directory_uri() . '/fancybox/source/jquery.fancybox.pack.js', 'jquery');
}

Wer fancyBox in ein anderes Verzeichnis legen möchte, kann das tun, dann sind nur die Pfade im Script anzupassen.

Was dann noch fehlt, ist der Aufruf von fancyBox. Mit folgenden Zeilen würde fancyBox für alle jpge/jpeg- und png-Dateien „installiert“. Dazu müssen natürlich die Images selbst wie in der fancyBox-Dokumentation beschrieben markiert sein; aber das hat dann nichts mehr mit WordPress zu tun.

jQuery(document).ready(function() {
  jQuery('a[href$="jpg"], a[href$="png"], a[href$="jpeg"]').fancybox();
});

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.