Как создать свой плагин для изменения формы входа в WordPress

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

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

Многие решают задачу изменения формы входа с помощью редактирования файлов темы или использования готовых плагинов. Но эти методы имеют ограничения:

• Редактирование темы — приводит к потере изменений при обновлении темы, а также усложняет перенос настроек между разными сайтами.
• Готовые плагины — могут не удовлетворять уникальным требованиям, содержать лишний функционал и замедлять сайт.
• Собственный плагин — позволяет реализовать только нужный функционал, легко обновлять и переносить, а также контролировать качество и безопасность кода.

Поэтому создание собственного плагина — надежный и гибкий подход.

Основы создания плагина для кастомизации формы входа

Для начала создадим структуру плагина. В директории wp-content/plugins/ создайте папку wplogin-custom-login. Внутри создайте файл wplogin-custom-login.php с базовым описанием плагина:

<?php
/**
 * Plugin Name: WPLogin Custom Login
 * Description: Кастомизация формы входа WordPress через собственный плагин
 * Version: 1.0
 * Author: WPLogin.ru
 */

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

Теперь подключим хуки для изменения формы входа. Самый простой способ — использовать фильтр login_enqueue_scripts для подключения своих стилей и скриптов, а также хук login_form для изменения HTML формы.

Подключение кастомных стилей и скриптов

Добавим функцию для подключения CSS:

function wplogin_enqueue_custom_styles() {
    wp_enqueue_style('wplogin-custom-login-style', plugin_dir_url(__FILE__) . 'css/custom-login.css');
}
add_action('login_enqueue_scripts', 'wplogin_enqueue_custom_styles');

Создайте файл css/custom-login.css в папке плагина и добавьте туда стили, например:

body.login {
    background-color: #f0f0f0;
}

#loginform {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    padding: 30px;
}

Эти стили изменят фон страницы входа и придадут форме современный вид.

Изменение HTML формы входа

Чтобы добавить дополнительные поля или изменить структуру формы, используйте хук login_form:

function wplogin_add_custom_field() {
    ?>
    <p>
        <label for="wplogin_custom_field">Ваш код доступа</label>
        <input type="text" name="wplogin_custom_field" id="wplogin_custom_field" class="input" value="" size="20" />
    </p>
    <?php
}
add_action('login_form', 'wplogin_add_custom_field');

В этом примере мы добавили дополнительное текстовое поле «Ваш код доступа».

Обработка дополнительных данных при входе

Чтобы обработать дополнительное поле, нужно проверить его значение и, при необходимости, остановить вход с ошибкой. Для этого используем хук authenticate:

function wplogin_authenticate_custom_field($user, $username, $password) {
    if (isset($_POST['wplogin_custom_field'])) {
        $custom_code = sanitize_text_field($_POST['wplogin_custom_field']);

        if ($custom_code !== '12345') { // Пример простой проверки
            return new WP_Error('authentication_failed', __('<strong>Ошибка</strong>: неверный код доступа.'));
        }
    } else {
        return new WP_Error('authentication_failed', __('<strong>Ошибка</strong>: код доступа обязателен.'));
    }

    return $user;
}
add_filter('authenticate', 'wplogin_authenticate_custom_field', 30, 3);

Здесь мы проверяем, что пользователь ввел правильный код доступа, и если нет — блокируем вход с сообщением об ошибке.

Дополнительные возможности плагина для формы входа

Изменение логотипа на странице входа

Часто требуется заменить стандартный логотип WordPress на свой. Это делается через CSS и хук login_enqueue_scripts:

function wplogin_custom_login_logo() {
    ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url('<?php echo plugin_dir_url(__FILE__) . 'images/custom-logo.png'; ?>');
            width: 320px;
            height: 65px;
            background-size: contain;
            background-repeat: no-repeat;
        }
    </style>
    <?php
}
add_action('login_enqueue_scripts', 'wplogin_custom_login_logo');

Загрузите свой логотип в папку images вашего плагина.

Кастомный редирект после успешного входа

По умолчанию WordPress перенаправляет пользователя в админку. Можно изменить это, задействовав фильтр login_redirect:

function wplogin_custom_login_redirect($redirect_to, $request, $user) {
    if (isset($user->roles) && is_array($user->roles)) {
        if (in_array('administrator', $user->roles)) {
            return admin_url();
        } else {
            return home_url('/dashboard');
        }
    }
    return $redirect_to;
}
add_filter('login_redirect', 'wplogin_custom_login_redirect', 10, 3);

В этом примере администраторы идут в админку, а остальные пользователи — на страницу /dashboard.

Рекомендации по безопасности и поддержке плагина

Создавая свой плагин для формы входа, не забывайте:

• Всегда использовать функции очистки данных: sanitize_text_field, esc_html и т.п.
• Использовать nonce для защиты форм от CSRF, если добавляете сложные поля.
• Тестировать плагин на разных версиях WordPress и с разными темами.
• Делать резервные копии сайта перед установкой и обновлением плагина.

Заключение

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