Продолжаем разработку плагина «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.
Что мы сделали выше?
- Подключили стили плагина
- Подключили стили для jQuery плагина автокомлпита
- Подключили 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 через определенный промежуток времени.
На этом все. Код урока можно найти на гитхабе по этой ссылке. Всем пока 🙂
Список всех уроков темы
- Урок 1. Как самому написать плагин для WordPress
- Урок 2. Разработка шорткода для плагина WP Post Autocomplete
- Урок 3. Подключение стилей и JS скриптов к плагину автокомлпита постов
- Урок 4. Работа с Ajax в плагине автокомплита постов
- Урок 5. Подключение jQuery Autocomplete к плагину автокомплита постов
- Урок 6. Вывод списка постов на страницу и пагинация