Jak poprawnie dołączyć pliki jQuery i JavaScript?

Robię to teraz za pomocą następującego kodu:

function uw_load_scripts() {
    // De-register the built in jQuery
    wp_deregister_script('jquery');
    // Register the CDN version
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    // Load it in your theme
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'uw_load_scripts' );

To działa, ale czy powinienem to zrobić dla wszystkich, jak ten, czy dla wszystkich oprócz administratora (aby backend korzystał z wersji WordPress?):

if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

Ta wersja w ogóle nie działa, otrzymuję wersję jQuery WordPress, a nie wersję Google.

Dlatego powinienem w ogóle wyrejestrować jQuery zawarte w WordPress?

Ponadto, w jaki sposób mogę dodać własne skrypty (skrypty suwaka, modernizator i własne custom.js) we właściwy sposób? Myślę, że powinienem to zrobić również poprzez functions.php, a nie w nagłówku, tak jak teraz, ale nie jestem pewien, jak bym to zrobił.

Pierwsza praktyczna zasada: nie wyrejestrowuj skryptów z pakietami rdzeniowymi i zastępuj innymi wersjami , chyba że masz absolutną pewność, że żaden motyw, wtyczki lub sam rdzeń nie ulegnie awarii z powodu zmiany wersji. Naprawdę, chyba że absolutnie potrzebujesz alternatywnej wersji skryptu zawierającego rdzeń, po prostu użyj tego, co jest dołączone do rdzenia.

Po drugie, zdecydowanie wp_enqueue_scriptszalecam raczej rejestrowanie i kolejkowanie skryptów niż init. ( Działa w init, ale z punktu widzenia zabawy z innymi , najlepiej użyć najbardziej semantycznie poprawnego haka.)

Po trzecie, do kolejkowania własnych skryptów niestandardowych używasz tych samych metod, jak powyżej:

<?php
function wpse45437_enqueue_scripts() {
    if ( ! is_admin() ) {
        $script_path = get_template_directory_uri() . '/js/';
        // Enqueue slider script
        wp_enqueue_script( 'wpse45437_slider', $script_path . 'slider.js', array( 'jquery' ) );
        // Enqueue modernizr script
        wp_enqueue_script( 'wpse45437_modernizr', $script_path . 'modernizr.js', array( 'jquery' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse45437_enqueue_scripts' );
?>

Po prostu dodaj wszystkie skrypty, których potrzebujesz do kolejkowania.

Mam nadzieję, że to pomoże, sprawdź kodeks, aby wp_enqueue_scriptsuzyskać więcej informacji.

1. Nie używaj initdo kolejkowania . Użyj wp_enqueue_scriptsdo frontendów i admin_enqueue_scriptspo stronie administratora. Możesz jednak użyć initdo zarejestrowania skryptów.
2. Hak wp_enqueue_scriptsstrzela tylko z przodu (a nie ze strony logowania) - więc nie musisz sprawdzać is_admin().

3. Chyba że masz konkretny powód, by zrobić inaczej, chciałbym zaproponować rejestracji i kolejek przy użyciu skryptów functions.phpdo tematów lub w plug-in inaczej. Po prostu stawiasz:

    function myprefix_load_scripts() {
      // Load scripts here
    }
    add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );

4. Jeśli celem jest kolejkowanie skryptu, gdy używany jest krótki kod, możesz użyć go wp_enqueue_scriptw wywołaniu zwrotnym shortcode, aby ustawić go w kolejce tylko w razie potrzeby (spowoduje to wydrukowanie go w stopce od wersji 3.3 ).

5. Nie powinieneś ponownie rejestrować istniejącego jQuery po stronie administratora. Możesz coś złamać: D.

6. Wtyczki nie powinny ponownie rejestrować istniejącego jQuery.

7. Powinieneś rozważyć zalety i wady ponownej rejestracji jQuery. Na przykład może uszkodzić niektóre wtyczki, jeśli zarejestrujesz starą wersję (może nie teraz, ale w przyszłości ...)

Uczciwe ostrzeżenie: wyrejestrowanie spakowanej wersji jQuery w pakiecie WP na własną rękę może powodować problemy, szczególnie jeśli nie jesteś bardzo ostrożny, aby upewnić się, że zmieniasz wersję, na którą wskazujesz, za każdym razem, gdy WP aktualizuje swoją wersję. Dotyczy to podwójnie wtyczek, które często (lub często powinny przynajmniej) piszą swoje wtyczki, aby uzyskać maksymalną kompatybilność z wersją WP jQuery.

To powiedziawszy, twoja pierwsza wersja jest poprawna - jest uzależniona wp_enqueue_scripts. Twoja druga funkcja jest uzależniona od tego init, co może być przyczyną jej nieprawidłowego działania.

Dodaj własne skrypty w podobny sposób:

function bbg_enqueue_scripts() {
    // You should probably do some checking to see what page you're on, so that your
    // script only loads when it needs to
    wp_enqueue_script( 'bbg-scripts', get_stylesheet_directory_url() . '/js/bbg-scripts.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'bbg_enqueue_scripts' );

Zakładam, że ładujesz skrypty z jskatalogu w bieżącym katalogu motywów; zmień parametr URI, jeśli to nieprawda. Trzeci parametr array( 'jquery' )mówi, że to bbg-scriptszależy jqueryi dlatego należy go później załadować. Zobacz https://codex.wordpress.org/Function_Reference/wp_enqueue_script, aby uzyskać więcej informacji.

if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

To nic nie da ... Podejrzewam, że masz na myśli

if (!function_exists('load_my_scripts')) {

Twój przykład załaduje funkcję load_my_scripts tylko wtedy, gdy już istnieje (czego nie ma, więc nie będzie, a jeśli to zrobi, spowoduje błąd)

Jeśli ze względu na wydajność chcesz załadować jquery i inne podstawowe pliki js z CDN, upewnij się, że ładujesz tę samą wersję, aby zapobiec nieprzyjemnym sytuacjom z funkcjami rdzenia i wtyczek. Lubię to:

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

Po sprawdzeniu różnych metod ładowania jquery (nie tylko w tym poście), zdałem sobie sprawę, że żadna z nich nie wykonuje wszystkich z nich:

1. Zarejestruj (i być może umieść w kolejce) jquery za pomocą funkcji, aby mogła być używana przez wtyczki.
2. Załaduj go z Google CDN z adresem względnym protokołu.
3. Powrót do kopii lokalnej, jeśli Google jest offline.

Istnieje wiele alternatywnych wersji, które robią niektóre z nich na liście, ale nie wszystkie, więc napisałem swoją wersję, czesając i modyfikując niektóre z już dostępnych metod. Oto on:

function nautilus7_enqueue_scripts() {

    // Load jquery from Google CDN (protocol relative) with local fallback when not available
    if ( false === ( $url = get_transient('jquery_url') ) ) {

        // Check if Google CDN is working
        $url = ( is_ssl() ? 'https:' : 'http:' ) . '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        $resp = wp_remote_head($url);

        // Load local jquery if Google down
        if ( is_wp_error($resp) || 200 != $resp['response']['code'] ) {

            $url = get_template_directory_uri() . '/js/vendor/jquery-1.7.2.min.js';
        }

        // Cache the result for 5 minutes to save bandwidth
        set_transient('jquery_url', $url, 60*5);
    }

    // Deregister Wordpress' jquery and register theme's copy in the footer
    wp_deregister_script('jquery');
    wp_register_script('jquery', $url, array(), null, true);

    // Load other theme scripts here

}
add_action('wp_enqueue_scripts', 'nautilus7_enqueue_scripts');

Aby zaoszczędzić przepustowość i nie pingować Google za każdym razem, gdy strona jest ponownie ładowana, pamięta, czy Google CDN jest w trybie online, czy nie przez 5 minut za pomocą Wordpress Transient API.