Как подключить скрипты в footer в Wordpress?

Добрый день, пытаюсь оптимизировать блог на wp, google speedtest ругается на то что родные скрипты подключаются в хед,
http://мойсайт/…-includes/js/jquery/jquery.js?ver=1.11.2


Скажите пожалуйста как можно их убрать в футер ?
  • Вопрос задан
  • 16409 просмотров
Пригласить эксперта
Ответы на вопрос 4
Shucach
@Shucach
В WordPress лучше всего подключать через function.php таким образом
add_action( 'wp_enqueue_scripts', 'true_include_myscript' );
function true_include_myscript() {
    wp_enqueue_script( 'themename', get_stylesheet_directory_uri() . '/js/jquery.polaris.js', array('jquery'), null, true );
}

Значения true если нужно отобразить подключения в футере и false если в хедере.
Ответ написан
Комментировать
HeadOnFire
@HeadOnFire
PHP, Laravel & WordPress Evangelist
Все верно написал Иван, только это справедливо для всего, кроме нескольких встроенных скриптов. В том числе и jQuery, о котором речь. С ним там все заметно сложнее - сначала надо его deregister, потом register снова, но уже в подвал. Но, как написал Алексей Курилкин , трогать его не стоит.

jQuery должен быть в шапке, а Google PageSpeed - тот еще параноик. Не стоить заморачиваться с этим ради циферок выше 96. А если у вас меньше - то об этом вообще еще очень рано беспокоиться, займитесь более важным.
Ответ написан
@alex_buttercup
Wordpress Full Stack Developer
По поводу подключения jQuery в футере. Сама по себе идея плохая, так как в теле документа выше могут находиться скрипты, требующие подключенного jQuery.

На хабре как-то встретил неплохое решение, требущее, однако, небольшой доработки:

1. Следующей функцией, добавляемой в functions.php активной темы, переназначаем скрипты и стили в футер:

function footer_enqueue_scripts(){
	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);
}
add_action('after_setup_theme','footer_enqueue_scripts');


2. Затем в head добавляем следующий скрипт:

<script>(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document)</script>


3. Затем после wp_footer(); добавляем:

<script>(function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document)</script>


В результате получаем jQuery, подключенный в футере, но находящийся в хэде. Google Page Speed Insights радуется, скорость повысилась, но тут и проблема: этим решением перезнаначается все, включая стили, в результате пользователь получает страницу на долю секунды (в зависимости от скорости соединения) без подключенных стилей. Так что, с визуальной точки зрения, лучше переподключить файл стилей в head.
Ответ написан
Комментировать
aleks_ku
@aleks_ku
SEO специалист.
библиотеку jquery убирать в футер не рекомендую. Т.к. все скрипты, которые работают на JQ, но до которых не размещена сама библиотека (пример которой в описании) работать не будут. Рекомендую использовать асинхронное выполнение таких скриптов:

С появлением стандарта HTML5 появилась возможность асинхронной загрузки скриптов, что существенно увеличивает скорость загрузки страницы. Использовать этот вариант проще простого — добавьте async или defer в описание скрипта:
<script async src="скрипт_1" type="text/javascript"></script>
<script defer src="скрипт_2" type="text/javascript"></script>


Убирать в футер, повторюсь не рекомендую.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы