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

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

Відкриваємо файл плагіна «/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, що дозволяє підключати CSS-стилі
wp_enqueue_script — аналогічно, але для підключення JS-файлів
wp_localize_script — функція WordPress, яка використовується для локалізації JS-рядків або динамічної передачі даних з PHP у JavaScript

Що ми зробили вище?

1. Підключили стилі плагіна
2. Підключили стилі для jQuery autocomplete
3. Підключили JavaScript-файл плагіна з усіма залежностями — тобто сам jQuery, бібліотеку віджетів і сам autocomplete

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

А от з «jquery-ui.min.css» доведеться трохи повозитися. Для цього переходимо на офіційний сайт jQuery і завантажуємо плагін із усіма залежностями.

Майже забув про «wp_localize_script». Це важлива частина нашого плагіна: без неї ми не зможемо передавати дані через Ajax (якщо не хардкодити все в JS) та не зможемо забезпечити захист скрипта. Розберемо конструкцію докладніше:

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

Першим параметром функції ми вказуємо ID залежного скрипта. У нашому випадку — це «script.js», якому ми присвоїли ID «wp-post-autocomplete» (той самий ID, що й для стилів, але WordPress автоматично додає суфікси до JS та CSS, і для JS це не видно). Другим параметром ми вказуємо назву JavaScript-об’єкта, який міститиме масив, переданий у третьому параметрі. А саме:
ajax — містить URL для обробки Ajax-запитів. За замовчуванням це /wp-admin/admin-ajax.php
action — назва хука, який оброблятиме наш запит (тобто пошук постів)
security — унікальний захисний токен, який генерується WordPress через певні проміжки часу

На цьому все. Код уроку можна знайти на GitHub за цим посиланням. До зустрічі! 🙂

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

• Урок 1. Як самостійно написати плагін для WordPress
• Урок 2. Розробка шорткода для плагіна WP Post Autocomplete
• Урок 3. Підключення стилів і JS-скриптів до плагіна автокомпліта постів
• Урок 4. Робота з Ajax у плагіні автокомпліта постів
• Урок 5. Підключення jQuery Autocomplete до плагіна автокомпліта постів
• Урок 6. Вивід списку постів на сторінку та пагінація