Як у WordPress правильно додавати jQuery скрипти

Привіт:) Іноді при додаванні jQuery скриптів у коді тем і плагінів виникають проблеми. У цьому пості покажу як швидко та правильно це зробити, щоб позбавитися помилки "Uncaught TypeError: $ is not a function".

Про режим jQuery "No Conflict"

У ядрі WordPress вже присутня бібліотека jQuery та викликається на сайті за замовчуванням, що дозволяє розробнику використовувати її у власному JavaScript коді.

jQuery у WordPress за замовчуванням завантажується та викликається у режимі "no-confict", який дозволяє уникнути конфліктів з іншими бібліотеками.

У цьому режимі ярлик $ недоступний, тобто ви не можете використовувати його безпосередньо. Натомість під час написання jQuery-скриптів для WordPress потрібно використовувати jQuery. Це означає, що наступний код у Консолі браузера видасть помилку "Uncaught TypeError: $ is not a function".

$(document).ready(function() {
  $('h1').css('color', 'red');
});

Як додавати jQuery скрипти, щоб не виникало помилок

Покажу декілька способів як уникнути вказаної помилки. Всі вони дають один і той самий результат.

/** 
 * СПОСІБ 1
 */
jQuery(document).ready(function() {
	jQuery('h1').css('color', 'red');
});


/** 
 * СПОСІБ 2
 * 
 * Щоб використовувати функцію $ як зазвичай. Всередині цієї функції $() працюватиме як синонім jQuery(). У цьому фрагменті ваш код буде виконано, коли сторінка повністю завантажиться.
 */
jQuery(document).ready(function($) {
	$('h1').css('color', 'red');
});


/** 
 * СПОСІБ 3
 * 
 * Якщо потрібно, щоб код був виконаний відразу (без очікування події "ready" в DOM).
 */
(function($) {
    $('h1').css('color', 'red');
})(jQuery);


/** 
 * СПОСІБ 4
 */
var $j = jQuery.noConflict();
$j(document).ready(function() {
	$j('h1').css('color', 'red');
});


/** 
 * СПОСІБ 5
 */
var $j = jQuery.noConflict();
jQuery(document).ready(function($j) {
	$j('h1').css('color', 'red');
});

Як під'єднати jQuery скрипт у темі чи плагіні

Для цього використовується функція wp_enqueue_script(), яка під'єднується до хуку wp_enqueue_scripts.

Найпростіший варіант під'єднання власного jQuery-скрипту у WordPress-темі:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'simpletheme-main-script',  get_stylesheet_directory_uri() . '/assets/js/script.js', array( 'jquery' ), '1.0.0', true );
});

Як замість вбудованої в ядро WordPress бібліотеки jQuery під'єднати іншу її версію

function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://code.jquery.com/jquery-x.x.x.min.js');
    wp_enqueue_script( 'jquery' );
}    
 
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );