Как загрузить WordPress jquery в секцию <head>
В моем блоге WordPress я добавил слайдшоу на JavaScript, которое хорошо работает. У меня есть PHP файл, который выводит необходимый JavaScript, который должен быть размещен в теге <head> с помощью "add_action" в файле functions.php дочерней темы:
function add_slideshow_js() {
include('/path/slideshow_output.php');
echo $js_output;
}
add_action( 'wp_head', 'add_slideshow_js' );
JavaScript, который выводит этот PHP, включает вызов управляющего JavaScript файла:
<script src="path/slideshow.js" type="text/javascript"></script>
... за которым следует JavaScript, создающий слайдшоу на странице.
Всё работает отлично и выглядит великолепно. Дело в том, что это зависит от jquery, но работало нормально, поэтому я задумался, как на самом деле подключается jquery.
Я отключил все плагины, и оно перестало работать. Очевидно, один из них подключал jquery и обеспечивал работу.
Но я подумал, что хотел бы убедиться, что jquery будет подключен без зависимости от плагина, так как я могу удалить важный плагин в будущем, и, конечно, я всё равно хочу, чтобы слайдшоу работало.
Итак, со всеми отключенными плагинами, я решил явно подключить jquery сам, написав эту функцию в файле functions.php моей дочерней темы:
function insert_jquery(){
wp_enqueue_script('jquery');
}
add_filter('wp_head','insert_jquery');
Это действительно подключает jquery, но он вызывается в футере, и экспериментальным путем я обнаружил, что слайдшоу будет работать только если jquery вызывается внутри тега <head>.
Я мог бы написать функцию для вызова моего собственного файла jquery, но у меня сложилось впечатление, что лучше использовать jquery, включенный в WordPress, и в любом случае, я подумал, что повторное включение плагинов приведет к двойному вызову jquery.
Так какую функцию я могу написать в файле functions.php моей дочерней темы, которая надежно загрузит WordPress jquery в секции <head> страницы?
Надеюсь, всё это имеет смысл.
По умолчанию, если вы подключаете jQuery через функцию enqueue, он добавляется в раздел head. Однако если какой-либо плагин изменяет это поведение и добавляет jQuery в подвал (footer) вместо head, вы можете использовать следующий код, чтобы изменить это и принудительно вернуть jQuery в раздел head.
function insert_jquery(){
wp_enqueue_script('jquery', false, array(), false, false);
}
add_filter('wp_enqueue_scripts','insert_jquery',1);
Для получения дополнительной информации о функции wp_enqueue_script() посетите эту страницу.
Я обнаружил, что добавление этого точного кода функции в файл functions.php моей дочерней темы снова размещает jquery в <head>, что позволяет работать слайд-шоу. Это отлично, но мне все еще непонятно, так как вы, кажется, подразумевали, что цель этого — предотвратить добавление jquery в подвал каким-то "сторонним" плагином — но все мои плагины отключены. Так что же переопределяет этот код?
John Doe
Он просто добавляет скрипт в заголовок, который необходим для работы вашего слайд-шоу, но так как некоторые из ваших плагинов добавляли его в подвал (возможно, для своих функций, требующих этот скрипт в подвале), они могут перестать работать корректно.
Vinod Dalvi
Я не понимаю, что может заставлять jquery загружаться в подвале, когда абсолютно все мои плагины отключены. Могут ли они делать это, будучи отключенными?
John Doe
Нет, они этого не делают при отключении. Попробуйте сменить тему на другую, например, стандартную тему twentytwelve, а затем проверьте.
Vinod Dalvi
Смена темы не имеет значения. Подводя итог: при отключенных всех плагинах, попытка добавить jquery с помощью function insert_jquery(){
wp_enqueue_script('jquery');
}
add_filter('wp_head','insert_jquery'); загружает jquery в подвале (футере), тогда как использование приведённого кода загружает его в тег <head>, как и должно быть. Я не понимаю такое поведение.
John Doe
Во-первых, вы используете хук wp_head вместо рекомендуемого wp_enqueue_scripts для добавления скриптов, а во-вторых, последний параметр функции wp_enqueue_script() — это булево значение, указывающее, нужно ли включать скрипт в подвале (футере), которое я установил в false. Смотрите здесь http://codex.wordpress.org/Function_Reference/wp_enqueue_script
Vinod Dalvi
function insert_jquery_in_header(){
wp_enqueue_script('jquery', false, array(), false, false);
}
add_filter('wp_enqueue_scripts','insert_jquery_in_header',1);
По умолчанию WordPress загружает JS-файлы в подвале (footer), поэтому таким способом вы можете заставить их загружаться в шапке (header). Надеюсь, это поможет!
Я предполагаю, что у вас есть плагин, который манипулирует регистрацией скриптов, из-за чего jQuery загружается в подвале (footer). По умолчанию, я почти уверен, он загружается в <head>. Вы можете попробовать заставить ваш слайдшоу работать, если включите его в подвал, или выяснить, какой плагин вызывает проблему, и попытаться исправить это. Это может сработать, но я не проверял.
function insert_jquery(){
wp_enqueue_script('jquery');
}
add_filter('wp_enqueue_scripts','insert_jquery',1);
Однако, в более широком смысле, то, что вы делаете, не является правильным способом загрузки скриптов. Вам следует зарегистрировать и поставить в очередь slideshow.js, а также почти наверняка извлечь JavaScript из slideshow_output.php и зарегистрировать и поставить в очередь, передавая переменные в скрипт через wp_localize_script. Затем вы можете использовать параметр $deps (см. ссылки), чтобы гарантировать, что всё загружается в нужной последовательности.
Я понимаю, что мне нужно изучить и разобраться с более глобальными проблемами, на которые вы указываете, но я не могу понять, как 'сторонний' плагин может загружать jquery в подвале, когда все плагины временно отключены.
John Doe
Мои проблемы прекратились (использую WP 5.3.2 плюс пустую тему без внешних файлов), когда я загрузил свой собственный скрипт с добавленной зависимостью от jQuery (которая по умолчанию подключается в WordPress).
function load_assets() {
wp_enqueue_script( 'mm-scrollfix', site_url( '/wp-content/js/mm-scrollfix-1.0.js' , __FILE__ ), array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'load_assets' );
Похоже, эта зависимость "разбудила" jQuery. Обратите внимание, что последний параметр "true" в коде нужен для загрузки скрипта перед закрывающим тегом body, а не в head (по умолчанию wp_enqueue_scripts загружает скрипты в head).
Если я загружаю содержимое этого .js файла с помощью хука wp_footer (который выполняется еще позже), не объявляя зависимость, это приводит к ошибке:
Uncaught ReferenceError: jQuery is not defined.
Возможно, это как-то связано, я не уверен. Наверное, получу минусы - Stack Overflow слишком элегантен для моего скромного ума. %)
Удачи.