Как правильно включить файлы 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 вообще?

Кроме того, как мне добавить мои собственные скрипты (скрипты слайдера, modernizr и мои собственные custom.js) правильным способом? Я думаю, что я должен сделать это через functions.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-error 500 (Internal server error)». Где-то есть ошибка?
Йохан Даль

Да; в 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, убедитесь, что вы загружаете одну и ту же версию, чтобы предотвратить неприятные вещи, возникающие с функциями ядра и плагинов. Как это:

$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 минут с использованием Wordpress Transient API.


Не рекомендуется. Теперь вам нужно обновлять скрипт после каждого обновления WordPress, чтобы он точно соответствовал версии jQuery, которую использует WordPress. Кроме того, в некоторых случаях Google не может отправить сжатую библиотеку, поэтому ваша страница теперь загружается медленнее.
fuxia

Я не использую WordPress JQuery. Прочитайте код, пожалуйста. Я использую версию темы. И если вам не нравится Google, вы можете использовать другой CDN.
nautilus7

Но в том-то и дело: вы должны использовать WordPress jQuery, чтобы убедиться, что версия верна.
fuxia

Я не слежу за тобой. Я беру любую нужную версию с Google и связываю ту же версию с моей темой. Вот как все это делают. Wordpress может использовать (в разделе администратора) любую версию, с которой он поставляется.
nautilus7

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