Продовжуємо розробку нашого плагіна автозаповнення постів. Сьогодні розберемо функціонал Ajax у WordPress: що, де і як підключати, як протестувати роботу без реалізованого фронтенду, та які саме запити надсилати на сервер.
Продовжуємо розробку плагіна «wp-post-autocomplete». У сьогоднішній статті ми підключимо стилі, js-файл і бібліотеку autocomplete з фреймворку jQuery (який за замовчуванням іде разом з ядром WordPress).
Продовжимо розробку нашого WP плагіна для автозаповнення постів. Сьогодні ми створимо шорткод з полем вводу для пошуку тексту.
Для формування коду плагіна, грубо кажучи, можна використовувати два підходи:
- Використовувати функції для написання хуків, фільтрів, хелперів тощо. При цьому додавати на початок кожної функції унікальний префікс, щоб уникнути конфліктів з назвами функцій інших плагінів/тем або ядра WP.
- Або використовувати класи для розробки. Так, тут також доведеться використовувати префікси, але значно менше, оскільки вся логіка буде прихована в методах класу.
Цим постом я розпочинаю серію взаємодоповнюючих статей, присвячених розробці плагінів для WordPress. Завданням плагіна, який ми розроблятимемо, буде — Ajax-пошук статей з автозаповненням. Для реалізації цієї функціональності нам доведеться розглянути щонайменше такі теми:
- Розробка файлу плагіна
- Створення шорткоду
- Підключення стилів і скриптів
- Робота з Ajax у WordPress
- Робота з jQuery Autocomplete
- Виведення списку постів на сторінку та пагінація
Як бачите, роботи чимало. І тим, хто лише починає знайомство з програмною частиною WordPress, має бути цікаво.
Дана стаття — це продовження статті про таби на jQuery і flexbox. Сьогодні ми модифікуємо наш скрипт та реалізуємо його у вигляді jQuery плагіна, трохи удосконаливши.
Перше, що ми зробимо — це розділимо логіку скрипта на два файли:
- CSS стилі. Ми просто перенесемо їх з HTML документа у файл «jquery.tab-light.css».
- JavaScript. Його код перенесемо у файл «jquery.tab-light.js»
Не забудьте підключити ці файли у ваш HTML документ.
Друге. Назвемо наш плагін «tabLight» (тобто легкий). Це ім’я ми використаємо у JS коді.