Innerhalb von WordPress sind eine ganze Reihe von Javascript Bibliotheken vorhanden, diese kann man einfach nutzen und muss sie nicht extra in Themes und Plugins mitbringen. Ebenfalls empfiehlt sich diese Vorgehensweise, damit Bibliotheken nicht mehrfach geladen werden. Einiges Hinweise zu beiden Themen findet ihr in den Beiträgen JavaScript-Bibliotheken in und aus WordPress nutzen und Abfrage einer Script-Version in WordPress.
Ab und an braucht man aber etwas bestimmtes und einiges davon wiederholt sich und daraus sind einige Code-Schnippsel entstanden, die hier nun abgelegt sind. Dabei möchte ich speziell am Beispiel jQuery zeigen, wie das geht - liegt zum einen daran, dass jQuery mit vielen Plugins im Core von WordPress vorhanden ist und dass die Arbeit mit jQuery recht unkompliziert ist. Prinzipiell gelten die Hooks und Aufrufe aber auch für eigene Scripte und andere Bibliotheken.
Die Hooks zum einhaken
WordPress bietet die Hooks um an bestimmten Punkten im Core einzuhaken. Hier ist einer der Stärken von WordPress und die folgenden drei Hooks sind insbesondere für das inkludieren von Scripten bei Themes interessant. Die nachfolgenden Beispiele zeigen die Verwendung auf.
jQuery von WordPress im Theme mit der Google AJAX Library ersetzen
Im folgenden Source wird die jquery-Library von Google CDN geladen; die Nutzung von jQuery kann aber ungestört genutzt bleiben. Andere Plugins können also via wp_enqueue_script() sehr einfach auf die Bibliothek zugreifen.
function fb_greyfoto_init() {
if ( !is_admin() ) { // prinzipiell überflüssig, da der Hook nur im Theme zieht
wp_deregister_script( 'jquery' ); // deregister Schlüssel jquery
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2'); // registriere Schlüssel jquery mit der URL von Google CDN
wp_enqueue_script( 'jquery' ); // binde jquery ein
}
}
// nur für Theme, ab WordPress 3.0
add_action( 'after_setup_theme', 'fb_greyfoto_init' ); // Theme aktiv, inkludiere Funktion
jQuery Library im Footer
Der Standard-Aufruf von wp_enqueue_script( 'jquery' ) im Theme sorgt zwar dafür, dass man jQuery von WordPress holt und wenn alle Plugins und Themes die Bibliothek so referenzieren, dann wird die Bibliothek auch nur einmal eingebunden, aber jQuery wird nicht im Footer geladen, sondern im head der Site. Daher muss der Aufruf umgestellt werden und der Parameter für "lade im Footer" mitgegeben werden.
Im Aufruf des Beispiel zeigt sich auch der Unterschied der Hooks, da after_setup_theme erst ab WordPress 3.0 zur Verfügung steht.
function fb_greyfoto_init() {
if ( !is_admin() ) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.4.2', true ); // lade im Footer - true
wp_enqueue_script( 'jquery' );
// js vom Theme laden, Vorraussetzung jQuery
wp_enqueue_script( 'styleswitcher', get_bloginfo( 'template_directory') . '/js/styleswitcher.jquery.php', array( 'jquery'), '1.3.2', true ); // lade mein Script mit Schlüssel styleswitcher im Footer und benutze jquery
wp_enqueue_script( 'greyfoto', get_template_directory_uri() . '/js/photoblogfb.js', array( 'jquery', 'styleswitcher'), '1.1.3.1', true ); // nutze jquery und styleswitcher und lade dann Script greyfoto
}
}
// auch für WP < version 3.0
global $wp_version;
if ( version_compare($wp_version, "3.0alpha", "<") ) {
add_action( 'init', 'fb_greyfoto_init' );
} else {
add_action( 'after_setup_theme', 'fb_greyfoto_init' );
}
Das obige Beispiel kann man noch ein wenig eleganter lösen und so das Laden der Scripte an WP übergeben; wichtig ist, dass die eigenen Scripte über einen Schlüssel registriert sind und diese Schlüssel gibt man dann nur als Voraussetzung mit.
function fb_greyfoto_init() {
if ( !is_admin() ) {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.4.2', true ); // lade im Footer - true
wp_register_script( 'styleswitcher', get_template_directory_uri() . '/js/styleswitcher.jquery.php', array( 'jquery'), '1.3.2', true ); // registrier mein Script mit Schlüssel styleswitcher für das Laden im Footer und Vorraussetzung jquery
wp_register_script( 'greyfoto', get_template_directory_uri() . '/js/photoblogfb.js', array( 'jquery', 'styleswitcher'), '1.1.3.1', true ); // nutze jquery und styleswitcher und lade dann Script greyfoto
wp_enqueue_script( array('greyfoto') ); // greyfoto braucht styleswitcher und jquery
}
}
add_action( 'after_setup_theme', 'fb_greyfoto_init' );
Script bei spezieller Seite laden
Manche Scripte braucht man explizit nur auf bestimmten Templates, Seiten oder Beiträgen - dazu sind die Conditional Tags da; es gilt sie zu nutzen. Hier beginnt Performance-Optimierung. Das folgende Script wird nur beim Template custom-page.php geladen.
function fb_greyfoto_page_init() {
if ( !is_page_template( 'custom-page.php' ) )
return;
wp_enqueue_script( 'mypagescript', get_template_directory_uri() . '/js/my_script_4_page.js', array('jquery'), '0.1', true );
}
add_action( 'template_redirect', 'fb_greyfoto_page_init' );
Die Verwendung des $
Auch innerhalb der Scripte gibt es einiges zu beachten.
Um mit $ zu arbeiten, wie viele mit jQuery gewohnt sind, muss Jquery aan $ übergeben werden; einfach und schnell passiert und nun kann man wie gewohnt arbeiten. Die Kurzvariante $(function() {} ); sollte man sich innerhalb von WordPress angewöhnen.
jQuery(function ($) {
// hier kann man nun ohne Probleme $ als Referenz auf jQuery nutzen
});
Um zu prüfen, ob das HTML geladen ist, nutzt man den folgenden Aufruf. So stellt man sicher, dass der DOM geladen ist und man via jQuery das DOM durchsuchen kann und nun die eigentliche Arbeit des Scriptes starten kann. Ein klare Empfehlung also für diese Variante. Die vielen Vorteile möchte ich nicht erklären, dies kann man genau und umfangreich im Beitrag Introducing $(document).ready() nachlesen.
jQuery(document).ready(function ($) {
$('#id').toggle({
//paramter für bsp. toggle
});
});
Danke für diese Tipps
Hallo Frank
Danke für den Artikel. Eine kleine Ergänzung hätte ich hier noch zum Einbinden von jQuery und anderen Libraries. Anstatt jedes Skript via
wp_enqeue_script()zu laden, kann man auch WordPress damit beauftragen. Dies macht man ja, wie du bereits erwähnt hast, über das mitgegebene Abhängigkeits-Array.Die beiden Aufrufe kann man sich dann aber getrost schenken:
Wichtig ist einfach nur, dass man die Abhängigkeiten im mitgegebenen Array nicht vergisst und dort auch wirklich die registrierten Skriptnamen einträgt.
Der neue Code wäre dann wie folgt (Pfad gekürzt, damits in den comment passt):
@Roman: ja, ich wollte dies auch verdeutlichen, in dem ich das Array unten dran gepackt habe; aber vielleicht zu unverständlich. Danke für die Ergänzung. Wichtig ist in dem Fall ja, dass man die Schlüssel registriert hat.
@Roman: habe mal den Post noch ein wenig ergänzt, vielleicht passt es nun besser?
Wunderbar. Nun hab ich nichts mehr dran auszusetzen
.
Vielen Dank für den Tipp. Haben so einige WordPress Bloggs am laufen, da hat uns dieser Beitrag sehr weitergeholfen
Oh das liest sich toll. Wie immer bin ich dann wohl mit Mootools wieder ganz allein ^^ ... einige Deiner Beispiele lassen sich aber auch gut in abgewandelter Form auch dafür anwenden. Abfragen zum Script für bestimmte Seiten löse ich "klassisch": if_is_page/archive etc. Klappt auch wunderbar.
@Nicki: das inkludieren ist gleich, registriere den Schlüssel
mootoolsund dann kannst du das immer nutzen. Die Verwendung ist gleich; entscheident ist die Referenz darauf, so dass sich WP um das ausliefern kümmert, keine Redundanz da ist und die Reihenfolge stimmt.Erledigt ^^. Danke
Hi Frank,
danke für die coole Einführung. Habe zwar selber auch schon damit gearbeitet, allerdings doch noch die ein oder andere Sache mitgenommen.
Ach ja: auch in Drupal kann man tolle Sachen mit JQuery machen
Gruß Simon
Prima Tipp. JQuery ist ja ohnehin eine feine Sache mit vielen schönen Effekten und z.B. Bildergalerien, aber tatsächlich ist manchmal die Integration in bestehende Systeme (CMS etc.) nicht ganz so trivial. Danke für den Beitrag.
Guten Abend.
Ich habe mir gerade den Kopf darüber zerbrochen wie ich jquery nur in den Beiträgen im footer laden kann. Leider verstehe ich in diesem sehr guten Beitrag vieles nicht ganz, aber ist es nicht einfacher wenn man direkt in der single.php
<script type='text/javascript' src='http://www.meineseite.net/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
ganz am ende aber noch vor dem
<?php get_footer(); ?>einfügt?Gruss Martin
PS. Jetzt ist es richtig.
@Martin: sollte man so nicht tun, dafür gibt es die Conditional Tags und mit is_single() wird nur die Beitragsseite angesprochen. Ebenso sollten Scripte via Funktion wp_enqueue_script() bzw. wp_register_script() eingebunden werden; Beiträge dazu gibt es hier im Bog genug.
Hallo Frank, vielleicht gehört meine frage ja nicht hierhin aber du bist meine zuverlässigste Adresse
Folgendes, ich versuche ganzen Tag eine Jquery Accordion menü in WordPress einzubinden. Geschaft habe ich zwar schon aber jedesmal wenn ich Seite wechsele klappt sich die menüs zu. Wie kann ich das schaffen das die Aktuelle Unterseite im menü aufgeklappt ist?
Hier der Code:
function initMenus() {
$('.children', this).hide();
$('ul.menu ul').hide();
$.each($('ul.menu'), function(){
$('.children li').show();
$('#' + this.id + '.children current_page_parent li').show();
});
$('ul.menu li a').click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
Dazugehörige HTML code.
ul id="menu" class="menu"
li class="page_item page-item-91" a href="http://xyz.com/">Home/li
li class="page_item page-item-116" a href="http://xyz.com/info/">Über uns
li class="page_item page-item-124" a href="http://xyz.com/strategie/">strategie
ul class='children'>
li class="page_item page-item-158" a href="http://xyz.com/strategie/kriterien/"> Kriterien
li class="page_item page-item-163 current_page_item" a href="http://xyz.com/strategie/branchen/">Branchen Fokus/a /li
li class="page_item page-item-165"><a href="http://xyz.com/strategie/ansatz/" Ansatz
/li>
/ul>
Vielen dank
@mrroob: kann man das irgendwo live ansehen, via FireBug? bin aktuell so gut wie nie am Rechner und daher sehr selten Zeit.
Danke Frank, hier Demo Link http://bit.ly/bdJD21 menü punkte Team und Strategie sind klappbar.Danke
@mrboob: du musst die klasse current_page_parent ansprechen und ebenfalls die children davon, also
.current_page_parent, .current_page_parent .children. Hier siehst du aktuell gerade ein Beispiel, JS kannst du einsehen, ist ja abrufbar.Jaaa, hats geklappt, Danke für deine tip Frank und einen schönen Nacht
Gute Einleitung.
Habe aber zu "Die Verwendung des $" noch folgenden Hinweis gefunden, der evtl. machem helfen könnte.