Поставить ядро ​​в нижний колонтитул?

22

У меня есть это в моем functions.phpфайле, и я не могу загрузить jQuery в нижний колонтитул. Впрочем, includesфайл загружается в нижний колонтитул нормально. Что еще мне нужно сделать?

function starter_scripts() {
    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );

    wp_enqueue_script( 'jquery', '', '', '', true );

    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );
Дези
источник
Если вы делаете это по соображениям производительности, вы можете deferвместо этого добавить к своим тегам сценария: matthewhorne.me/defer-async-wordpress-scripts
diachedelic
WP dev здесь, я сделал плагин для решения этой
проблемы

Ответы:

23

Для этого сначала нужно отменить регистрацию скрипта jQuery, а затем снова зарегистрироваться. Если вы используете jQuery с WordPress, то вам нужна следующая функция.

function starter_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true );
    wp_enqueue_script( 'jquery' );

    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

Если вы используете версию jQuery, размещенную в Google CDN, дайте мне знать, что я изменю этот код для URL CDN Google.

Роберт Хюэ
источник
5
Что вы имеете в виду? Решение - переместить jQuery в нижний колонтитул.
Роберт Хюэ,
2
Возможно, вам также понадобится проверить is_admin (), чтобы избежать внесения изменений в бэкэнд jQuery, ведь нам действительно нужно оптимизировать только внешний интерфейс наших сайтов :)
Тим Мэлоун,
1
@TimMalone - на самом деле, вы этого не делаете - wp_enqueue_scriptsиспользуется только на переднем конце, а admin_enqueue_scriptsиспользуется на заднем
dev_masta
1
Я думаю, что это решение на самом деле ужасно. Являются ли теги версии удалены с этим. Что это за начальный стиль и что это включает в себя .min.js и как это связано с jQuery.
NextGenThemes
2
@redanimalwar стартовый стиль и включает в себя файлы прямо из вопроса.
Техливи
43

Вот еще один вариант, который исключает необходимость отмены регистрации и повторной регистрации:

/**
 * Move jQuery to the footer. 
 */
function wpse_173601_enqueue_scripts() {
    wp_scripts()->add_data( 'jquery', 'group', 1 );
    wp_scripts()->add_data( 'jquery-core', 'group', 1 );
    wp_scripts()->add_data( 'jquery-migrate', 'group', 1 );
}
add_action( 'wp_enqueue_scripts', 'wpse_173601_enqueue_scripts' );

Это решение имитирует ядро ​​WordPress , устанавливая groupto 1, и именно так WordPress определяет, должен ли скрипт находиться в нижнем колонтитуле или нет (я не знаю причины этого 1, поскольку @jgraup отметил в комментариях, что это выглядит немного произвольно).

Мэтью Бойнс
источник
1
Интересный. Похоже, wp_register_scriptиспользует add_data( $handle, 'group', 1 )для перемещения скриптов в нижний колонтитул. core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… - Не могли бы вы рассказать, почему это так? Взглянув на ваш код, «группа» кажется немного произвольной. Но я могу видеть в core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… как это используется в WP_Scripts-> do_itemпозже. В любом случае, это может показаться наименее разрушительным ответом.
Jgraup
2
Я надеюсь, что кто-то может прокомментировать эти три ответа. Все разные и требуют определенных знаний WP. Поскольку Google требует, чтобы эти скрипты были ниже сгиба, это важная тема.
ssaltman
2
Лучший ответ! Примечание : он работает с WordPress 4.2.0 и использует его в functions.php в обратном вызове ловушки 'wp_enqueue_scripts'
realmag777
Привет, я попробовал вышеуказанный подход, но он не сработал. Кто-нибудь может помочь?
iSaumya
1
Это очень хорошо! Огромное спасибо. Но стоит отметить, как утверждает @tehlivi - WP использует старую версию jQuery - рассмотрите возможность отмены регистрации и регистрации более новой версии.
Сколинд
18

Лучшее решение:

add_action( 'wp_default_scripts', 'move_jquery_into_footer' );

function move_jquery_into_footer( $wp_scripts ) {

    if( is_admin() ) {
        return;
    }

    $wp_scripts->add_data( 'jquery', 'group', 1 );
    $wp_scripts->add_data( 'jquery-core', 'group', 1 );
    $wp_scripts->add_data( 'jquery-migrate', 'group', 1 );
}

Почему это лучше, чем принятый ответ ИМО

  1. Изменяет его в самом ядре, а не на более поздней стадии, когда другие вещи могут уже с ним замешаться.
  2. Строка версии хранится и не удаляется!
  3. Он не отменяет регистрацию и повторную регистрацию сценария, а просто устанавливает значение группы, которое по существу совпадает с тем, как если бы сценарий был зарегистрирован в $footer = true.

О не делать это с администратором

Если плагины добавят встроенный jquery в wp_head, произойдет сбой, когда jquery не будет загружен в этот момент, поэтому я советую вам избегать этого, пока у вас не появятся миллионы, которые редактируют ваш сайт, и вы не попытаетесь оптимизировать производительность своего администратора. Это верно и для внешнего интерфейса, поэтому вы должны следить за плохо закодированными темами или плагинами, которые принимают jquery в голове, используя встроенный код jQuery. WP и плагины регистрируют другие сценарии для административной головы с помощью jquery в deps, так что я думаю, что это не сработает.

Про это не работает

Вы должны знать, что если любой другой скрипт загружается в заголовок, имеющий jQuery в своих зависимостях, он также загрузит jQuery в заголовок прямо перед собой. И это хорошо и ожидаемо, причина существования системы wp_enqueue. Это означает, что вы скоро узнаете, если будете использовать несколько плагинов, для которых один из них потребует вызова jquery в голову. К сожалению, по умолчанию для сценариев в очереди.

Радикальное Решение

Я думаю, что это будет тормозить любой встроенный JS, который предполагает JQuery, но если это должно быть редко. Это заставит все скрипты в нижний колонтитул, независимо от того, как они в очереди.

add_action( 'wp_enqueue_scripts', 'js_to_footer' );

function js_to_footer() {
  remove_action( 'wp_head', 'wp_print_scripts' );
  remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
  remove_action( 'wp_head', 'wp_enqueue_scripts', 1 );
}
NextGenThemes
источник
2
Несмотря на то, что это может ответить на вопрос и иметь некоторые хорошие моменты для пережевывания, в ответе слишком много шума (пух?), И оно очень похоже на ранее опубликованные ответы с небольшими улучшениями кода. Это могло бы быть более хорошо получено, если бы это было отредактировано и уменьшено в более информативную версию. Также нет реальной необходимости вызывать конкретных пользователей или ответы (поскольку они могут не существовать по какой-либо причине в будущем).
Howdy_McGee
Вы называете совершенно не упомянутое и, вероятно, лучше, чем все, что упоминается в других ответах, «незначительными улучшениями кода». Ну, это просто неправда. Кроме того, я никого не «вызывал», я просто упомянул известные мне факты, чтобы улучшить стиль кодирования и рассказать читателям об этом, чтобы заставить их писать лучший код. Серьезно, мне потребовалось довольно много времени, чтобы написать лучший ответ здесь, и это то, что я получаю за это.
NextGenThemes
4
В других ответах ничего не говорится о других сценариях, заставляющих jQuery задуматься. На самом деле мой ответ устраняет путаницу у людей, которые не знают, почему он не работает. Ни в одном из других ответов не упоминаются потенциальные риски ...
NextGenThemes
Этот код (как и код ответа выше) вернул мне ошибку 500. У меня WordPress 4.9.9
Марко Паничи
Трудно поверить, что этот код вызывает 500, вы, вероятно, допустили ошибку в реализации этого в вашем коде. Это не самое подходящее место, чтобы спрашивать, и ваша устаревшая версия WP вряд ли достаточно информации.
NextGenThemes
2

Я разработал плагин для этой конкретной проблемы. Этот плагин не связывается с WordPress jQuery, так как он загружается только во внешнем интерфейсе. Смотрите: jQuery Manager для WordPress

Зачем нужен еще один jQuery Updater / Manager / Developer / Debugging?

Потому что ни один из инструментов разработчика не позволяет выбрать конкретную версию jQuery и / или jQuery Migrate. Предоставление сжатой минифицированной / производственной и несжатой / разрабатываемой версии. Смотрите особенности ниже!

Executed Выполняется только во внешнем интерфейсе, не мешает администрированию / бэкенду WordPress и настройщику WP (по соображениям совместимости). См .: https://core.trac.wordpress.org/ticket/45130 и https: // core. trac.wordpress.org/ticket/37110

Включите / выключите jQuery и / или jQuery Migrate.

✅ Активировать определенную версию jQuery и / или jQuery Migrate.

И многое другое! Код с открытым исходным кодом, так что вы можете изучить его, учиться на нем и внести свой вклад.


Почти все используют неправильную ручку

WordPress использует дескриптор ядра jquery, а не jquery:

https://github.com/WordPress/WordPress/blob/f84ab5e19f0038a3abec71821c9b8f47a4272942/wp-includes/script-loader.php#L1017

// jQuery
$scripts->add( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4-wp' );
$scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4-wp' );
$scripts->add( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );

JQuery ручка просто псевдоним для загрузки Jquery-ядра с JQuery-Migrate

См подробнее о псевдонимами: wp_register_script нескольких идентификаторов?

Правильный способ сделать это

В моем примере ниже я использую официальный jQuery CDN по адресу https://code.jquery.com. Я также использую script_loader_tag, чтобы добавить некоторые атрибуты CDN.
Вы можете использовать следующий код:

// Front-end not excuted in the wp admin and the wp customizer (for compatibility reasons)
// See: https://core.trac.wordpress.org/ticket/45130 and https://core.trac.wordpress.org/ticket/37110
function wp_jquery_manager_plugin_front_end_scripts() {
    $wp_admin = is_admin();
    $wp_customizer = is_customize_preview();

    // jQuery
    if ( $wp_admin || $wp_customizer ) {
        // echo 'We are in the WP Admin or in the WP Customizer';
        return;
    }
    else {
        // Deregister WP core jQuery, see https://github.com/Remzi1993/wp-jquery-manager/issues/2 and https://github.com/WordPress/WordPress/blob/91da29d9afaa664eb84e1261ebb916b18a362aa9/wp-includes/script-loader.php#L226
        wp_deregister_script( 'jquery' ); // the jquery handle is just an alias to load jquery-core with jquery-migrate
        // Deregister WP jQuery
        wp_deregister_script( 'jquery-core' );
        // Deregister WP jQuery Migrate
        wp_deregister_script( 'jquery-migrate' );

        // Register jQuery in the head
        wp_register_script( 'jquery-core', 'https://code.jquery.com/jquery-3.3.1.min.js', array(), null, false );

        /**
         * Register jquery using jquery-core as a dependency, so other scripts could use the jquery handle
         * see /wordpress/283828/wp-register-script-multiple-identifiers
         * We first register the script and afther that we enqueue it, see why:
         * /wordpress/82490/when-should-i-use-wp-register-script-with-wp-enqueue-script-vs-just-wp-enque
         * /programming/39653993/what-is-diffrence-between-wp-enqueue-script-and-wp-register-script
         */
        wp_register_script( 'jquery', false, array( 'jquery-core' ), null, false );
        wp_enqueue_script( 'jquery' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_jquery_manager_plugin_front_end_scripts' );


function add_jquery_attributes( $tag, $handle ) {
    if ( 'jquery-core' === $handle ) {
        return str_replace( "type='text/javascript'", "type='text/javascript' integrity='sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=' crossorigin='anonymous'", $tag );
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_jquery_attributes', 10, 2 );
Ремзи Кавдар
источник
0
add_action("wp_enqueue_scripts", "myscripts");

function myscripts() { 
   wp_enqueue_script( 'jquery' , '', array(), true); //true for footer
   wp_enqueue_script( 'someScript-js', 'https://domain.com/someScript.js' , '', '', true );
}
samjco
источник
-3

Эй, только измени свой код, чтобы это понравилось

function starter_scripts() {
        wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
        wp_enqueue_script('jquery');
        wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', array( 'jquery' ) );
    }
    add_action( 'wp_enqueue_scripts', 'starter_scripts' );

я думаю, что это работает нормально

добавьте эти строки в ваш файл functions.php

remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_enqueue_scripts', 5);

затем добавить скрипт в нижний колонтитул

Амит Мишра
источник
Это ставит JQuery в голову. Мне это нужно в нижнем колонтитуле.
Дези
Эй, Дези, пожалуйста, проверьте отредактированный ответ, я думаю, что это поможет вам
Амит Мишра
6
Я уверен , что это ужасная идея - вы эффективно предотвратить что - либо из загрузочных скриптов в заголовке, а не только JQuery, и может быть сценарии двойного enqueuing (не ожидал , что глубоко). На самом деле, вам, вероятно, понадобится только remove_action/ add_actionpart, если вы собираетесь сделать это таким образом.
drzaus
1
Действительно ужасная идея, не делай этого!
NextGenThemes