Как создать кастомную страницу регистрации WordPress — без плагинов

Когда вы устанавливаете WordPress, он любезно предоставляет вам стандартную страницу регистрации по адресу wp-login.php?action=register. Она функциональна, но, согласитесь, выглядит немного скучно и совершенно не вписывается в брендинг вашего сайта. Это как входная дверь в ваш офис, которая ведет не в стильный холл, а в серый технический коридор.

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

 

Зачем это вообще нужно?

Прежде чем мы погрузимся в код, давайте я кратко объясню, какие преимущества мы получим:

• ✨ Полное соответствие бренду: Страница будет выглядеть как неотъемлемая часть вашего сайта, а не как нечто инородное.
• 👤 Лучший User Experience: Вы можете разместить форму на любой странице, добавить пояснительный текст, ссылки на политику конфиденциальности и т.д.
• 🛡️ Повышение безопасности: Сокрытие стандартного URL-адреса регистрации может усложнить жизнь ботам, которые пытаются спамить ваш сайт. Это положительно влияет и на общее техническое SEO.
• ⚙️ Гибкость: Этот метод является основой для дальнейших модификаций, например, добавления кастомных полей (телефон, выбор роли и т.д.).

 

Шаг за шагом: от идеи до реализации

Наш план прост, но требует внимательности. Мы создадим кастомный шаблон страницы, разместим на нем нашу форму, напишем PHP-функцию для обработки данных и, напоследок, добавим немного CSS-магии.

 

Шаг 1: Создание шаблона страницы

Для начала нам нужен специальный «макет» для нашей страницы. Для этого в папке вашей активной темы (/wp-content/themes/{ВАША-ТЕМА}/) создайте новый файл с названием, например, page-register.php.

Откройте этот файл и добавьте в самом начале следующий код. Это сообщит WordPress, что это шаблон страницы:

<?php
/*
Template Name: Custom Register Page
*/?>

Теперь скопируйте содержимое вашего файла page.php (стандартный шаблон страниц) в наш новый page-register.php. Это даст нам базовую структуру с хедером и футером вашего сайта.

 

Шаг 2: Создание самой страницы в WordPress

Теперь зайдите в админ-панель WordPress, создайте новую страницу (назовите ее, например, «Регистрация«), и в боковой панели «Атрибуты страницы» выберите наш новый шаблон «Custom Register Page«. Опубликуйте страницу.

 

Шаг 3: PHP-логика для обработки формы

Это сердце нашей системы. Этот код нужно добавить в файл functions.php вашей темы. Он будет проверять данные, создавать нового пользователя и показывать сообщения об успехе или ошибке.

function custom_registration_function() {
    if (isset($_POST['submit'])) {
        $username = sanitize_user($_POST['username']);
        $email = sanitize_email($_POST['email']);
        $password = esc_attr($_POST['password']);
        // Валидация данных
 if (username_exists($username) || email_exists($email)) {
            return new WP_Error('username_email_exists', 'Этот логин и/или email уже заняты, попробуйте другие данные.');
        }
        if (!is_email($email)) {
             return new WP_Error('invalid_email', 'Пожалуйста, введите корректный email-адрес.');
        }
        if (strlen($password) < 5) {
            return new WP_Error('password_too_short', 'Пароль должен быть не менее 5 символов.');
        }
        // Создание пользователя
        $user_id = wp_create_user($username, $password, $email);
        if (!is_wp_error($user_id)) {
            // Успех! Можно автоматически авторизовать или просто показать сообщение.
            return 'success';
        } else {
            return $user_id; // Возвращаем обьект ошибки
        }
    }
    return false;
}
// Шорткод для вывода формы и обработки логики
function custom_registration_shortcode() {
    $registration_result = custom_registration_function();    
    ob_start(); // Начинаем буферизацию вывода
    // Показываем сообщения об ошибках или успехе
    if (is_wp_error($registration_result)) {
        echo '<p class="error-message">' . $registration_result->get_error_message() . '</p>';
    } elseif ($registration_result === 'success') {
        echo '<p class="success-message">Регистрация прошла успешно! Теперь вы можете войти.</p>';
        return ob_get_clean(); // Возвращаем буфер и завершаем, если успех
    }
    // HTML-форма
    ?>
    <form action="<?php echo esc_url(get_permalink()); ?>" method="post">
        <div class="form-field">
            <label for="username">Логин</label>
            <input type="text" name="username" id="username" required>
        </div>
        <div class="form-field">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" required>
        </div>
        <div class="form-field">
            <label for="password">Пароль</label>
            <input type="password" name="password" id="password" required>
        </div>
        <div class="form-field">
            <input type="submit" name="submit" value="Зарегистрироваться">
        </div>
    </form>
    <?php    
    return ob_get_clean(); // Возвращаем содержимое буфера
}
add_shortcode('custom_register_form', 'custom_registration_shortcode');

Теперь просто добавьте шорткод [custom_register_form] в редакторе на вашей странице «Регистрация«.

 

Шаг 4: Кастомизация CSS

Наша форма работает, но выглядит просто. Давайте добавим немного стиля. Этот CSS-код можно добавить в файл style.css вашей темы или в раздел «Дополнительные CSS» в кастомайзере WordPress.

 

Бонус: Стилизуем страницу входа wp-login.php

Даже с кастомной страницей регистрации, ваши пользователи будут видеть стандартную страницу входа. Давайте приведем и ее в порядок! Добавьте этот код в ваш functions.php:

function custom_login_styles() {
    echo '<style type="text/css">
        body.login div#login h1 a {
            background-image: url(' . get_stylesheet_directory_uri() . '/images/your-logo.png); /* Замените на путь к вашему логотипу */            width: 200px; /* Ширина логотипа */            height: 100px; /* Высота логотипа */            background-size: contain;
            background-position: center;
        }
        body.login {
            background-color: #f0f2f5; /* Измените цвет фона */        }
        #loginform {
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
    </style>';
}
add_action('login_enqueue_scripts', 'custom_login_styles');

Не забудьте загрузить ваш логотип в папку `images` вашей темы!

 

Вывод: Полный контроль над пользовательским опытом