Правильный способ подключения jquery-ui

Question

Правильный способ подключения jquery-ui

20 июл. 2017 г., 11:46:57

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

Голосов: 16

У меня возникли проблемы с подключением скриптов и стилей jquery-ui в моем плагине. Похоже, что мои вызовы wp_enqueue_script просто игнорируются.

Существует много похожих вопросов, но все найденные мной ответы сводятся к вызову wp_enqueue_script внутри хука действия wp_enqueue_scripts, что я уже делаю.

В конструкторе моего класса я вызываю:

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );

а затем, ниже:

public function enqueue_scripts()
{    
  wp_enqueue_script( 'jquery-ui-core', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-widget', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-mouse', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-accordion', false, array('jquery') );
  wp_enqueue_script( 'jquery-ui-autocomplete', false, array('jquery'));
  wp_enqueue_script( 'jquery-ui-slider', false, array('jquery'));

Я проверил, что код действительно выполняется при каждой загрузке страницы. Однако на страницах отсутствуют теги <link> для библиотеки jquery-ui. Я уже пробовал с явно указанной зависимостью от jquery в третьем аргументе вызовов wp_enqueue_script и без нее.

Я также пробовал с чистой установкой WP 4.8 без установленных плагинов, кроме моего, и только с темой twenty seventeen по умолчанию. Безрезультатно.

Что не так с моим кодом?

Lucio Crusca

688

разработка плагинов jquery ui

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

Комментарии

ps: конструктор - это не оптимальное место для добавления хуков,

birgire

20 июл. 2017 г. 13:09:05

Если вы собираетесь отправить свой плагин в репозиторий wordpress.org, то вам необходимо загружать CSS локально (см.: https://developer.wordpress.org/plugins/wordpress-org/detailed-plugin-guidelines/#8-plugins-may-not-send-executable-code-via-third-party-systems).

butlerblog

25 февр. 2020 г. 14:39:03

@butlerblog Спасибо за замечание, я обновил ответ.

kero

25 февр. 2020 г. 14:45:31

Если вы подключаете свой собственный скрипт, вы можете просто добавить 'jquery-ui-accordion', например, в список зависимостей. Все необходимые зависимости будут добавлены автоматически. Пример:

wp_enqueue_script( 'my-theme', get_stylesheet_directory_uri() . '/js/theme.js', array( 'jquery', 'jquery-ui-accordion' ) );

Сгенерируется следующий код:

<script type='text/javascript' src='/wp-includes/js/jquery/ui/core.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/widget.min.js'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/accordion.min.js'></script>
<script type='text/javascript' src='/wp-content/themes/theme/js/theme.js'></script>

Greg Perham

230

14 июн. 2018 г. 20:29:05

Я модифицировал ваш скрипт. Попробуйте этот вариант, он рабочий.

add_action( 'wp_enqueue_scripts', array($this, 'enqueue_scripts') );
public function enqueue_scripts()
{    
  wp_enqueue_script( 'jquery-ui-core');
  wp_enqueue_script( 'jquery-ui-widget');
  wp_enqueue_script( 'jquery-ui-mouse');
  wp_enqueue_script( 'jquery-ui-accordion' );
  wp_enqueue_script( 'jquery-ui-autocomplete');
  wp_enqueue_script( 'jquery-ui-slider');
}

umesh.nevase

61

20 июл. 2017 г. 12:21:20

Комментарии

К сожалению, в моем случае это не работает.

Lucio Crusca

20 июл. 2017 г. 12:36:37

@LucioCrusca Пожалуйста, ознакомьтесь с моим ответом. Хотя WordPress регистрирует jQuery UI скрипты, он не делает этого для стилей, вам нужно сделать это самостоятельно, как я показал

kero

20 июл. 2017 г. 12:40:32

kero 6.33K · Accepted Answer · 2017-07-20T12:28:25Z

Прежде всего, WordPress регистрирует jQuery UI через wp_default_scripts(). Зависимости уже установлены, поэтому вам нужно только подключить скрипт, который вам действительно нужен (а не ядро). Поскольку вы не меняете номер версии или что-либо еще, достаточно использовать только хэндл.

// нет необходимости подключать -core, так как зависимости уже установлены
wp_enqueue_script( 'jquery-ui-widget' );
wp_enqueue_script( 'jquery-ui-mouse' );
wp_enqueue_script( 'jquery-ui-accordion' );
wp_enqueue_script( 'jquery-ui-autocomplete' );
wp_enqueue_script( 'jquery-ui-slider' );

Что касается таблиц стилей: WordPress по умолчанию не регистрирует стили jQuery UI!

В комментариях butlerblog отметил, что согласно Руководству по плагинам

Выполнение внешнего кода в плагине, когда он не выступает в качестве сервиса, не разрешено, например:

Обращение к сторонним CDN по причинам, не связанным с включением шрифтов; весь JavaScript и CSS, не связанный с сервисом, должен быть включен локально

Это означает, что загрузка стилей через CDN не разрешена и всегда должна выполняться локально. Вы можете сделать это с помощью wp_enqueue_style().