Categories: Wordpress

Как правильно добавить скрипты jQuery в WordPress

Так как jQuery наиболее используемый JavaScript Framework, давайте посмотрим как можно добавить простой скрипт в вордпресс.

Режим совместимости jQuery

WordPress уже предварительно содержит в себе библиотеку jQuery. Когда загружается jQuery, он использует режим совместимости, который является механизмом для избежания конфликтов с другими языками библиотеки.

В итоге нельзя использовать знак доллара непосредственно, как это привычно для jQuery. При написании кода jQuery для WordPress нужно использовать jQuery вместо этого.
Посмотрите на код ниже:

/* Обычный jQuery */$('.hideable').on('click', function() {
  $(this).hide();
})

/* Режим совместимости */jQuery('.hideable').on('click', function() {
  jQuery(this).hide();
})

Хорошае новость! С помощью нескольких модификаций можно вернуться к прекрасному знаку доллара. Выписывание jQuery много раз делает код дольше и труднее для восприятия.

Если вы загружаете свой скрипт в футер, вы можете поместить свой код в анонимную функцию:

(function($) {
 
  $('.hideable').on('click', function() {
    $(this).hide();
  })
 
})( jQuery );

Если Вы хотите добавить код в хэдер – чего нужно избегать по возможности – Вы можете поместить код в document-ready функцию:

jQuery(document).ready(function( $ ) {
 
  $('.hideable').on('click', function() {
    $(this).hide();
  })
 
});

Ссылка на jQuery скрипт

Если у вас есть скрипт jQuery в отдельном файле, нужно прописать ссылку на него. В WordPress этот процесс называется enqueueing (постановка в очередь).
Для этого используется специальная функция wp_enqueue_script().
Эту функцию нужно поместить в functions.php вот так:

function my_theme_scripts() {
    wp_enqueue_script( 'my-great-script', get_template_directory_uri() . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

У функции 5 аргументов. Первый это называние, с его помощью можно обратиться к скрипту, вторым является местоположение файла скрипта, третий – это массив зависимостей. В примере скрипт my-great-script зависит от изначального jquery.
Это нужно, чтобы WordPress знал, какой файл загрузить сначала.

Четвертый параметр – это номер версии, и пятый сообщает WordPress, куда поместить скрипт. По умолчанию он будет загружен в заголовок, но это плохая практика для сайта и замедлит загрузку страницы. По возможности его нужно загрузить в футер, поставив пятый параметр – true.

Больше статей: Графические вкладки для сайта - установка

Добавлениескрипта в Админ панель

Можно добавить скрипт и в админпанель. Функция при этом будет та же, но хук поменяется. Посмотрите на пример ниже:

function my_admin_scripts() {
    wp_enqueue_script( 'my-great-script', plugin_dir_url( __FILE__ ) . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );

Вместо wp_enqueue_scripts нужно использовать admin_enqueue_scripts .

Источник: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/