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

Основи плагінів для WordPress та середовище розробки

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

Для ефективного розроблення вам знадобиться локальне середовище розробки. Ви можете швидко налаштувати сервер із PHP та MySQL за допомогою таких інструментів, як XAMPP, MAMP, Local by Flywheel чи Docker. Після цього встановіть найновішу версію WordPress. Під час розробки рекомендується…wp-config.phpУвімкнено функцію використання файлів.WP_DEBUGЦе робиться для своєчасного виявлення помилок.

“Серцем” плагіна є головний PHP-файл. Коментарі на початку цього файлу є його ідентифікаційними даними, і WordPress використовує цю інформацію для розпізнавання та керування плагіном у фоновому режимі. Стандартні коментарі на початку головного файлу плагіна виглядають так:

Рекомендуємо до прочитання. Що таке тема WordPress?。

<?php
/**
 * Plugin Name: 我的第一个自定义插件
 * Plugin URI:  https://example.com/my-first-plugin
 * Description: 这是一个用于学习插件开发的简单插件，它将在文章末尾添加自定义内容。
 * Version:     1.0.0
 * Author:      开发者名称
 * License:     GPL v2 or later
 * Text Domain: my-first-plugin
 */

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

Давайте почнемо з конкретної функції: автоматичне додавання унікального тексту наприкінці кожної статті на сайті. Цей приклад буде використовуватися протягом усього процесу розробки плагіна.

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

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

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

Головний файл плагіна та процес ініціалізації

По-перше, у WordPress…wp-content/pluginsСтворіть нову папку в каталозі, наприклад,my-first-pluginУ цьому папці створіть головний PHP-файл; його можна назвати…my-first-plugin.phpКопіюйте вищезгаданий код заголовкових коментарів туди, де це потрібно.

Наступним кроком є знайдення безпечного способу виконання коду ініціалізації плагіна. Найкращою практикою є об’єднання всіх функцій у один клас або використання функцій у просторах імен. Тут ми використаємо простий клас для організації коду. Після коментарів у вступній частині головного файлу додайте наступне визначення класу:

if ( ! defined( 'ABSPATH' ) ) {
	exit; // 防止直接访问文件
}

class My_First_Plugin {
    public function __construct() {
        // 构造函数，在这里挂载钩子
    }
}

// 初始化插件
new My_First_Plugin();

if ( ! defined( ‘ABSPATH’ ) )Цей рядок коду є частиною стандартів безпеки під час розробки плагінів для WordPress та призначений для запобігання прямому доступу користувачів до файлів вашого плагіна за допомогою URL-адрес.

Використовуйте хаки для додавання вмісту в футер сторінки статті.

Архітектура плагінів WordPress ґрунтується на системі “хуків” (Hooks), яка поділяється на дії (Actions) та фільтри (Filters). Дії дозволяють виконувати код у певний момент часу, а фільтри – модифікувати дані.

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

Наша мета – додати текст після змісту статті; це процес “фільтрації” цього змісту. Тому ми будемо використовувати…the_contentЦей фільтр. Змініть конструктор та методи у класі наступним чином:

class My_First_Plugin {
    public function __construct() {
        // 将自定义方法挂载到‘the_content’过滤器上
        add_filter( 'the_content', array( $this, 'add_footer_to_content' ) );
    }

/**
     * 在文章内容后添加自定义页脚
     *
     * @param string $content 原始文章内容。
     * @return string 修改后的文章内容。
     */
    public function add_footer_to_content( $content ) {
        // 确保只在主循环的单篇文章页面显示
        if ( is_single() && in_the_loop() && is_main_query() ) {
            $custom_footer = '<div class="my-plugin-footer"><p>Дякуємо, що прочитали цю статтю! Створено за допомогою плагіна «Мій перший плагін».</p></div>';
            $content .= $custom_footer;
        }
        return $content;
    }
}

add_filter()Функція виконує метод класу.add_footer_to_contentЗареєструйтесяthe_contentФільтри. Коли WordPress готується вивести вміст статті, викликається наш метод, і до нього надається оригінальний текст статті. Ми використовуємо умовні перевірки, щоб переконатися, що футер додається лише на сторінці самої статті, а не на головній сторінці чи сторінці архіву. Після цього до вмісту додається наша власна HTML-кодова частина, і результат повертається.

Додайте опції для керування плагіном у бекенд-інтерфейс.

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

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

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

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

Створити сторінку меню налаштувань

Нам потрібно додати підсторінку до меню “Налаштування” у адміністративному інтерфейсі WordPress. Для цього необхідно використати відповідні інструменти та функції системи.add_options_page()Функція, яка зазвичай монтується…admin_menuНа дієвому хвості.

По-перше, додайте до класу плагінів новий метод для реєстрації меню та сторінок:

class My_First_Plugin {
    // ... 之前的构造函数和方法 ...

public function __construct() {
        add_filter( 'the_content', array( $this, 'add_footer_to_content' ) );
        // 挂载后台管理菜单
        add_action( 'admin_menu', array( $this, 'add_admin_menu' ) );
        // 挂载初始化设置选项
        add_action( 'admin_init', array( $this, 'settings_init' ) );
    }

public function add_admin_menu() {
        add_options_page(
            '我的第一个插件设置', // 页面标题
            '自定义页脚设置',     // 菜单标题
            'manage_options',     // 所需权限
            'my-first-plugin',    // 菜单slug
            array( $this, 'options_page_html' ) // 回调函数，用于输出页面HTML
        );
    }
}

Поля реєстраційних налаштувань та сторінка їх відображення

Далі нам потрібно використовувати API налаштувань WordPress для безпечної реєстрації, зберігання та підтвердження параметрів. Це передбачає…register_setting(), add_settings_section()和add_settings_field()Функції типу “wait” тощо.

Рекомендуємо до прочитання. Що таке WooCommerce? Детальний огляд його основних функцій та сценаріїв використання。

public function settings_init() {
    // 注册一个设置选项组
    register_setting( 'my_first_plugin_settings', 'my_first_plugin_options' );

// 在页面中添加一个设置区域
    add_settings_section(
        'my_first_plugin_section',
        '页脚内容配置',
        array( $this, 'section_callback' ),
        'my-first-plugin'
    );

// 向该区域添加一个字段
    add_settings_field(
        'footer_text',
        '页脚显示文本',
        array( $this, 'footer_text_field_render' ),
        'my-first-plugin',
        'my_first_plugin_section'
    );
}

public function section_callback() {
    echo '<p>Тут ви можете налаштувати текст, який буде відображатися в кінці статті.</p>';
}

public function footer_text_field_render() {
    $options = get_option( 'my_first_plugin_options' );
    $value = $options['footer_text'] ?? '感谢阅读本文！由【我的第一个插件】生成。'; // 默认值
    ?&gt;
    <input type='text' name='my_first_plugin_options[footer_text]' value='<?php echo esc_attr( $value ); ?>' style='width: 400px;'>
    <p class="description">Підтримуються прості HTML-теги, такі як… <strong>, <em>, <a>。</p>
    <?php
}

public function options_page_html() {
    // 检查用户权限
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
    <div class="wrap">
        <h1><p><strong>  <p><strong></h1>
        <form action='/uk/options.php/' method='post' data-trp-original-action="options.php">
            <?php
            settings_fields( 'my_first_plugin_settings' );
            do_settings_sections( 'my-first-plugin' );
            submit_button();
            ?>
        <input type="hidden" name="trp-form-language" value="uk"/></form>
    </div>
    &lt;?php
}

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

public function add_footer_to_content( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        $options = get_option( 'my_first_plugin_options' );
        $footer_text = $options['footer_text'] ?? '感谢阅读本文！由【我的第一个插件】生成。';
        $custom_footer = '<div class="my-plugin-footer"><p>'. wp_kses_post( $footer_text ) . '</p></div>';
        $content .= $custom_footer;
    }
    return $content;
}

wp_kses_post()Функція гарантує, що у введеному користувачем тексті дозволені лише безпечні HTML-теги, що є важливим заходом безпеки.

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

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

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

Інтернаціоналізація плагінів та найкращі практики їх розробки

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

Текстове поле та функція перекладу

По-перше, переконайтеся, що у коментарях на початку вашого плагіна визначені всі необхідні параметри.Text DomainНаприклад,my-first-pluginПотім, у всіх місцях у плагіні, де потрібно перекласти рядки, використовуйте відповідні функції для їх обгортання.

Змініть наш попередній код, щоб додати підтримку перекладу до виводу тексту:

// 在构造函数中加载翻译文件
public function __construct() {
    // ... 其他钩子 ...
    add_action( 'plugins_loaded', array( $this, 'load_textdomain' ) );
}

public function load_textdomain() {
    load_plugin_textdomain(
        'my-first-plugin',
        false,
        dirname( plugin_basename( __FILE__ ) ) . '/languages/'
    );
}

// 修改设置页面的字符串
public function section_callback() {
    echo '<p>' . esc_html__( '在这里配置显示在文章末尾的文本内容。', 'my-first-plugin' ) . '</p>';
}

public function footer_text_field_render() {
    $options = get_option( 'my_first_plugin_options' );
    $value = $options['footer_text'] ?? __( '感谢阅读本文！由【我的第一个插件】生成。', 'my-first-plugin' );
    ?&gt;
    <input type='text' name='my_first_plugin_options[footer_text]' value='<?php echo esc_attr( $value ); ?>' style='width: 400px;'>
    <p class="description">&lt;?php esc_html_e( &#039;支持简单的HTML标签，如 <strong>, <em>, <a>。', 'my-first-plugin' ); ?&gt;</p>
    &lt;?php
}

// 注意：用户在前台输入的“页脚文本”本身通常不需要翻译，因为它是由管理员设置的具体内容。

__()Функція призначена для перекладу та повернення рядка.esc_html__()Використовується для перекладу та ескапування HTML-вихідного коду._e()Функція призначена для перекладу та безпосереднього відображення рядка. Другим параметром функції є текстове поле, яке має відповідати визначенням, наданим плагіном.

Безпека, продуктивність та організація коду

Окрім інтернаціоналізації, також необхідно дотримуватися наступних найкращих практик:
1. Безпека: Перевіряйте, очищуйте та ескапуйте всі дані, введені користувачами. Використовуйте відповідні механізми для забезпечення надійності системи.sanitize_text_field(), esc_html(), wp_kses_post()Наприклад, функції wait(), sleep(), usleep(). Використовуйтеwp_nonce_field()Захист від атак типу CSRF (Cross-Site Request Forgery).
2. Перфоманси: Раціонально використовуйте хаки („hooks“), щоб уникати виконання непотрібних запитів до бази даних під час кожного завантаження сторінки. Можна також розглянути можливість тимчасового („transient“) кешування отриманих результатів.
3. Організація коду: Для складних плагінів файли слід розділяти за функціональними модулями. Головний файл відповідає за ініціалізацію системи, а класи та методи розміщуються в відповідних модулях.includes/Каталог; фронтенд-ресурси (CSS, JS) розміщені тут.assets/Зміст.
4. Видалення та очищення: Якщо ваш плагін створював таблиці бази даних чи налаштування, має бути доступна функція видалення для очищення цих даних. Це можна реалізувати за допомогою окремого інструменту чи процедури.uninstall.phpЦе можна зробити за допомогою файлів.

підсумок

За допомогою цього посібника ми пройшли повний процес розробки власного плагіна для WordPress із базовими функціями: від налаштування середовища розробки, створення каркаса плагіна, додавання нових функцій за допомогою системи хуків (hooks), реалізації сторінки налаштувань на серверному боці, а також розглянули питання інтернаціоналізації та безпеки. Ви навчилися, як правильно створювати та підadd_filter和add_actionІнтеракція з ядром WordPress: як використовувати API Settings для створення надійних сторінок налаштувань та як це реалізувати на практиці?load_plugin_textdomainНеобхідно забезпечити підтримку багатьох мов для вашого плагіна. Пам’ятайте, що під час розробки плагінів безпека, здатність до обслуговування та якість користувацького досвіду є головними критеріями оцінки. Виходячи з цього, ви можете далі досліджувати такі більш складні функції, як налаштування типів статей, метаданих, короткі коди, REST API-пінти та інше, щоб створити ще потужніші

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

Чому мій плагін не відображається у меню в бекенді?

Зазвичай це спричинено проблемами з правами доступу або помилками в коді. Спочатку переконайтеся, що у вас є необхідні права для виконання цієї дії.add_options_page或add_menu_pageПараметри дозволів, вказані у функції (наприклад…)‘manage_options’Цей елемент тексту відповідає вашому поточному обліковому запису та ролі, за якою ви увійшли. Далі, перевірте…admin_menuЧи був хук правильно встановлений, і чи немає синтаксичних помилок у функції-поверненні, які могли б призвести до перерви виконання PHP-коду? Найпростіший спосіб – це увімкнути цей хук у панелі керування WordPress.WP_DEBUGПеревірте, чи виводиться будь-яка відповідна інформація про помилки.

Як додати власні файли CSS та JavaScript до плагіна?

Правильний підхід полягає у використанні…wp_enqueue_style()和wp_enqueue_script()Функції. Для ресурсів фронтенду їх слід розмістити у відповідних місцях системи.wp_enqueue_scriptsНа дієвих гачках; щодо ресурсів адміністративної панелі – їх монтується туди.admin_enqueue_scriptsНа гаку.

У вашому класі плагіна можна додати наступний метод:

public function enqueue_frontend_assets() {
    wp_enqueue_style( ‘my-plugin-style’, plugin_dir_url( __FILE__ ) . ‘assets/css/style.css’, array(), ‘1.0.0’ );
}

Потім у конструкторі це реалізується шляхом…add_action( ‘wp_enqueue_scripts’, array( $this, ‘enqueue_frontend_assets’ ) );Зареєструйтеся. Це дозволить гарантувати правильне керування залежностями та уникнути конфліктів з іншими плагінами чи темами.

Як очистити дані, які я створив, після того, як користувач видаляє плагін?

WordPress пропонує два основні способи для виконання певних завдань. Перший спосіб – це реєстрація „унітка деінсталяції“ (uninstallation hook), але він рідко використовується у об’єктно-орієнтованих плагінах. Більш рекомендованим та стандартним методuninstall.phpЦей файл знаходиться на тому самому рівні, що й ваш основний плагін.

Коли користувач видаляє плагін через панель керування WordPress, система автоматично перевіряє відповідний файл та виконує необхідні дії.uninstall.phpУ цьому випадку вам спочатку потрібно перевірити…WP_UNINSTALL_PLUGINЧи визначаються константи, а потім безпечно видаляються всі параметри, створені плагіном, а також дані з власних таблиць баз даних тощо? Наприклад:

if ( ! defined( ‘WP_UNINSTALL_PLUGIN’ ) ) {
    exit;
}
delete_option( ‘my_first_plugin_options’ );
// 如果有自定义表：$wpdb->query( “DROP TABLE IF EXISTS {$wpdb->prefix}my_table” );

Як зробити так, щоб мій плагін був сумісним з більшою кількістю версій WordPress?

Ключ до підтримки сумісності полягає у обережному використанні функцій та нововведень нових версій, а також у наданні альтернативних рішень для старих версій програмного забезпечення. Перед викликом функцій, які можуть бути доступні лише у нових версіях,function_exists()Перевірте це. Наприклад, якщо ви хочете використовувати функції, які були додані у версії 5.0…wp_dateФункції можуть:

if ( function_exists( ‘wp_date’ ) ) {
    $date = wp_date( get_option( ‘date_format’ ), $timestamp );
} else {
    $date = date_i18n( get_option( ‘date_format’ ), $timestamp );
}

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