WordPress розробка плагіна. Введення

12

Від автора: ви шукайте покрокову інструкцію з розробки плагінів для WordPress, в якій будуть враховані всі важливі аспекти? Якщо так, то вам пощастило. У цьому уроці буде розглянута базова інформація, яку вам необхідно знати для того, щоб спроектувати свій плагін, а також будуть надані направлення для вивчення найкращих практик.

WordPress розробка плагіна. Введення

Що таке плагіни WordPress?

Плагіни це один з найпотужніших інструментів WordPress. По суті, плагіни це модулі, які ви підключаєте до свого сайту для того, щоб активувати нові функції або елементи. Функціонал, який можна додати, залежить від призначення плагіна. Існує безліч плагінів, від простих (додають нові стилі або вносять невеликі зміни в тему) до складних (значні зміни, такі як eCommerce інтеграція або з’єднання зі сторонніми джерелами). Плагіни відрізняються від тем і працюють незалежно за допомогою хуков, фільтрів, шорткодов, віджетів і користувальницького коду.

Плюси, мінуси та рекомендації

Плагіни – відмінний інструмент, розробники і адміністратори сайтів отримують розширений і повторно використовується функціонал. Незважаючи на всю красу, у плагінів є свої сильні і слабкі сторони. Плюси:

Плагін можна додати майже будь-яку тему, і він буде працювати правильно. Плагіни були розроблені, як модулі, тобто їх можна копіювати в нові проекти (або поширювати їх), що чудово.

Плагіни працюють, як контейнери для всього вашого коду і елементів. Якщо б вам знадобилося розробити в темі схожий функціонал, то він змішався б з основним кодом. В плагінах ж весь функціонал знаходиться в окремому пакеті.

Плагіни легко створювати, а також можна скористатися хуками і экшенами з WordPress.

Плагіни можна створювати за принципом ООП, що робить код більш надійним і керованим.

Мінуси:

Обмежений доступ до тематики сайту. Плагін не може вставити код напряму в будь-яке місце в темі. В темі повинні бути спеціальні місця, в які можна вставити плагін, такі як місце для основного вмісту або під віджети.

Бувають конфлікти плагінів. Іноді інші плагіни (або взагалі тема) можуть негативно впливати на плагін, що може повністю зруйнувати користувальницький досвід від сайту (наприклад, ви використовували WordPress медіа завантажувач, який оновився і перестав підтримувати старий функціонал, руйнуючи ваш плагін).

Обмежений доступ до шаблонів і дизайнів. Плагіни зобов’язані забезпечувати функціонал, а теми – стилі.

Основні поняття – Дій, Фільтри, Шорткоди, Віджети і т. д.

Давайте виділимо трохи часу і обговоримо ключові поняття в розробці плагінів. Ви, мабуть, вже знайомі з цими поняттями, якщо ви працювали з темами WordPress. Однак чітке розуміння принципів роботи допоможе вам створювати простий у використанні і легкий в обслуговуванні функціонал.

Дій (Хуки)

Action хук – певний набір дій, які виконують WordPress в певний момент часу. При запуску екшену будуть знайдені всі прикріплені до нього функції, функції будуть виконані в необхідному порядку. В WordPress існують десятки екшенів, що охоплюють основний функціонал. Кожному екшену присвоєно унікальне ім’я. Приміром, коли WordPress зберігає пост (це може бути пост, сторінка або інший тип контенту, що викликається save_post екшен, який шукає всі прикріплені до нього функції.

Все дій задаються функцією do_action(). Функція приймає наступні параметри:

$tag (обов’язковий)

$args (необов’язковий, одна або більше змінних)

Загалом, кожному екшену буде присвоєно назву (тег) і необов’язкове кількість додаткових корисних змінних (це можуть бути безліч змінних або нуль).

Простий WordPress екшен

Давайте розглянемо хук save_post. Хук приймає чотири значення. Перше – ім’я екшену, інші три є додатковими (в яких зберігаються ID посту, сам об’єкт посади та існування або оновлення посту)

// save_post action hook
do_action(‘save_post’, $post_ID, $post, $update);

Екшен можна налаштувати таким чином, що при збереженні посади буде виконуватися який-небудь ще функціонал, такий як відправка email або оновлення бази даних.

Створення власного екшену

У WordPress є безліч готових екшенів, але ви можете створити свій. Свої дій допоможуть вам викликати свій власний функціонал точково в будь-якому місці теми або плагіна. Скористаємося функцією do_action() для створення свого нового екшену. Ми будемо створювати екшен, який буде викликатися відразу після запиту title на сторінках.

//створюємо новий екшен, який буде викликатися після запиту title
do_action(‘page_subtitle’, $post);

Спочатку буде відображений page, буде показаний title як звичайно, і тільки потім буде викликаний наш хук page_subtitle. WordPress перевірить всі прикріплені до екшену функції і виконає їх (буде передана глобальна змінна $post, щоб функція знала, підзаголовок якої сторінки показувати).

Виконання своїх функцій за викликом екшену

Для виклику певної функції під час роботи екшену необхідно використовувати add_action() для прикріплення функції. add_action приймає наступні параметри.

$hook (обов’язковий)

$function_to_add (обов’язковий)

$priority (опціональний)

$accepted_args(опціональний, але обов’язковий якщо в екшен передається більше однієї змінної)

Використовуємо обов’язкові аргументи

Функцію add_action можна викликати, передавши їй в якості значень ім’я хука і викликається функції. Це найпростіший спосіб виклику екшену.

//коли ‘save_post’ працював, викликаємо функцію збереження
add_action(‘save_post’,’save_my_custom_post’);
//Створюємо нашу функцію збереження
function save_my_custom_post($post_id){
//код
}

Як видно, при появі save_post ми відразу ж прикріплюємо нашу функцію save_my_custom_post, тим самим отримуючи можливість зробити що-то після збереження.

Використовуємо всі аргументи (Розуміння пріоритету і значень accepted_args)

Іноді обов’язкових значень недостатньо. У таких випадках для роботи екшену вам необхідно вручну задати значення змінних $priority і $accepted_args.

Пріоритет в екшені визначає порядок виконання функцій. За замовчуванням дій використовують значення 10 в якості змінної $priority. Можна задати як більше, так і менше значення, щоб запускати свою функцію раніше або пізніше. Дуже корисна, коли ваша тема або плагін використовують той же хук (ви можете задати, коли функцію слід запустити).

Змінна accepted_args вказує на кількість змінних, переданих при виклику add_action. Кількість аргументів за замовчуванням, прийнятих екшеном, дорівнює одиниці. Якщо ж ваш екшен приймає кілька змінних, ви зобов’язані повідомити WordPress, скільки їх буде. Розглянемо екшен save_post.

//екшен збереження посади, зазначеної в WordPress
do_action( ‘save_post’, $post_ID, $post, $update );
//додамо свою функцію в ‘save_post’ hook, додавши пріоритет і args
add_action(‘save_post’,’save_my_page_extended,10,3);
//функція, що виконується під час збереження (нам потрібні 3 змінні)
function save_my_page_extended($post_ID, $post, $update){
//нам доступні всі змінні
}

Екшен save_post містить безліч змінних, які можна в нього передати, ми повинні задати пріоритет і кількість переданих змінних. Як тільки ми повідомили WordPress, що ми будемо передавати кілька змінних, їх можна додати в нашу функцію, тим самим отримуючи доступ до них.

Узагальнення

У загальному і цілому, ви будете використовувати функцію do_action всередині теми або плагіна для запуску коду в різних місцях (задаючи значення, доступні будь-якої функції з хука). Для додавання своєї функції необхідно використовувати add_action. Свій екшен можна викликати з мінімальним набором параметрів (ім’я екшену і функції, яку ви хочете викликати), або ж ви можете додати пріоритет і кількість переданих змінних.

Фільтри (хуки)

Фільтра WordPress це хук, приймає змінну (або їх набір) і повертає її назад після певної модифікації. Фільтри часто використовуються для маніпуляції інформацією за замовчуванням. В WordPress закладені десятки фільтрів, створених за допомогою функції apply_filters(). Функція приймає наступні аргументи:

$tag (обов’язковий)

$value (обов’язковий)

$var (опціональний)

Змінна $tag – назву фільтра. $value – змінна або значення, яке потрібно відфільтрувати. Змінна $var необов’язкова, але з її допомогою можна передати додаткове значення в функцію. Плагіни і теми часто створюють фільтри таким чином, що ви можете змінювати елементи без необхідності вносити зміни в код. Фільтри часто задані всередині функцій.

Простий фільтр WordPress

get_the_excerpt – фільтр, який можна використовувати всередині циклу постів для отримання доступу до уривків статті. Фільтр є частиною ядра WordPress, задається тільки назву фільтра і назву функції. Опціональних аргументів немає.

//отримуємо витяг з посади, як вказано у /wp-includes/post-template.php
echo apply_filters( ‘the_excerpt’, get_the_excerpt() );

До фільтру the_excerpt можна прикріпити свою функцію і маніпулювати витримкою посту перед її поверненням (наприклад, можна обернути текст у контейнер, і змінити вміст або урізати довжину тексту).

Створення свого фільтра

Розглянемо приклад. Якщо ми в плагіні створюємо масив імен, то їх можна відфільтрувати за допомогою хука apply_filters. Даний хук скаже WordPress, що значення можуть бути змінені будь-функцією, прикріпленою до хуку.

//Фільтруємо наш масив імен
$name_values = apply_filters(‘filter_name_array_values’,
array(‘Joanna’,’Peter’)
);

Такий фільтр допоможе іншим розробникам (або вам) динамічно змінювати значення. Взагалі, якщо ви пишіть функцію або який-небудь інший функціонал, створення фільтрів вважається хорошою практикою. За допомогою фільтрів ми розширюємо елементи.

Виконання фільтра

Для запуску свого фільтра необхідно викликати функцію add_filter(). Функція приймає наступні аргументи:

$tag (обов’язковий)

$function_to_add (обов’язковий)

$priority (опціональний)

$accepted_args (опціональний, але обов’язковий при передачі декількох аргументів)

Функція add_filter працює так само, як і add_action. Задається назва викликається фільтра, назва викликається функції. Подивимося, як можна використовувати цю функцію для фільтрації масиву імен, створеного в попередньому прикладі.

//Змінюємо збережені значення імен під час фільтрації
function add_new_names($names){
$names[] = ‘Simon’;
return $names;
}
add_filter(‘filter_name_array_values’,’add_new_names’);

Як можна помітити, ми прикріпили функцію add_new_names до нашого фільтру filter_name_array_values. Функція приймає всього одну змінну $names. Коли ми поставили наш фільтр вище за допомогою apply_filters, ми встановили значення за замовчуванням Joanna і Peter для масиву.

Наша функція взяла існуючі значення (для простоти ми їх назвали $names) і додали нове значення Simon в кінець масиву.

В кінці ми повертаємо усі значення. Повертати значення дуже-дуже важливо, інакше все зламається. Причина в тому, що будь-яка прикріплена до фільтру функція теж отримає ці значення. Якщо ви їх не повернете, функцій не з чим буде працювати.

Узагальнення

Функція apply_filters використовується для створення фільтрів всередині тих чи плагінів (в них передаються значення, які необхідно відфільтрувати). Для прикріплення своєї власної функції використовується add_filter, з допомогою чого можна маніпулювати фильтруемым значенням.

Шорткоди

Більш детально про шорткодах можна почитати в shortcode API на сторінці WordPress Codex або в попередній моїй статті Кастомні шорткоди WordPress. Текст нижче буде коротким узагальненням, яке допоможе вам почати працювати з шорткодами.

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

Шорткоди це відмінний спосіб вирішення даної проблеми. З їх допомогою розробники можуть створювати складний функціонал, який можна змінити за допомогою простих значень атрибутів. Шорткоди додаються в візуальний редактор (або кудись ще), і при перегляді їх користувачами виконується ваш код. Шорткод в редакторі:

WordPress розробка плагіна. Введення

На front-end стороні буде відображено кнопку:

WordPress розробка плагіна. Введення

Швидкий урок з шорткодам

Шорткод створюється за допомогою функції add_shortcode(). Перший передається аргумент це ім’я (name) шорткода, другий output_function. Функція output_function приймає три значення; attributes, content й name. Всередині функції створюється сам шорткод і повертається на екран. Параметри функції більш докладно ми розглянемо в нашому прикладі, поки що не будемо звертати на них уваги. Розглянемо простий приклад:

//Додаємо шорткод
add_shortcode(‘test_shortcode’,’my_shortcode_output’);
//виводимо на екран
function my_shortcode_output($atts, $content = «, $tag){
$html = «;
$html .= ‘

Hello World

‘;
return $html;
}

Тепер коли ми додали наш шорткод [test_shortcode] редактор, він буде запускати нашу функцію і конвертувати результат в

Hello World

.

Віджети

Якщо ви хочете більш докладно вивчити віджети, спочатку ознайомтеся з WordPress Widget API codex. На цій сторінці йдеться про те, що вам необхідно, а також на даній сторінці ви знайдете задокументовані робочі приклади. Віджети вкрай важливий інструмент, так як це ще один спосіб виконання коду плагінів, і в той же час інтерфейс їх використання дуже простий. Приклад шорткода з набором конфігурацій.

WordPress розробка плагіна. Введення

Так як в більшості часом підтримується один або кілька сайдбаров, свій віджет дасть ваш швидкий спосіб відображення вашої інформації в темі. Віджети складніше шорткодов, однак слідують тим же принципам – задаються параметри для відображення, а потім вона відображаються на front-end стороні.

Короткий вступ в віджети

Щоб створити віджет, вам необхідно успадкувати клас WP_Widget. В WordPress був реалізований ООП підхід до створення віджетів, вони існують як клас; даний клас необхідно наслідувати або розширити для додавання свого функціоналу. Розглянемо базовий приклад віджета:

//клас нашого віджету
class my_widget extends WP_widget{
//конструктор (задає базові елементи віджета)
public function __construct(){
parent::__construct(
‘my_widget’, // Base ID
‘My Widget’, // Name
array( ‘description’ => ‘An awesome widget’) // Args
);
add_action(‘widgets_init’,array($this,’register_widget’));
}
//відображення на стороні front-end
public function widget($args,$instance ){
echo $args[‘before_widget’];
echo $instance[‘title’];
echo $args[‘after_widget’];
}
//back-end сторона
public function form($instance){
$title = (isset($instance[‘title’]) ? $instance[‘title’] : «);
echo ‘get_field_id(‘title’) . ‘» name=»‘ . $this->get_field_name(‘title’) . ‘» value=»‘ . $title . ‘»/>’;
}
//збереження
public function save($new_instance, $old_instance){
$instance = array();
$title = $new_instance[‘title’];
return $instance;
}
//реєстрація віджета у WordPress
public function register_widget(){
register_widget(‘my_widget’);
}
}
$my_widget = new my_widget;

Даний код створить базовий віджет, в якому можна зберігати текстове значення та відобразити його на екрані. Як видно нижче вигляд не найцікавіший.

WordPress розробка плагіна. Введення

Класи (Об’єктно-орієнтоване проектування)

Об’єктно-орієнтоване проектування (ООП) — це техніка розробки, в якій функціонал будується навколо концепції класів. Класи це спосіб зберігання функцій і значень усередині одного об’єкта, вони дають вам єдину точку розробки. Загальна мета ООП це створення об’єкта, що виконує ваш функціонал.

Плагіни – відмінний кандидат для ООП, так як це модулі, що створюються для виконання певних завдань на вашому веб-сайті. В плагінах зазвичай містяться свої CSS і JS файли поряд з можливими зображеннями та додатковими PHP файлами. ООП полегшить ваш процес розробки. Наш приклад віджета буде повністю об’єктно-орієнтованим.

Наступні кроки

В даній статті було розглянуто безліч основних понять, необхідних для розробки плагінів для WordPress. Слідкуйте за виходом наступної статті, де ми повністю розберемо код реального прикладу.