Опубликовано

Подкючаем js в wordpress правильно

JS может быть инлайновым(inline) и внешним(external).

Если вы не в теме о вышесказанном, вот здесь можно ознакомиться http://javascript.ru/tutorial/foundation/start.

Мы будем подключать js в футер. Почему именно туда? Подключая js в футер мы имеем следующие преимущества

  • Все элементы DOM будут доступны для js, который загружается.
  • Не будет препятствовать загрузке DOM структуры
  • Если вы используете jquery. Вы можете смело опускать $(document).ready(function () {…}), т.к к моменту выполнения скриптов DOM будет полностью прогружен.

Еще один важный момент. Первыми подключим внешние скрипты, а затем инлайновые.
Найдем в нашей wp теме файлик functions.php и добавим функцию, которая поставит в очередь на добавление необходимые нам скрипты. Допустим нам необходимо подключить jquery.

function my_scripts_method()
{
    wp_deregister_script('jquery');
    wp_register_script('jquery', get_template_directory_uri() . '/js/jquery.min.js', array(), false, true);
    wp_enqueue_script('jquery');
}

В этой функции мы используем функции wordpressа.

wp_deregister_script(‘jquery’) — Отменяем регистрацию jquery. Вдруг кто-то до нас уже его уже регистрировал. Далее регистрируем свой с помощью функции wp_register_script(). Обратите внимание на последний аргумент функции — true. Он отвечает за добавление скриптов в футер. Информацию о остальных аргументах можно прочесть здесь http://wp-kama.ru/function/wp_register_script.

Далее нам напишем функцию печатающую инлайн скрипты

function print_inline_scripts()
{
    if (wp_script_is('jquery', 'done'))//проверяем подключен ли jquery
       echo "js code";//выводим код, использующий jquery
}

Наконец вешаем функции на события с помощью add_action

add_action('wp_enqueue_scripts', 'my_scripts_method');
add_action('wp_footer', 'print_inline_scripts', 100);//100 - понижаем приоритет вывода

Готово. В результате хуки сработают и в футере выведутся подключения всех внешних скриптов, а затем инлайн кода. Успехов!

Результирующий код

function my_scripts_method()
{
    wp_deregister_script('jquery');
    wp_register_script('jquery', get_template_directory_uri() . '/js/jquery.min.js', array(), false, true);
    wp_enqueue_script('jquery');
}
function print_inline_scripts()
{
    if (wp_script_is('jquery', 'done'))//проверяем подключен ли jquery
       echo "js code";//выводим код, использующий jquery
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
add_action('wp_footer', 'print_inline_scripts', 100);//100 - понижаем приоритет вывода

 

Добавить комментарий

Ваш e-mail не будет опубликован.