Від нуля: Повний посібник та практичний курс з розробки плагінів для WordPress

Підготовчі роботи та налаштування середовища

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

Налаштування локального середовища розробки

Ми рекомендуємо використовувати локальні серверні середовища, такі як Local by Flywheel, XAMPP чи MAMP. Ці інструменти дозволяють швидко налаштувати на вашому комп’ютері середовище для роботи WordPress з використанням серверів Apache/Nginx, бази даних MySQL та мови програмування PHP. Обов’язково переконайтеся, що версія PHP, яку ви використовуєте, сумісна з версією, яка буде використовуватися на вашому цільовому сервері, а також увімкніть функцію відображення повідомлень про помилки – це допоможе швидко виявляти проблеми на початкових етапах розробки.

Вибір кодових редакторів та інструментів

Першим кроком є вибір потужного кодового редактора – наприклад, Visual Studio Code, PhpStorm або Sublime Text. Ці редактори зазвичай мають функції підсвічування синтаксису, автодоповнення коду та інтеграцію з системами контролю версій. Крім того, встановлення інструментів для оптимізації коду (наприклад, PHP_CodeSniffer) та налагодження (наприклад, Xdebug) значно покращить ваш досвід розробки та якість коду.

Рекомендуємо до прочитання. Повний посібник з розробки тем для WordPress: створення професійних веб-сайтів з нуля。

Створіть свій перший плагін.

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

UltaHost – хостинг для сайтів, побудованих на платформі WordPress

Гарантія повернення грошей протягом 30 днів, необмежена пропускна здатність мережі та доступ до баз даних, безкоштовний захист від DDoS-атак; знижка 50% при покупці на термін 3 роки (варіанти об’ємів трафіку: 4 ТБ/5

сторінка доступу

Головний файл плагіна та базові заголовкові дані

Кожен плагін для WordPress має мати основний PHP-файл, який містить стандартну інформацію про плагін, щоб система WordPress могла його ідентифікувати. Ми створимо файл під назвою… my-first-plugin.php Файл.

Помістіть цей код у відповідний файл та завантажте його до каталогу, де розташований WordPress. /wp-content/plugins/my-first-plugin/ У папці.

<?php
/**
 * Plugin Name:       我的第一个插件
 * Plugin URI:        https://example.com/my-first-plugin
 * Description:       这是一个用于学习的简单 WordPress 插件。
 * Version:           1.0.0
 * Author:            你的名字
 * Author URI:        https://example.com
 * License:           GPL v2 or later
 * Text Domain:       my-first-plugin
 * Domain Path:       /languages
 */

Після збереження ви зможете побачити цей плагін на сторінці “Плагіни” у веб-адміністраторі WordPress та активувати його, натиснувши кнопку “Увімкнути”. Наразі у нього немає жодних функцій, але ви успішно створили плагін, який визнаний системою WordPress.

Додайте сторінку налаштувань для плагіна.

Поширеним запитом є створення сторінки для керування плагіном з бекенду. Це можна зробити за допомогою інструментів, які надає система WordPress. add_menu_page() 或 add_options_page() Функція для реалізації цього.

Рекомендуємо до прочитання. Посібник з розробки плагінів для WordPress: від нуля до створення професійних розширень。

Ми продовжуємо додавати код у головний файл, щоб створити просту сторінку налаштувань.

// 钩子：在管理员菜单中添加一个新的页面
add_action('admin_menu', 'mfp_add_admin_menu');

function mfp_add_admin_menu() {
    add_options_page(
        '我的插件设置',          // 页面标题
        '我的插件',             // 菜单标题
        'manage_options',       // 所需权限
        'my-first-plugin',      // 菜单slug
        'mfp_settings_page_html' // 用于显示页面内容的回调函数
    );
}

// 设置页面的HTML内容
function mfp_settings_page_html() {
    // 检查用户权限
    if (!current_user_can('manage_options')) {
        return;
    }
    ?>
    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <p>Ласкаво просимо на сторінку налаштувань мого першого плагіна!</p>
        <form action="/uk/options.php/" method="post" data-trp-original-action="options.php">
            <?php
            // 输出设置字段（后续可在此添加）
            settings_fields('mfp_options_group');
            do_settings_sections('my-first-plugin');
            submit_button('保存设置');
            ?>
        <input type="hidden" name="trp-form-language" value="uk"/></form>
    </div>
    &lt;?php
}

Цей код використовується для… (The code is used for…) add_action() Гак буде викликати функцію. mfp_add_admin_menu Приєднано до WordPress. admin_menu Що стосується дій: коли створюється меню адміністратора, наша функція викликається, що призводить до додавання нового пункту підменю до головного меню “Налаштування”. Після натискання на цей пункт меню виконується відповідна дія. mfp_settings_page_html Функція використовується для рендерингу вмісту сторінки.

Розуміння фіксаторів (hooks) та фільтрів у WordPress

Основна філософія WordPress ґрунтується на використанні так званих “хуків” (Hooks), які дозволяють вставляти власний код у певні моменти чи в певних місцях роботи системи. Це дає можливість модифікувати чи розширювати стандартні функції WordPress, не змінюючи при цьому основні файли системи. Хуки поділяються на два основні типи: дії (Actions) та фільтри (Filters).

hosting.com Віртуальний хостинг

Висока продуктивність завдяки процесорам AMD EPYC, SSD-накопичувачам NVMe і технології LiteSpeed, цілодобова експертна підтримка, розширені заходи безпеки, включаючи SSL, грубу силу, захист від шкідливих програм і DDoS, економія до 73%.

сторінка доступу

Використання дій-хуків (action hooks)

Акційні хаки виконують ваш код під час настання певних подій – наприклад, під час публікації статті, завантаження менеджерського інтерфейсу чи відображення футера. Вони не очікують повернення значень та призначені переважно для виконання певних завдань. Ми add_action() Функція призначена для підключення керованої („callback“) функції до вказаного хака („action hook“).

Наприклад, ми хочемо автоматично додавати уривок зі заявою про авторські права наприкінці кожної статті. Для цього можна скористатися відповідними інструментами чи скриптами. the_content Цей фільтр (він водночас є точкою виконання дії) виконує потрібну функцію. Однак для більш чистого та зрозумілого представлення процесу виконання дії ми використовуємо… wp_footer Хук виводить інформацію у футерній частині передньої сторінки веб-сайту.

add_action('wp_footer', 'mfp_add_footer_note');

function mfp_add_footer_note() {
    if (is_single()) { // 仅在文章页面显示
        echo '<p style="text-align:center; color:#666;">Цей текст був представлений для вас завдяки моєму плагіну.</p>';
    }
}

Використання фільтрів-хуків

Фільтрові хаки (filter hooks) призначені для модифікації даних перед їх використанням або збереженням у базі даних. Вони очікують, що ви отримаєте певне значення, виконаєте необхідні зміни та потім повернете результат цих змін. Ми їх викор add_filter() Функція для монтування керуючих функцій (callback functions).

Рекомендуємо до прочитання. Посібник з розробки плагінів для WordPress: як створити власні функціональні модулі з нуля。

Класичним прикладом є зміна довжини анотації до статті. За замовчуванням у WordPress довжина анотації становить 55 слів, і ми можемо це змінити. excerpt_length Використовуйте фільтри, щоб змінити його.

add_filter('excerpt_length', 'mfp_custom_excerpt_length');

function mfp_custom_excerpt_length($length) {
    // 将摘要长度修改为 20 个单词
    return 20;
}

У цьому прикладі функція… mfp_custom_excerpt_length Отримано значення за замовчуванням щодо довжини. $lengthПотім ми повертаємо власне значення нової довжини – 20. WordPress використовує це значення для генерації анотації.

Міжсерверний віртуальний хостинг

Віртуальний хостинг $2.50 USD на місяць, перший місяць $0.1 USD за промокодом tryinterserver, 461 скрипт хмарних додатків, встановлення в один клік.

сторінка доступу

Безпека плагінів та найкращі практики їх використання

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

Проверка даних, їх ескапування та очищення

Ніколи не довіряйте даним, введеним користувачем, або даним з бази даних. Перед обробкою будь-яких даних необхідно їх перевірити, очистити та ескапувати.
* 验证（Validation）：检查数据是否符合预期的格式或类型（如是否是邮箱、数字等）。可以使用 filter_var() Функція або функція WordPress sanitize_*() Серія функцій.
* 清理（Sanitization）：清除数据中的非法或危险字符，使其变得安全。对于表单输入，常用 sanitize_text_field()。
* 转义（Escaping）：在将数据输出到 HTML、JavaScript 或 URL 时，根据上下文进行转义，以防止跨站脚本（XSS）攻击。WordPress 提供了丰富的转义函数，如 esc_html()、esc_attr()、esc_url() 和 wp_kses_post()。

Наприклад, безпечний спосіб виведення змінної, отриманої з бази даних:

// 假设 $user_input 是从数据库或表单获取的数据
echo '<div class="info">'. esc_html($user_input)'.'</div>';
// 或者，如果允许一些安全的HTML标签
echo '<div class="info">'. wp_kses_post($user_input)'.'</div>';

Інтернаціоналізація та локалізація плагінів

Щоб ваш плагін міг використовуватися користувачами по всьому світу, необхідно додати підтримку перекладів – цей процес називається інтернаціоналізацією (i18n). WordPress використовує фреймворк GNU gettext для реалізації цього.

По-перше, у всіх рядках, які потрібно перекласти, необхідно їх обгорнути відповідною функцією. Найпоширенішою з таких функцій є… __()(Для значень, що повертаються) і _e()(Використовується для безпосереднього відображення результатів виконання.)

Змініть заголовок сторінки керування, яку ми створили раніше:

function mfp_settings_page_html() {
    if (!current_user_can('manage_options')) {
        return;
    }
    ?>
    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <p><?php _e('欢迎来到我的第一个插件的设置页面！', 'my-first-plugin'); ?></p>
        ...
    </div>
    &lt;?php
}

Зверніть увагу: кожна функція перекладу містить параметр текстового поля (`‘my-first-plugin’`), який має відповідати значенню, визначеному у вихідних даних плагіна. Text Domain Повна збіговість. Потім ви можете використовувати такі інструменти, як Poedit, щоб сканувати рядки коду плагінів, які потрібно перекласти, та отримати список для перекладу. .pot Шаблонний файл, а також файли для різних мов. .po 和 .mo Перекладіть файл та розмістіть його у каталозі плагінів. /languages/ У папці.

підсумок

За допомогою цього посібника ми систематично пройшли основні етапи розробки плагінів для WordPress. Від налаштування локального середовища та створення головного файлу, який містить стандартну інформацію про заголовок, до глибокої інтеграції з ядром WordPress за допомогою дій (actions) та фільтрів (filters), а також до важливих аспектів безпеки та підготовки до інтернаціоналізації – ви отримали базові знання для створення функціональних, безпечних та надійних плагінів. Пам’ятайте, що якісні плагіни ґрунтуються на чіткій структурі коду, суворих заходах безпеки та детальному підході до користувацького досвіду. Наступним кроком у навчанні буде практика: почніть з розробки плагінів, які вирішують конкретні, невеликі проблеми, а потім поступово досліджуйте більш складні API та функції.

Часті запитання

Які базові знання необхідні для розробки плагінів для WordPress?

Вам потрібно опанувати мову програмування PHP – основний інструмент для розробки WordPress. Крім того, необхідно мати базові знання HTML, CSS та JavaScript для роботи з переднім інтерфейсом та взаємодією користувачів. Добре буде також знати основні концепції бази даних MySQL (операції CRUD), адже WordPress використовує її для зберігання інформації. Нарешті, ключовим є розуміння базової архітектури та процесів роботи WordPress.

Як налаштувати та виправити помилки у своєму WordPress-плагіні?

По-перше, у файлі wp-config.php увімкніть режим налагодження (debugging mode) для WordPress. define('WP_DEBUG', true); 和 define('WP_DEBUG_LOG', true); Встановіть цей параметр на значення “true”. У такому разі повідомлення про помилки будуть зберігатися у файлі /wp-content/debug.log, що запобігає їхньому безпосередньому відображенню відвідувачам. Крім того, використання професійних інструментів для налагодження, таких як Xdebug, у поєднанні з вашим кодовим редактором (наприклад, VS Code), дозволяє встановлювати пункти зупинки та виконувати код крок за кроком – це дуже корисні функції під час розробки. Крім того, за допомогою панелей мережі та консолі у розробницьких інструментах браузера можна перевіряти AJAX-запити та помилки на стороні клієнта (у JavaScript-коді).

Як надіслати плагін, який я розробив, до офіційного каталогу плагінів WordPress?

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

Як додати параметр налаштування до WordPress Customizer для свого плагіна?

WordPress-конфігуратор (Customizer) надає можливість перегляду налаштувань у реальному часі. Ви можете використовувати його для зміни вигляду вашого веб-сайту без необхідності перезавантаження сторінки. add_action('customize_register', 'your_function'); Хук. У функції-поверненні (callback function). your_function У цьому випадку, шляхом… $wp_customize Об’єкт містить один розділ (Section), один параметр налаштування (Setting) та один контролер (Control). Це дозволяє користувачам змінювати параметри в інтерфейсі налаштувань та відразу бачити результати цих змін на передньому кінці (в браузері), що ідеально підходить для керування зовнішнім виглядом тем та плагінів.