Как создать собственный плагин WordPress с названием WPFix: пошаговое руководство

Создание собственного плагина для WordPress — это важный навык, который позволяет расширять функциональность сайта без зависимости от сторонних разработчиков. В этой статье мы подробно разберём, как создать простой, но функциональный плагин с названием WPFix. Вы узнаете, как правильно оформить структуру файла, написать основной код, добавить активацию и деактивацию, а также как подключить стили и скрипты.

Почему стоит создавать собственный плагин WordPress

Несмотря на огромное количество готовых решений в каталоге плагинов WordPress, иногда возникает необходимость реализовать уникальный функционал, который идеально подходит под задачи вашего сайта. Создание собственного плагина даёт такие преимущества:

Контроль над кодом и поведением функционала;
Лёгкость поддержки и обновления без риска потерять кастомные изменения при обновлении темы или сторонних плагинов;
Возможность переиспользования кода на других проектах;
Улучшение безопасности за счёт минимизации сторонних библиотек и кода.

Кроме того, собственный плагин — это отличная практика для понимания внутреннего устройства WordPress.

Структура плагина WPFix: базовые файлы и папки

Стандартный минимальный плагин WordPress — это один PHP-файл в папке с уникальным именем. Для удобства и поддержки расширяемости рекомендуем использовать следующую структуру:

wpfix/  · wpfix.php  · assets/     · css/         · wpfix-style.css     · js/         · wpfix-script.js  · includes/     · functions.php

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

Основной файл плагина: wpfix.php

В корне папки wpfix создаём файл wpfix.php с обязательным заголовком плагина:

<?php
/**
 * Plugin Name: WPFix
 * Plugin URI: https://wpfix.ru/
 * Description: Пример собственного плагина WPFix для WordPress
 * Version: 1.0.0
 * Author: Ваше Имя
 * Author URI: https://wpfix.ru/
 * License: GPL2
 */

// Защита от прямого запуска
if (!defined('ABSPATH')) {
    exit;
}

// Подключаем функции из includes
require_once plugin_dir_path(__FILE__) . 'includes/functions.php';

// Подключаем стили и скрипты
add_action('wp_enqueue_scripts', 'wpfix_enqueue_assets');

// Функция подключения CSS и JS
function wpfix_enqueue_assets() {
    wp_enqueue_style('wpfix-style', plugin_dir_url(__FILE__) . 'assets/css/wpfix-style.css');
    wp_enqueue_script('wpfix-script', plugin_dir_url(__FILE__) . 'assets/js/wpfix-script.js', array('jquery'), false, true);
}

Этот код задаёт базовую структуру, защищает плагин от запуска вне WordPress, подключает дополнительные функции и ресурсы.

Добавляем функционал: пример простой формы обратной связи

Чтобы продемонстрировать работу плагина, добавим короткий код (шорткод), который выводит форму обратной связи и обрабатывает отправку данных.

Код функции обработки формы и шорткода в includes/functions.php

<?php

function wpfix_contact_form_shortcode() {
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['wpfix_contact_nonce'])) {
        if (!wp_verify_nonce($_POST['wpfix_contact_nonce'], 'wpfix_send_message')) {
            return '<p>Ошибка безопасности. Попробуйте ещё раз.</p>';
        }

        $name = sanitize_text_field($_POST['wpfix_name']);
        $email = sanitize_email($_POST['wpfix_email']);
        $message = sanitize_textarea_field($_POST['wpfix_message']);

        if (!$name || !$email || !$message) {
            return '<p>Пожалуйста, заполните все поля.</p>' . wpfix_get_contact_form_html();
        }

        $to = get_option('admin_email');
        $subject = 'Новое сообщение с сайта WPFix';
        $body = "Имя: $name\nEmail: $email\nСообщение: $message";
        $headers = array('Content-Type: text/plain; charset=UTF-8', "From: $name <$email>");

        $sent = wp_mail($to, $subject, $body, $headers);

        if ($sent) {
            return '<p>Спасибо за ваше сообщение! Мы свяжемся с вами в ближайшее время.</p>';
        } else {
            return '<p>Произошла ошибка при отправке письма. Попробуйте позже.</p>' . wpfix_get_contact_form_html();
        }
    }

    return wpfix_get_contact_form_html();
}

function wpfix_get_contact_form_html() {
    ob_start();
    ?>
    <form method="post" action="" class="wpfix-contact-form">
        <p><label for="wpfix_name">Имя:</label><br>
        <input type="text" id="wpfix_name" name="wpfix_name" required></p>

        <p><label for="wpfix_email">Email:</label><br>
        <input type="email" id="wpfix_email" name="wpfix_email" required></p>

        <p><label for="wpfix_message">Сообщение:</label><br>
        <textarea id="wpfix_message" name="wpfix_message" rows="5" required></textarea></p>

        <p><input type="hidden" name="wpfix_contact_nonce" value="<?php echo wp_create_nonce('wpfix_send_message'); ?>"></p>

        <p><input type="submit" value="Отправить"></p>
    </form>
    <?php
    return ob_get_clean();
}

add_shortcode('wpfix_contact_form', 'wpfix_contact_form_shortcode');

Объяснение кода:

Функция wpfix_contact_form_shortcode обрабатывает POST-запрос, проверяя nonce для безопасности.
Данные из формы проходят очистку с помощью sanitization-функций WordPress.
Если все поля заполнены, отправляется письмо администратору сайта.
При успешной отправке выводится сообщение об успехе, иначе форма отображается с ошибкой.
Шорткод [wpfix_contact_form] можно вставить в любую страницу или запись.

Подключение CSS и JavaScript для улучшения UX

Создадим простой CSS-файл wpfix-style.css для стилизации формы:

.wpfix-contact-form {
    max-width: 400px;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.wpfix-contact-form p {
    margin-bottom: 15px;
}
.wpfix-contact-form input[type="text"],
.wpfix-contact-form input[type="email"],
.wpfix-contact-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.wpfix-contact-form input[type="submit"] {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 3px;
}
.wpfix-contact-form input[type="submit"]:hover {
    background-color: #005177;
}

Для добавления интерактивности можно подключить скрипт wpfix-script.js, например, для валидации или анимаций. Простейший пример:

jQuery(document).ready(function($) {
    $('.wpfix-contact-form').on('submit', function() {
        alert('Форма отправляется...');
    });
});

Регистрация и удаление плагина: хуки активации и деактивации

Чтобы обеспечить корректную работу при активации и деактивации плагина, добавим соответствующие функции и вызовы в wpfix.php:

register_activation_hook(__FILE__, 'wpfix_activation');
register_deactivation_hook(__FILE__, 'wpfix_deactivation');

function wpfix_activation() {
    // Здесь можно создать таблицы в базе данных, задать опции
    add_option('wpfix_contact_form_enabled', true);
}

function wpfix_deactivation() {
    // Очистка опций или временных данных
    delete_option('wpfix_contact_form_enabled');
}

Такой подход помогает управлять жизненным циклом плагина и минимизировать влияние на систему после деактивации.

Советы и лучшие практики при разработке плагинов WordPress

Используйте префиксы для всех функций и переменных, чтобы избежать конфликтов с другими плагинами. В нашем случае это префикс wpfix_.
Обрабатывайте и фильтруйте входящие данные с помощью встроенных функций WordPress (sanitize_text_field, sanitize_email, wp_verify_nonce) для безопасности.
Подключайте ресурсы правильно, используя хуки wp_enqueue_scripts для фронтенда и admin_enqueue_scripts для админки.
Документируйте код, чтобы было понятно, что и как работает.
Тестируйте плагин на разных версиях WordPress и с разными темами/плагинами, чтобы избежать ошибок совместимости.