Урок 3. Подключение стилей и JS скриптов к плагину автокомлпита постов

Урок 3. Подключение стилей и JS скриптов к плагину автокомлпита постов

Продолжаем разработку плагина «wp-post-autocomplete». В сегодняшней статье мы подключим стили, js файл и библиотеку autocomplete от фреймворка jQuerty (который по умолчанию идет с движок WP).

Открываем файл плагина «/plugins/wp-post-autocomplete/wp-post-autocomplete.php», переходим к конструктору, и добавляем в него следующую строку кода:

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

Хук «wp_enqueue_scripts» в WordPress, отвечает за подключение стилей и скриптов во фронтенде сайта. Но для того чтобы подключить сами файлы, нам нужно создать в текущем классе, публичный метод «wp_enqueue_scripts». И собственно в нем, подключить нужные нам файлы. Создадим метод:

public function wp_enqueue_scripts()
{
	wp_enqueue_style('wp-post-autocomplete', plugin_dir_url(__FILE__).'assets/style.css');
	wp_enqueue_style('wp-post-autocomplete-jquery-ui', plugin_dir_url(__FILE__).'assets/jquery-ui/jquery-ui.min.css');

	wp_enqueue_script('wp-post-autocomplete', plugin_dir_url(__FILE__).'assets/script.js', array('jquery', 'jquery-ui-widget', 'jquery-ui-autocomplete'), null, true);

	wp_localize_script('wp-post-autocomplete', 'WpPostAutocomplete', array(
		'ajax' => admin_url('admin-ajax.php'),
		'action' => 'autocomplete',
		'security' => wp_create_nonce('autocomplete_security'),
	));
}

Где:
wp_enqueue_style — ф-я ядра WP позволяющая подключать стили
wp_enqueue_script — то же что и выше, но подключает js файлы
wp_localize_script — вопрдпресс функция, используемая для локализации js строк, или динамической передачи данных с PHP в JS.

Что мы сделали выше?

  1. Подключили стили плагина
  2. Подключили стили для jQuery плагина автокомлпита
  3. Подключили JavaScrip файл плагина со всеми зависимостями. А это — сам jquery, библиотека виджетов (widget jq) и сам js автокомплита.

Давайте физически создадим файлы на сервере. Сперва создадим каталог «assets» в корне папки «wp-post-autocomplete», а уже в него поместим все нужные нам файлы — style.css и script.js.

А вот с «jquery-ui.min.css» придется немного повозится. Для этого переходим на официальный сайт jQuery, и скачиваем плагин со всеми зависимостями.

Чуть не забыл про «wp_localize_script». Важная часть нашего плагина, без этого мы не сможем не предать данные по аякс (если не захардкодить все в JS), ни обеспечить защиту нашего скрипта. Разберем данную конструкцию подробнее:

wp_localize_script('wp-post-autocomplete', 'WpPostAutocomplete', array(
	'ajax' => admin_url('admin-ajax.php'),
	'action' => 'autocomplete',
	'security' => wp_create_nonce('autocomplete_security'),
));

Первым параметром функции мы указываем зависимость. В нашем случае, мы зависим от подключения js файла «script.js», которому мы указали ID как «wp-post-autocomplete» (да, да, такой же ID мы указали и стилям, на на фронте, к JS и CSS добавляются суфиксы, для js они кстати не видны). Вторым параметром мы указываем название объекта, который будет содержать в себе массив переданный третьим параметром. Третьим параметром идет массив данных, где:
ajax — содержим URL для обработки аякс запросов. Без каких либо дополнительных манипуляций с WP он стандартный - /wp-admin/admin-ajax.php
action — название хука, который будет обрабатывать наш запрос (т. е. поиск постов).
security — содержит уникальную защитную строку, генерируемую WP через определенный промежуток времени.

На этом все. Код урока можно найти на гитхабе по этой ссылке. Всем пока 🙂

Список всех уроков темы

Поделиться в соцсетях:
Статьи на похожую тематику

С вашим WordPress сайтом проблемы? нужен дополнительный функционал? нестандартный плагин или сверстать новую страницу?
Тогда напишите мне через форму обратной связи, и я постараюсь вам помочь.

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *