Главная » Wordpress » Подключение скриптов JS и JQuery к WordPress

Подключение скриптов JS и JQuery к WordPress

от

Для подключения скриптов JavaScript и JQuery в WordPress предусмотрена специальная функция wp_enqueue_script(). И очень важно подключать собственные скрипты используя именно ее. Функция избавит от подключения скрипта несколько раз (если один из плагинов уже использует одноименный скрипт), предотвратит конфликт скриптов и правильно подключит зависящие от библиотеки jQuery скрипты (после подключения библиотеки).Содержание статьи:

Подключение JavaScript к WordPress

Данный код подключает JavaScript в header шаблона WordPress.

function my_scripts_method() {
	wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
  • my_scripts_method — название вашей функции, можно любое, какое придет на ум, без пробелов, в нижнем регистре;
  • wp_enqueue_script — функция для подключения js файлов WordPress;
  • custom — название скрипта, любое, главное не повторять при подключении нескольких скриптов;
  • get_template_directory_uri() — указывает на то, что скрипт находится в папке с шаблоном сайта, путь к файлу;
  • /js/custom.js — в данном случае подключаемый скрипт должен находиться в папке js, custom.js — название js файла;

Для увеличения скорости загрузки сайта логичнее подключать скрипты в footer сайта, если скрипт не участвует в отрисовке страницы.

Данный код подключает JavaScript в footer шаблона WordPress.

function my_scripts_method() {
	wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Все то же самое, только добавлено true — команда для подключения JavaScript в footer.

Подключение зависящих от библиотеки JQuery скриптов к WordPress

Подключение аналогично подключению JavaScript, в функции указывается лишь массив JQuery, для правильной работы скрипта.

function my_scripts_method() {
	wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

array(‘jquery’) — указывает зависимость от библиотеки JQuery.

Здесь не указывается, в какую область шаблона подключать скрипт (footer или header), так как он в любом случае будет подключен сразу после библиотеки JQuery, в массиве зависящих от нее скриптов.

Можно указать версию подключаемого скрипта к WordPress

function my_scripts_method() {
	wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0');
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

‘1.0.0’ — Строка указывающая версию скрипта, если она у него есть.

Этот параметр используется для того чтобы удостовериться, что клиент получил верную версию скрипта, а не из кеша.

Если версия не проставлена, то WordPress сам присвоет свою версию. Если указать null, то никакая версия не будет добавлена.

Подключение стороннего скрипта к WordPress

В данном примере подключается скрипт bootstrap.min.js с сервера CDN Google.

function my_scripts_method() {
	wp_enqueue_script( 'bootstrap', '//ajax.googleapis.com/ajax/libs/jquery/3.3.7/bootstrap.min.js');
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Подключение аналогично вышеперечисленным примерам, только указан адрес стороннего скрипта. Протокол httpss: не указывается.

Подключение скрипта к дочерней теме WordPress

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
	wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/patch/to/js/my-script.js', array( 'jquery' ), true );
}

Важно

При подключении скриптов в дочерней теме важно указывать директорию стилей CSS дочерней темы — get_stylesheet_directory_uri().

Перерегистрация, обновление библиотеки jQery

Иногда нужно поменять библиотеку jQery WordPress на более свежую. Для этого нужно использовать такой код:

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

Добавление кода JavaScript в WordPress с использованием хуков wp_head и wp_footer

Во-первых, давайте посмотрим, как добавить код в заголовок вашего сайта WordPress. Вам нужно будет добавить следующий код в файл functions.php вашей темы или плагин Code Snippets.

<?php 

function main_hook_javascript() {
    ?>
        <script>
          // ваш javscript код здесь
        </script>
    <?php
}
add_action('wp_head', 'main_hook_javascript');

Добавление JavaScript хуком к определенной публикации или странице WordPress

Предположим, вы хотите загрузить этот javascript только в конкретный пост WordPress. Для этого вам необходимо добавить условную логику в код. Взгляните на следующий пример:

<?php

function main_hook_javascript() {
  if (is_single ('16')) { 
    ?>
        <script type="text/javascript">
          // ваш javscript код здесь
        </script>
    <?php
  }
}
add_action('wp_head', 'main_hook_javascript');

Если вы присмотритесь к приведенному выше коду, вы увидите, что мы обернули код javascript вокруг условной логики, чтобы соответствовать определенному идентификатору записи. Вы можете использовать это, заменив 16 своим собственным идентификатором сообщения.

Теперь этот код будет работать для любого типа поста с ID=16, кроме страниц. Давайте рассмотрим другой пример, за исключением того, что он проверяет конкретный идентификатор страницы перед добавлением кода JavaScript в раздел head.

<?php 

function main_hook_javascript() {
  if (is_page ('10')) { 
    ?>
        <script type="text/javascript">
          // ваш javscript код здесь
        </script>
    <?php
  }
}
add_action('wp_head', 'main_hook_javascript');

Вместо is_single мы теперь используем is_page для проверки идентификатора страницы.

Мы можем использовать тот же код с небольшими изменениями, чтобы добавить код JavaScript в нижний колонтитул footer вашего сайта. Посмотрите на следующий пример.

<?php 

function main_hook_javascript_footer() {
    ?>
        <script>
          // ваш javscript код здесь
        </script>
    <?php
}
add_action('wp_footer', 'main_hook_javascript_footer');

Вместо того, чтобы подключать нашу функцию к wp_head, мы теперь подключили ее к wp_footer. Вы также можете использовать его с условными тегами, чтобы добавить Javascript к конкретным сообщениям или страницам.

Подключение JS и jQery в плагине WordPress

При создании собственного плагина иногда требуется подключить JS. Также, если тема обновляется разработчиками, но нужно расширить ее функционал и для этого требуется подключение JS и jQery, нужно воспользоваться нижеприведенным кодом.

<?php

function my_plugin_script() {
	wp_register_script('my_script', plugins_url('myscript.js', __FILE__);
	wp_enqueue_script('my_script');
	}
add_action( 'wp_enqueue_scripts', 'my_plugin_script' );

Здесь все аналогично обычному подключению скриптов через functions.php

Оставьте комментарий