Задать вопрос

Alex Rusin

Wordpress Full Stack Developer
Информация
Контакты
Местоположение
Украина, Киевская обл., Киев

Наибольший вклад в теги

Все теги (1)

Лучшие ответы пользователя

Все ответы (1)

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

    @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.
    Ответ написан
    Комментировать
    Комментировать