Як створити кастомну сторінку реєстрації 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` вашої теми!

 

Висновок: Повний контроль над користувацьким досвідом