Принудительная загрузка wp_enqueue_scripts в HEADER?

Question

Принудительная загрузка wp_enqueue_scripts в HEADER?

25 мар. 2014 г., 16:40:48

Просмотры: 32.9K

Голосов: 3

Плагин, над которым я работаю, требует загрузки jQuery до обработки контента. Некоторые стандартные темы, такие как 2010, 2011 и 2012 (как я полагаю), помещают JavaScript в footer.

Как можно принудительно загрузить скрипты в header (я уведомлю пользователей плагина о таком требовании)?

Branndon

179

jquery заголовки

Комментарии

Если вам нужно, чтобы jQuery загружался в head, скорее всего, вы делаете что-то не так.

Milo

25 мар. 2014 г. 17:00:44

Например, если я хочу выполнить простой код jQuery("body").css("background-color","red"); внутри шорткода в теле документа, я не смогу этого сделать. Допустим, мой шорткод выглядит как [body color=red], но jQuery не загружается до футера, тогда мой код не сработает.

Branndon

25 мар. 2014 г. 17:14:51

Скрипт, содержащий эту строку, можно объявить зависимым от jQuery, просто попробуйте, это сработает. Возможно, вам придётся подождать события document ready, но в любом случае вы будете делать это для большинства операций с jQuery.

Andrew Bartel

25 мар. 2014 г. 17:20:39

подключить внешний скрипт и передать специфичные для шорткода данные через wp_localize_script, либо вывести скрипт инлайн в футере.

Milo

25 мар. 2014 г. 17:21:05

Все ответы на вопрос

Комментарии

Возможно, по умолчанию он находится в head, но некоторые стандартные темы помещают его в footer, и для тем, которые пытаются разместить его в footer, мне бы хотелось иметь возможность переопределить эту функцию и разместить его в head.

Branndon

25 мар. 2014 г. 17:13:34

Конечно, я понял это ясно и правильно. И мой ответ предназначен для того, чтобы помочь вам с этим, потому что если вы загрузите его в <head>...</head>, вы сделаете именно то, о чем просите. Кстати, Мило прав в своем комментарии, я бы не сказал, что вы сделали что-то неправильно, но вы определенно можете изменить свой подход, что приведет к отсутствию необходимости загружать jQuery в head — подумайте над этим, потому что это лучше, best practice. @Branndon

Nicolai Grossherr

25 мар. 2014 г. 17:20:17

Но ваш ответ и большинство ответов здесь подразумевают, что я пытаюсь загрузить файл скрипта, а не фрагмент кода. Код динамический и меняется при каждой загрузке страницы. Я что-то упускаю? Могу ли я использовать wp_enqueue_script для фрагмента кода, а не для целого файла?

Branndon

25 мар. 2014 г. 17:24:32

Полагаю, вы работаете с inline-скриптами, что в любом случае не лучшая практика. Кроме того, обычно любой inline-код можно перенести в отдельный файл со скриптами. Для начала ознакомьтесь со вторым комментарием Milo и используйте ключевые слова для поиска на этом сайте, чтобы узнать больше о возможных решениях - эти вопросы уже многократно обсуждались. Удачи! @Branndon

Nicolai Grossherr

25 мар. 2014 г. 17:29:26

Спасибо @ialocin, я вижу, что wp_localize_script - это хороший путь для решения. Благодарю за подробные ответы!

Branndon

25 мар. 2014 г. 17:44:17

Третий параметр функции wp_enqueue_script() позволяет указать зависимости для подключаемого скрипта, то есть какие другие скрипты требуются для его работы.

add_action( 'wp_enqueue_scripts', 'include_script_that_depends_on_jquery' );

function include_script_that_depends_on_jquery() {
    wp_enqueue_script( 'my_script.js', '/path/to/my_scripts.js', array( 'jquery' ) );
}

Таким образом, независимо от того, где тема, плагин или что-либо ещё подключает jQuery, ваш скрипт всегда будет загружаться позже, при условии что они также следуют лучшим практикам и не отменяют его регистрацию.

Andrew Bartel

1.84K

25 мар. 2014 г. 16:59:43

Комментарии

Дело в том, что мне нужно выполнить код jQuery, а не файл со скриптами.

Branndon

25 мар. 2014 г. 17:12:48

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

Andrew Bartel

25 мар. 2014 г. 17:41:52

Например, если мне нужно выполнить простой код jQuery("body").css("background-color","red"); из шорткода в теле документа, я не могу этого сделать. Допустим, мой шорткод [body color=red], но jQuery загружается только в футере, тогда мой код не сработает.

В обработчике шорткода вы можете вернуть HTML-заполнитель или JavaScript-переменную, а затем подключиться к хуку wp_footer с другой функцией, которая "запустит" jQuery.

function wpse_139154_shortcode( $atts ) {
    // Отличный код

    wp_enqueue_script( 'jquery' ); // Будет выведен в футере, если ещё не загружен в head
    add_action( 'wp_footer', 'wpse_139154_shortcode_script', 100 ); // Гарантируем выполнение после wp_print_footer_scripts

    return <<<html
<script>
    var arguments = arguments || {}; arguments.backgroundColor = "{$atts['color']}";
</script>
html;
}

function wpse_139154_shortcode_script() {
    echo <<<html
<script>jQuery( "body" ).css( arguments );</script>
html;
}

TheDeadMedic

36.6K

25 мар. 2014 г. 17:33:39

Согласно справочнику WP для wp_enqueue_scripts

wp_enqueue_script( string $handle, string $src = false, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

Последний параметр отвечает за то, где будет загружен скрипт. Есть некоторые нюансы, которые могут изменить его поведение! Попробуйте найти и закомментировать/удалить эти строки из вашего файла function.php

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

Цель этих шести действий — автоматически переместить JavaScript-код в подвал страницы, делая последний параметр wp_enqueue_scripts бесполезным! Если эти действия нельзя удалить, вы можете изменить их приоритеты. Например, с 5 на 9999. Поэкспериментируйте с приоритетами, чтобы найти подходящий для вас.

Также необходимо проверить, есть ли зависимости, указанные в массиве $deps. Они могут заставить скрипт загружаться только после их разрешения.

Не пытайтесь использовать грязные хаки — это плохая практика.

Удачного кодинга!

Rangel Nikolov

1

25 авг. 2016 г. 11:08:33

Сначала удалите jQuery, добавленную темой, затем подключите её снова.

function jquery_at_header() {
    // Удаляем текущую jQuery
    wp_dequeue_script( 'jquery' );

    // Подключаем jQuery заново
    wp_enqueue_script( 'jquery' );

    // Затем ваш скрипт
    wp_enqueue_script( 'script-name', plugins_url( 'js/scrip-name.js' , __FILE__ ), array( 'jquery' ), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'jquery_at_header', 5 );

Возможно, вам придётся поэкспериментировать с приоритетом, чтобы получить нужный результат.

Abhik

2.92K

25 мар. 2014 г. 18:39:21

Комментарии

Нет, вам не нужно убирать jQuery из очереди, это путь к безумию.

Andrew Bartel

25 мар. 2014 г. 18:46:10

@AndrewBartel почему так? Если jQuery подключена в футере, есть ли способ переместить её в head без предварительного удаления из очереди? Без желания разжигать спор, но у меня это сработало.

Abhik

26 мар. 2014 г. 21:54:44

Nicolai Grossherr 18.9K · Accepted Answer · 2014-03-25T16:58:38Z

Обычное поведение функции wp_enqueue_script заключается в размещении скрипта в секции head. Параметр $in_footer является необязательным и по умолчанию имеет значение false. Таким образом, вы можете загрузить jQuery вместе с вашим плагином в секцию head, и, при условии работы с правильно запрограммированными темами/плагинами, он не загрузится повторно, так как wp_enqueue_script по умолчанию предотвращает это — дополнительная информация здесь.

Nicolai Grossherr

18.9K

25 мар. 2014 г. 16:58:38