
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 - понижаем приоритет вывода