Как подключить JavaScript файлы в плагине

Question

Как подключить JavaScript файлы в плагине

6 февр. 2016 г., 14:31:54

Просмотры: 60.9K

Голосов: 21

У меня возникли серьезные трудности с подключением JavaScript файлов в директории плагина.

Я пытаюсь создать плагин, перенося файлы виджетов из директории темы. Я скопировал файл виджета, но этот виджет зависит от JavaScript файла, поэтому я создал папку /js/ в директории плагина, где размещен файл "jquery.repeatable.js"

Я использовал этот код, но похоже, что js файл не подключается -

function Zumper_widget_enqueue_script()
{   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js' );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');

Я искал решение на форуме- https://stackoverflow.com/questions/31489615/call-a-js-file-from-a-plugin-directory

Но это не помогло.

Повторюсь: В директории моего плагина есть js файл в папке - /js/

Я хочу его подключить, какой правильный процесс, нужно ли что-то дополнительно регистрировать?

Есть ли что-то неправильное в этой части - 'admin_enqueue_scripts'?

WordCent

1.88K

разработка плагинов wp enqueue script

Комментарии

Возможный дубликат вопроса Это не работает для Plugin get_template_directory_uri()

Milo

6 февр. 2016 г. 19:47:28

Все ответы на вопрос

Обычно я использую метод plugins_url() для подключения скриптов и стилей (enqueue).

function Zumper_widget_enqueue_script()
{   
    // Подключаем пользовательский скрипт с использованием plugins_url()
    wp_enqueue_script( 'my_custom_script', plugins_url('js/jquery.repeatable.js', __FILE__ ), '1.0.0', false );
}
// Добавляем действие для загрузки скриптов в админке
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');

Zaheer Abbas

96

8 авг. 2019 г. 09:28:12

Комментарии

Это лучший ответ, чем принятый, потому что plugin_dir_url() использует plugins_url(); это лишняя нагрузка из-за дополнительного вызова функции

Lovor

19 сент. 2023 г. 00:34:20

ОБНОВЛЕНО:

Используйте этот код вместо предыдущего

function Zumper_widget_enqueue_script()
{   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0.0', false );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');

Третий параметр объявляет зависимости, а четвёртый определяет версию.

Установите 5-й параметр wp_enqueue_script() в true. Это означает, что файл будет загружаться в подвале страницы (футере).

mukto90

1.6K

6 февр. 2016 г. 15:19:34

Комментарии

Третий параметр функции wp_enqueue_script() определяет зависимости скрипта. Пятый параметр отвечает за то, будет ли скрипт загружаться в подвале (футере) или в заголовке страницы. Впрочем, я не думаю, что место загрузки имеет какое-то значение.

cybmeta

6 февр. 2016 г. 15:22:35

Спасибо. Я где-то читал в другом плагине, что кто-то делает так -

wp_enqueue_script('zumper',get_template_directory_uri() . '/js/jquery.zumper.min.js',array('jquery'),false,true);

Вы сказали, что установка третьего параметра в true означает загрузку в футере, тогда что означает комбинация false,true?

WordCent

6 февр. 2016 г. 15:22:50

Я обновил свой ответ. Это работает?

mukto90

6 февр. 2016 г. 15:31:22

cybmeta 20.6K · Accepted Answer · 2016-02-06T15:29:27Z

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

Чтобы загрузить скрипт на фронтенде, используйте действие wp_enqueue_scripts (это не то же самое, что функция wp_enqueue_script()):

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js' );
}
add_action('wp_enqueue_scripts', 'Zumper_widget_enqueue_script');

Также, похоже, что этот скрипт зависит от jQuery, поэтому вам следует объявить эту зависимость, иначе скрипт может загрузиться до jQuery и не будет работать. Кроме того, я настоятельно рекомендую указывать версию скрипта. Таким образом, если вы обновите скрипт до новой версии, браузер загрузит его снова и отбросит копию, которая может быть в кеше.

Например, если версия скрипта 1.0:

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0' );
}
add_action('wp_enqueue_scripts', 'Zumper_widget_enqueue_script');

Если вы хотите загрузить его в административной части:

function Zumper_widget_enqueue_script() {   
    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'js/jquery.repeatable.js', array('jquery'), '1.0' );
}
add_action('admin_enqueue_scripts', 'Zumper_widget_enqueue_script');