Sidebar
ein-/ausblenden

WordPress und jQuery - einige Tipps

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.

jQuery Logo
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.

init
template_redirect
after_setup_theme ab WordPress 3.0

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
	});
});

Artikel #1172, 17. Juni 2010 · Code, Themes, Tipps, WordPress · 19 Kommentare · Kommentar schreiben
Tags: Javascript, jQuery, WordPress, WP
Kommentar-Feed zum Artikel · TrackBack URL · Kurzlink

19 Kommentare zu „WordPress und jQuery - einige Tipps“

1
Kommentar von Michael Pehl
17. Juni 2010 um 22:01
Danke für diese Tipps
2
Kommentar von Roman
18. Juni 2010 um 11:36
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:
```
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'styleswitcher', '/path/to/styleswitcher.js', array( 'jquery'), '1.3.2', true );
```
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):
```
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 );

        // js vom Theme laden, Vorraussetzung jQuery
        wp_enqueue_script( 'greyfoto', '/path/to/greyfoto.js', array( 'jquery', 'styleswitcher'), '1.1.3.1', true ); 

    }
}
```
3
Kommentar von Frank Bültge
18. Juni 2010 um 11:45
@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.
4
Kommentar von Frank Bültge
18. Juni 2010 um 11:51
@Roman: habe mal den Post noch ein wenig ergänzt, vielleicht passt es nun besser?
5
Kommentar von Roman
18. Juni 2010 um 12:05
Wunderbar. Nun hab ich nichts mehr dran auszusetzen .
6
Kommentar von Marco
19. Juni 2010 um 11:59
Vielen Dank für den Tipp. Haben so einige WordPress Bloggs am laufen, da hat uns dieser Beitrag sehr weitergeholfen
7
Kommentar von Nicki
22. Juni 2010 um 02:18
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.
8
Kommentar von Frank Bültge
22. Juni 2010 um 07:52
@Nicki: das inkludieren ist gleich, registriere den Schlüssel mootools und 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.
9
Kommentar von Nicki
22. Juni 2010 um 16:13
Erledigt ^^. Danke
10
Kommentar von Simon
22. Juni 2010 um 17:16
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
11
Kommentar von Stefan
20. Oktober 2010 um 16:56
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.
12
Kommentar von Martin
2. November 2010 um 22:33
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.
13
Kommentar von Frank Bültge
5. November 2010 um 20:29
@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.
14
Kommentar von mrboob
8. November 2010 um 19:23
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
15
Kommentar von Frank Bültge
8. November 2010 um 19:57
@mrroob: kann man das irgendwo live ansehen, via FireBug? bin aktuell so gut wie nie am Rechner und daher sehr selten Zeit.
16
Kommentar von mrboob
8. November 2010 um 20:17
Danke Frank, hier Demo Link http://bit.ly/bdJD21 menü punkte Team und Strategie sind klappbar.Danke
17
Kommentar von Frank Bültge
8. November 2010 um 21:32
@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.
18
Kommentar von mrboob
8. November 2010 um 21:47
Jaaa, hats geklappt, Danke für deine tip Frank und einen schönen Nacht
19
Kommentar von A.U.
26. September 2011 um 19:41
Gute Einleitung.
Habe aber zu "Die Verwendung des $" noch folgenden Hinweis gefunden, der evtl. machem helfen könnte.

Kommentar schreiben

Kommentar-Hilfe

händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.

Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.

xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>

Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als < und > als > einfügt.

E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.

Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.

Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.

Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.

bueltge.de [by:ltge.de]

Ähnliche Beiträge

Journal

Projekte

Nutze die Feeds

Themen

hier werben Sponsoren