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

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

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

  1. Использовать функции для написания хуков, фильтров, хелперов, пр.. При этом, добавлять в начало каждой функции уникальный префикс. Чтобы не было конфликтов с названиями ф-й других плагинов/тем, или движком ВП.
  2. Или использовать класс(ы), для разработки. Да, здесь нам так же придется использовать префиксы, но значительно меньше, т. к. вся логика будет скрыта в методах класса.

В самом начале, как я познакомился с вордпрессом я использовал второй подход, и пока что не жалею. К примеру, если плагин «маленький», и логика его довольно простая — я использую один класс. Если нужна отдельно админка, фронтенд, пр. — разделяю логику на несколько классов, и использую автолоадер для автоматического подключения классов. Но все индивидуально, и можно просто заинклудить нужный файл. В нашем случае, т. к. проект маленький, мы будем использовать один файл и один класс.
Продолжаем. Открываем файл плагина созданный в прошлом уроке по адресу «/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». А для формирования кода — метод текущего класса «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 автокомплита.

Давайте проверим работу нашего плагина. Для этого, перейдите в раздел с плагинами ВП, а активируйте нужный плагин. Далее, создайте страницу или псот:

Сохраните и перейдите к просмотру записи. Вы должны будете увидеть следующее:

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

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

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

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

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

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