Jak połączyć zewnętrzne pliki jQuery / JavaScript z WordPress

15

Więc używam Starkers do oparcia mojego następnego motywu WP i napotkałem mały problem. Włączyłem do header.phppliku moją własną wersję jQuery , ale podczas sprawdzania mojej witryny za pomocą Firebug zauważyłem, że jquery jest pobierane dwukrotnie, ja zrobiłem trochę kopania i zauważyłem, że nie tylko włączałem plik, ale także wp_head()funkcja.

Próbując rozwiązać problem, zauważyłem komentarz w pliku nagłówkowym, którego źródło pochodzi z motywu Dwadzieścia Dziesięciu:

/* 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
 */

Więc oto mój problem, mam wrażenie, że plik jQuery musi zostać ustawiony przed jakimkolwiek innym plikiem, który chce go użyć i że wp_head()powinien to być ostatni <head>element w elemencie, jestem teraz trochę zdezorientowany, bo zastanawiam się, czy powinienem włożyłemwp_head() na górze, więc plik jQuery dołączony do WP będzie używany we wszystkich moich wtyczkach, nawet jeśli mówi, żeby tego nie robić.

Skomentowałem linię jQuery w wp_head()funkcji, ale jest ona wymagana dla strony administratora, więc musiałem ją odłożyć.

Chciałbym również użyć (przynajmniej eksperymentować) z użyciem jQuery w wersji Google CDN, ale nie chcę dołączać jej dwukrotnie!

Mam nadzieję, że rozumiesz, co próbuję wyjaśnić. Wszelkie sugestie dotyczące rozwiązania tego problemu byłyby bardzo mile widziane. Doceniam również wszelkie porady dotyczące obsługi plików JavaScript za pomocą pliku nagłówkowego.

Dzięki!

themes customization theme-development jquery wp-head Ben Everard
źródło
Powinno to zostać zmienione na „Jak połączyć zewnętrzne pliki jQuery / JavaScript z WordPress”.
MikeSchinkel,
Zgadzam się, nie byłem pewien, jak to nazwać, ponieważ nie byłem zbyt zaznajomiony z problemem, który miałem :-)
Ben Everard,

Odpowiedzi:

9

Z treści pytania należy dodawać skrypty, pisząc <script>tagi w szablonie. Dodaj własne skrypty wp_enqueue_script()w szablonie functions.php, odpowiednio ustawiając zależności od jQuery, i wp_head()doda skrypty dla ciebie.

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

Zobacz stronę kodeksu, aby uzyskać więcej informacji.

Annika Backstrom
źródło
Masz rację, myśląc, że dodaję skrypty za pomocą <script>znacznika, to jest alternatywa, której szukałem, wielkie dzięki! :-)
Ben Everard
3
Jeśli chcesz dodać skrypt tylko w interfejsie, podłącz 'template_redirect'zamiast 'init'.
John P Bloch,
Dobre rzeczy, zaktualizuję swoją odpowiedź. Prawie zasugerowałem owinięcie kolejki is_admin().
Annika Backstrom
Generalnie kolejkuję skrypty w pliku szablonu powyżej get_header(), wykonanie tego functions.phpspowoduje umieszczenie go w kolejce na każdej stronie, co może nie być wymagane. Jeśli mam globalny, umieszczam go w kolejce header.phpprzed wp_head()wywołaniem. W ten sposób kolejki są tam, gdzie można się spodziewać<head>
Joe Hoyle
Czasami lepiej jest dodawać skrypty na dole strony. Jest to ostatni parametr codex.wordpress.org/Function_Reference/wp_enqueue_script (5., $ in_footer), ustaw go na true. Niewiele informacji dla tych, którzy potrzebują większej kontroli.
hakre
7

Proponuję rzucić okiem 5 porad dotyczących używania jQuery z WordPress . Pokazuje między innymi kod niezbędny do załadowania jQuery z biblioteki Google:

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

Możesz również sprawdzić wtyczkę Użyj bibliotek Google .

Travis Northcutt
źródło
1
To właściwie lepsza odpowiedź, ponieważ pokazuje, jak ustawić w kolejce wersję jQuery Google CDN. Chociaż, jak John sugerował gdzie indziej, jeśli chcesz to zrobić tylko z przodu, podłącz template_redirectzamiast init.
EAMann
Dobra uwaga na temat tego, gdzie się ładuje. Chociaż tak naprawdę obszar administracyjny korzysta również z jQuery, prawda? Tak czy inaczej, dziękuję za pokazanie, jak to kontrolować.
Travis Northcutt,
Tak, właśnie znalazłem 5 porad dotyczących postu jquery / wp, dzięki za odpowiedź :-)
Ben Everard
5 porad dotyczących korzystania z jQuery z WordPress - link już nie działa.
hakre
UWAGA: Przykład zawiera „starszą” wersję jQuery, bieżąca wersja WP (3.0.1) działa jQuery 1.4.2 ...
t31os
1

Chociaż @tnorthcutt ma rację, że powinieneś poprawnie usunąć kolejkę natywnej jquery WP, jeśli chcesz załadować własną, na pewno napotkasz problemy podczas ładowania innej wersji jquery niż rdzeń WP. Zarówno rdzeń, jak i wtyczki polegają na tym, że tam jest. Więc jeśli nie zaktualizujesz swojego motywu najnowszą jquery za każdym razem, gdy WP jest aktualizowany, Twoja strona może się zepsuć.

Poniższy kod upewni się, że Twój motyw zawsze ładuje poprawną wersję jquery, najpierw sprawdzając, której wersji używa WP, a następnie ładując ją z Google:

$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
źródło