Урок 2. Розробка шорткоду для плагіна WP Post Autocomplete

Продовжимо розробку нашого WP плагіна для автозаповнення постів. Сьогодні ми створимо шорткод з полем вводу для пошуку тексту.
Для формування коду плагіна, грубо кажучи, можна використовувати два підходи:

1. Використовувати функції для написання хуків, фільтрів, хелперів тощо. При цьому додавати на початок кожної функції унікальний префікс, щоб уникнути конфліктів з назвами функцій інших плагінів/тем або ядра WP.
2. Або використовувати класи для розробки. Так, тут також доведеться використовувати префікси, але значно менше, оскільки вся логіка буде прихована в методах класу.

На початку знайомства з WordPress я використовував другий підхід — і поки що не шкодую. Наприклад, якщо плагін «невеликий» і його логіка досить проста — я використовую один клас. Якщо потрібно окремо адміністративну частину, фронтенд тощо — розділяю логіку на кілька класів і використовую автозавантажувач (autoloader) для автоматичного підключення класів. Але все індивідуально, можна й просто інклудити потрібний файл. У нашому випадку, оскільки проєкт невеликий, ми будемо використовувати один файл і один клас.

Продовжуємо. Відкриваємо файл плагіна, створений у попередньому уроці, за адресою «/wp-content/plugins/wp-post-autocomplete/wp-post-autocomplete.php» і створюємо клас із назвою «WpPostAutocomplete» зі вмістом:

if(class_exists('WpPostAutocomplete') == false):
	class WpPostAutocomplete
	{
		public function __construct()
		{
			add_shortcode('post-autocomplete-form', array($this, 'post_autocomplete_form'));
		}

		/**
		 * Отображает форму поиска
		 */
		public function post_autocomplete_form()
		{
			$content  = '<div class="wrap-post-autocomplete">';
			$content .= '<input type="text" class="post-autocomplete-field" placeholder="Введіть текст для пошуку">';
			$content .= '</div>';

			return $content;
		}
	}

	new WpPostAutocomplete();
endif;

Розберімо наш код.

Конструкцією if:

if(class_exists('WpPostAutocomplete') == false):
/* … */
endif;

перевіряємо, чи існує клас із такою назвою. Якщо ні — створюємо його. В іншому випадку... нічого не робимо.

У конструкторі викликаємо функцію «add_shortcode». Як назву шорткоду використовуємо — «post-autocomplete-form». А для формування HTML — метод поточного класу «post_autocomplete_form()». Метод має бути публічним (public), інакше виникне помилка.

У самому методі — формуємо HTML-код із полем для введення пошукового запиту й обгортаємо його у враппер з класом «wrap-post-autocomplete»:

$content  = '<div class="wrap-post-autocomplete">';
$content .= '<input type="text" class="post-autocomplete-field" placeholder="Введіть текст для пошуку">';
$content .= '</div>';
return $content;

Цей враппер нам знадобиться під час роботи з js автозаповнення.

Давайте перевіримо роботу нашого плагіна. Для цього перейдіть у розділ плагінів WP та активуйте потрібний плагін. Потім створіть сторінку або запис:

Збережіть і перейдіть до перегляду запису. Ви повинні побачити таке:

На цьому все. Код уроку можна знайти на GitHub, перейшовши за цим посиланням.

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

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