Запити ядро ​​jQuery у нижньому колонтитулі?


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
діахеделік

WP dev тут, я зробив плагін, щоб вирішити це: wordpress.org/plugins/jquery-manager
Ремзі Кавдар

Відповіді:


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, то повідомте мені, що я зміню цей код на адресу Google 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 стартовий стиль і включає файли прямо з питання.
tehlivi

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 і використовує його у function.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 не завантажується в цей момент, тому я пропоную вам уникати цього, поки не буде мільйони редагувати ваш сайт, і ви не спробуєте оптимізувати ефективність роботи свого адміністратора. Це справедливо і для frontend, тому вам слід поспостерігати за погано кодованими темами або плагінами, які припускають 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 );
}

2
Хоча це може відповісти на запитання і має кілька хороших моментів, щоб пережовувати, у відповіді занадто багато шуму (пуху?) І дуже схоже на раніше розміщені відповіді з незначними поліпшеннями коду. Він може бути більш сприйнятим, якщо його відредагувати та зменшити в більш інформаційну версію. Також немає реальної потреби викликати конкретних користувачів або відповіді (оскільки вони можуть існувати з будь-якої причини в майбутньому).
Howdy_McGee

Ви називаєте абсолютно не згадане і, мабуть, краще, ніж усе, що згадується в інших відповідях, "незначні поліпшення коду". Ну це просто неправда. Також я нікого не "закликав", я лише згадав факти, які знаю, щоб покращити стиль кодування та навчити читачів про це, щоб вони краще писали код. Серйозно я зайняв досить багато часу, щоб написати найкращу відповідь на сьогоднішній день, і це те, що я отримую за це.
NextGenThemes

4
В інших відповідях нічого не згадується про інші сценарії, що примушують jQuery до голови, адже моя відповідь усуває плутанину від людей, які не знають, чому це не працює. Жоден з інших відповідей не згадує про потенційні ризики ...
NextGenThemes

Цей код (як код відповіді вище) повернув мені 500 помилок. У мене WordPress 4.9.9
Марко Паничі

Важко повірити, що цей код викликає 500, ви, мабуть, помилилися, реалізуючи це у своєму коді. Це насправді не саме місце, щоб запитати, і про застарілу версію WP навряд чи вистачить інформації.
NextGenThemes

2

Я розробив плагін для цієї конкретної проблеми. Цей плагін не псується з WordPress jQuery, оскільки він завантажений лише в передній частині. Див.: Менеджер jQuery для WordPress

Чому ще один інструмент оновлення jQuery / Manager / Developer / Debugging?

Оскільки жоден із інструментів розробника не дозволяє вибрати конкретну версію jQuery та / або jQuery Migrate. Забезпечення як стисненого мінімізованого / виробничого, так і нестисненого / розробленого варіанту. Дивіться функції нижче!

Executed Виконаний лише в передній частині, не заважає адміністратору WordPress / backend та WP-налаштуванням (з міркувань сумісності) Див. Https://core.trac.wordpress.org/ticket/45130 та https: // core. trac.wordpress.org/ticket/37110

Вмикайте / вимикайте jQuery та / або міграцію jQuery

Активуйте конкретну версію jQuery та / або jQuery Migrate

І багато іншого! Код є відкритим кодом, щоб ви могли вивчити його, вивчити його та зробити свій внесок.


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

WordPress фактично використовує ручку jquery-core, а не 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 );
}

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

я думаю, це добре працює

додайте ці рядки у файл function.php

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

потім додайте скрипт у колонтитул


Це ставить jQuery в голову. Мені це потрібно в нижньому колонтитулі.
Дезі

Привіт Дезі, будь ласка, перевіри відредаговану відповідь. Я думаю, що це допоможе тобі
Аміт Мішра

6
Я впевнений, що це жахлива ідея - ви фактично не давали змоги будь-що завантажувати скрипти в заголовок, а не лише jQuery, і це можуть бути подвійні чарівні сценарії (не так глибоко дивилися). Насправді, напевно, потрібна remove_action/ add_actionчастина лише, якщо ви збираєтесь це зробити так.
drzaus

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