Як правильно включити файли jQuery та JavaScript?


16

Я роблю це зараз із таким кодом:

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

Це працює, але чи варто робити це для всіх, як це, або для всіх, крім адміністратора (щоб бекенд використовував версію 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');

Ця версія взагалі не працює, я отримую версію jQuery WordPress, а не версію Google.

Тому я повинен скасувати реєстрацію jQuery, який включений у WordPress?

Крім того, як я можу додати свої власні сценарії (сценарії слайдера, модернізатор та власний custom.js) правильним способом? Я думаю, що я повинен це робити і через function.php, а не в заголовку, як це роблю зараз, але я не знаю, як би це зробити.

Відповіді:


20

Перше головне правило: не скасовуйте реєстрацію скриптів, пов’язаних з ядрами, та не замінюйте їх іншими версіями , якщо ви абсолютно не впевнені, що жодна тема, плагіни чи ядро ​​не зламаються через зміну версії. Дійсно, якщо вам абсолютно не потрібна альтернативна версія скрипта з ядром, просто використовуйте те, що в комплекті з ядром.

По-друге, я настійно рекомендую підключитися wp_enqueue_scriptsдля реєстрації скриптів та їх створення, а не для цього init. (Це працює в режимі init, але з точки зору гри - добре-з іншими - найкраще використовувати найбільш семантично правильний гачок.)

По-третє, для отримання власних власних сценаріїв ви використовуєте ті самі методи, що і вище:

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

Просто додайте будь-які сценарії, які вам потрібні.


4
+1 на абсолютно необхідне ! Забагато тем (зазвичай "преміум") тем зареєстровано застарілу версію jQuery. Він порушує плагіни.
Стівен Харріс

Додавання цього сценарію до мого файлу функцій (без заяв PHP, оскільки вони вже є) дає мені "Http-помилка 500 (внутрішня помилка сервера)". Чи є десь помилка?
Йохан Даль

Так; у wp_enqueue_script()викликах виникла помилка синтаксису .
Чіп Беннетт

Дякую тепер це працює! Однак він все ще виводиться в заголовок. Хіба не краще, якщо це де в нижньому колонтитулі? Якщо так, чи можу я змінити код, щоб він був?
Йохан Даль

Ви, звичайно, можете зайнятися в нижньому колонтитулі. Просто встановіть $in_footerпараметр true у своєму дзвінку wp_enqueue_script().
Чіп Беннетт

4

Сподіваюся, це допомагає, шукайте кодекс для wp_enqueue_scriptsотримання додаткової інформації.

  1. Не використовуйте initдля записування . Використовувати wp_enqueue_scriptsдля фронтальних матеріалів та admin_enqueue_scriptsдля адміністратора. Однак ви можете використовувати initдля реєстрації сценаріїв.
  2. Гак wp_enqueue_scriptsспрацьовує лише на передній частині (а не на сторінці входу) - тому вам не доведеться перевіряти is_admin().
  3. Якщо у вас є конкретні причини вчинити інакше, я хотів би запропонувати реєстрацію і черги скрипти використовуючи functions.phpдля теми або плагіна в іншому випадку. Ви просто ставите:

     function myprefix_load_scripts() {
       // Load scripts here
     }
     add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );
  4. Якщо мета - запускати скрипт, коли використовується короткий код, ви можете скористатися wp_enqueue_scriptзворотним дзвінком для короткого коду, щоб встановити його в чергу лише за потреби (це буде надруковано у нижньому колонтитулі з 3.3 ).

  5. Вам не слід перереєструвати існуючу jQuery на стороні адміністратора. Ви можете щось зламати: D.

  6. Плагіни не повинні перереєструвати існуючий jQuery.

  7. Ви повинні зважити плюси та мінуси перереєстрації jQuery. Наприклад, він може зламати деякі додатки, якщо ви зареєструєте стару версію (можливо, не зараз, але в майбутньому ...)


1
Оголошення 5) перереєстрація насправді не має значення. Тому ми отримали функції enqueue та register. :)
кайзер

2

Справедливе попередження: скасування реєстрації запакованої WP версії jQuery на користь вашої власної може спричинити проблеми, особливо якщо ви не надто обережні, щоб переконатися, що ви змінюєте версію, на яку вказуєте, коли WP оновлює свою версію. Це подвійно стосується плагінів, які часто (або часто, принаймні, повинні писати свої додатки) для максимальної сумісності з WP-версією jQuery.

Однак, ваша перша версія правильна - це підключено wp_enqueue_scripts. Ваша друга функція підключена init, через що вона не працює належним чином.

Додайте власні сценарії аналогічним чином:

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

Я припускаю, що ви завантажуєте сценарії з jsкаталогу в поточному каталозі тем; змінити параметр URI, якщо це неправда. Третій параметр array( 'jquery' )говорить, що bbg-scriptsзалежить від цього jquery, і тому його слід завантажувати після цього. Докладнішу інформацію див. У https://codex.wordpress.org/Function_Reference/wp_enqueue_script .


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

Це не збирається нічого робити ... Я підозрюю, що ти маєш на увазі

if (!function_exists('load_my_scripts')) {

Ваш приклад завантажить функцію load_my_scripts лише тоді, коли вона вже існує (чого вона не робить, вона не буде, і якщо вона зробила б це створила помилку)


0

Якщо з міркувань продуктивності ви хочете завантажити jquery та інші основні js-файли з CDN, переконайтеся, що ви завантажуєте ту саму версію, щоб не допустити неприємних речей з функціями core та plugin. Подобається це:

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

-2

Перевіривши всі різні методи для завантаження jquery (не тільки на цій посаді), я зрозумів, що жоден з них не виконує все це:

  1. Зареєструйте jquery (і, можливо, задайте) за допомогою функції, щоб його можна було використовувати плагінами.
  2. Завантажте його з Google CDN з відповідним URL-адресом протоколу.
  3. Відкат до локальної копії, якщо Google офлайн.

У списку є багато альтернативних версій, які виконують деякі з них, але не всі, тому я написав свою версію, розчісуючи та модифікуючи деякі наявні методи. Ось:

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

Щоб зберегти пропускну здатність і не пінг Google при кожному перезавантаженні сторінки, вона пам’ятає, чи є Google CDN в Інтернеті протягом 5 хвилин, використовуючи перехідний API Wordpress.


Не рекомендовано. Тепер вам слід оновити сценарій після кожного оновлення WordPress, щоб відповідати точній версії jQuery, яку використовує WordPress. Крім того, Google не може надіслати бібліотеку стиснутою в деяких випадках, тому ваша сторінка зараз завантажується повільніше.
фуксія

Я не використовую jquery wordpress '. Прочитайте, будь ласка, код. Я використовую версію теми. І якщо вам не подобається google, ви можете використовувати інший cdn.
nautilus7

Але в цьому і справа: ви повинні використовувати WordPress jQuery, щоб переконатися в правильності версії.
фуксія

Я не стежу за тобою. Я захоплюю будь-яку версію, яка мені потрібна, з Google, і я зв’язую ту саму версію зі своєю темою. Ось так це роблять усі. Wordpress може використовувати (у розділі адміністратора) будь-яку версію, з якою вона постачається.
nautilus7

1
Ви можете використовувати будь-яку версію jQuery, яку хочете, але якщо ви поєднуєте її з темою, ви змушуєте це використовувати для своїх користувачів. Через декілька років, коли всі користуються jQuery 1.8.2, ваші користувачі будуть застрягли у застарілій версії, якщо вони не будуть постійно оновлювати тему.
Chris_O
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.