Так как jQuery наиболее используемый JavaScript Framework, давайте посмотрим как можно добавить простой скрипт в вордпресс.
Режим совместимости jQuery
WordPress уже предварительно содержит в себе библиотеку jQuery. Когда загружается jQuery, он использует режим совместимости, который является механизмом для избежания конфликтов с другими языками библиотеки.
В итоге нельзя использовать знак доллара непосредственно, как это привычно для jQuery. При написании кода jQuery для WordPress нужно использовать jQuery вместо этого.
Посмотрите на код ниже:
1 2 3 4 5 6 7 8 9 | /* Обычный jQuery */ $('.hideable').on('click', function() { $(this).hide(); }) /* Режим совместимости */ jQuery('.hideable').on('click', function() { jQuery(this).hide(); }) |
Хорошае новость! С помощью нескольких модификаций можно вернуться к прекрасному знаку доллара. Выписывание jQuery много раз делает код дольше и труднее для восприятия.
Если вы загружаете свой скрипт в футер, вы можете поместить свой код в анонимную функцию:
1 2 3 4 5 6 7 | (function($) { $('.hideable').on('click', function() { $(this).hide(); }) })( jQuery ); |
Если Вы хотите добавить код в хэдер – чего нужно избегать по возможности – Вы можете поместить код в document-ready функцию:
1 2 3 4 5 6 7 | jQuery(document).ready(function( $ ) { $('.hideable').on('click', function() { $(this).hide(); }) }); |
Ссылка на jQuery скрипт
Если у вас есть скрипт jQuery в отдельном файле, нужно прописать ссылку на него. В WordPress этот процесс называется enqueueing (постановка в очередь).
Для этого используется специальная функция
Эту функцию нужно поместить в functions.php вот так:
1 2 3 4 | 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.
Добавлениескрипта в Админ панель
Можно добавить скрипт и в админпанель. Функция при этом будет та же, но хук поменяется. Посмотрите на пример ниже:
1 2 3 4 | 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/