So verknüpfen Sie externe jQuery / Javascript-Dateien mit WordPress

15

Also benutze ich Starkers, um mein nächstes WP-Thema zu erstellen, und ich bin auf ein kleines Problem gestoßen. Ich habe meine eigene Version von jQuery in die header.phpDatei aufgenommen, aber als ich meine Site mit Firebug inspizierte, bemerkte ich, dass jquery zweimal heruntergeladen wurde Ich habe ein bisschen gegraben und festgestellt, dass ich nicht nur die Datei einbezog, sondern auch die wp_head()Funktion.

Bei dem Versuch, das Problem zu beheben, bemerkte ich einen Kommentar in der Header-Datei, der aus dem Twenty Ten-Thema stammte:

/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head>, such 
 * as styles, scripts, and meta tags
 */

Hier ist also mein Problem, ich habe den Eindruck, dass die jQuery-Datei vor jeder anderen Datei gesetzt werden muss, die sie verwenden möchte, und das wp_head()sollte das Letzte in dem <head>Element sein Ich habe wp_head()die oberste Zeile gesetzt, damit die in WP enthaltene jQuery-Datei für alle meine Plugins verwendet wird, auch wenn darauf hingewiesen wird, dass dies nicht der Fall ist.

Ich habe die jQuery-Zeile in der wp_head()Funktion auskommentiert, aber sie ist für die Admin-Seite erforderlich, sodass ich sie zurücksetzen musste.

Ich würde auch gerne (zumindest experimentieren) mit der Google CDN-Version von jQuery arbeiten, möchte sie aber nicht zweimal einbinden!

Ich hoffe, Sie verstehen, was ich zu erklären versuche. Vorschläge, wie ich dieses Problem lösen kann, sind sehr willkommen. Ich würde mich auch über Ratschläge freuen, wie Sie mit Ihren JavaScript-Dateien mit der Header-Datei umgehen.

Vielen Dank!

themes customization theme-development jquery wp-head Ben Everard
quelle
Dies sollte mit einem Titel wie "So verknüpfen Sie externe jQuery / Javascript-Dateien mit WordPress" versehen werden.
MikeSchinkel
Ich stimme zu, ich war mir nicht sicher, wie ich es nennen soll, da ich mit dem Problem, das ich hatte, nicht allzu vertraut war :-)
Ben Everard

Antworten:

9

Nach dem Wortlaut Ihrer Frage müssen Sie Skripte hinzufügen, indem Sie <script>Tags in Ihre Vorlage schreiben . Fügen Sie Ihre eigenen Skripte über wp_enqueue_script()in Ihre Vorlage ein functions.php, wobei Sie die Abhängigkeiten von jQuery entsprechend einstellen, und wp_head()fügen Sie die Skripte für Sie hinzu.

function my_scripts() {
    wp_enqueue_script( 'my-sweet-script', get_bloginfo('template_directory') . '/script.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

Weitere Informationen finden Sie auf der Codex-Seite .

Annika Backström
quelle
Sie denken zu Recht, dass ich mithilfe des <script>Tags Skripte hinzufüge. Dies ist die Alternative, nach der ich gesucht habe. Vielen Dank! :-)
Ben Everard
3
Wenn Sie Ihr Skript nur am Front-End hinzufügen möchten, schließen Sie 'template_redirect'stattdessen an 'init'.
John P Bloch
Gute Sachen, ich werde meine Antwort aktualisieren. Fast hätte ich vorgeschlagen, die Warteschlange einzuschließen is_admin().
Annika Backstrom
Ich reihe im Allgemeinen die Skripte in der Vorlagendatei über dem get_header()in functions.phpeine Warteschlange ein. Wenn Sie dies tun, reihen Sie sie auf jeder Seite in eine Warteschlange, die möglicherweise nicht erforderlich ist. Wenn ich ein globales habe, stelle ich es in die Warteschlange, header.phpbevor wp_head()es aufgerufen wird. Auf diese Weise befinden sich die Warteschlangen dort, wo Sie sie erwarten würden<head>
Joe Hoyle
Manchmal ist es besser, Skripte am unteren Rand der Seite hinzuzufügen. Es ist der letzte Parameter von codex.wordpress.org/Function_Reference/wp_enqueue_script (5th, $ in_footer), setzen Sie ihn auf true. Wenig Info für diejenigen, die mehr Kontrolle brauchen.
Hakre
7

Ich schlage vor, einen Blick auf 5 Tipps zur Verwendung von jQuery mit WordPress zu werfen . Unter anderem wird der Code angezeigt, der zum Laden von jQuery aus der Google-Bibliothek erforderlich ist:

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

Sie können auch das Plugin " Google-Bibliotheken verwenden" aufrufen.

Travis Northcutt
quelle
1
Dies ist eigentlich eine bessere Antwort, da hier gezeigt wird, wie die Google CDN-Version von jQuery in die Warteschlange gestellt wird. Aber, wie John an anderer Stelle vorgeschlagen hat, wenn Sie dies nur am Front-End tun möchten, nehmen Sie template_redirectstattdessen den Anschluss an init.
EAMann
Guter Punkt, wo es geladen wird. Obwohl der Admin-Bereich wirklich auch von jQuery Gebrauch macht, oder? Wie auch immer, danke, dass du gezeigt hast, wie man es kontrolliert.
Travis Northcutt
Ja, ich habe gerade die 5 Tipps für jquery / wp post gefunden, danke für Ihre Antwort :-)
Ben Everard
5 Tipps zur Verwendung von jQuery mit WordPress - der Link funktioniert nicht mehr.
Hakre
HINWEIS: Das Beispiel enthält eine "ältere" Version von jQuery. In der aktuellen WP-Version (3.0.1) wird jQuery 1.4.2 ...
t31os
1

Obwohl @tnorthcutt korrekt ist, dass Sie die native JQuery von WP ordnungsgemäß aus der Warteschlange entfernen sollten, wenn Sie Ihre eigene JQuery laden möchten, treten beim Laden einer anderen JQuery-Version, die von WP Core unterstützt wird, mit Sicherheit Probleme auf. Sowohl Core als auch Plugins setzen voraus, dass sie vorhanden sind. Wenn Sie Ihr Thema also nicht jedes Mal, wenn WP aktualisiert wird, mit der neuesten JQuery aktualisieren, kann Ihre Website beschädigt werden.

Der folgende Code stellt sicher, dass Ihr Design immer die richtige Version von jquery lädt, indem Sie zuerst nachsehen, welche Version WP verwendet, und diese dann von Google laden:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');
cjbj
quelle