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

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

Почему стоит создавать собственную форму авторизации

Стандартная форма входа WordPress доступна по адресу wp-login.php и зачастую не вписывается в стиль сайта. Кроме того, для удобства пользователей и контроля процесса авторизации полезно встроить форму входа прямо в страницы сайта, например, в виджет или на страницу "Вход".

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

• Интегрировать авторизацию в дизайн сайта
• Добавить дополнительные поля или функционал
• Упростить процесс входа для пользователей
• Контролировать редиректы после входа

Создаем шорткод для авторизации в WordPress

Ниже приведен пример функции, которая создает шорткод [wpassist_login]. Этот шорткод выводит форму входа, обрабатывает данные и перенаправляет пользователя после успешной авторизации.

function wpassist_custom_login_shortcode() {
    if ( is_user_logged_in() ) {
        return '<p>Вы уже авторизованы.</p>';
    }

    $redirect = isset($_GET['redirect_to']) ? esc_url_raw($_GET['redirect_to']) : home_url();

    if ( $_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['wpassist_login_nonce']) && wp_verify_nonce($_POST['wpassist_login_nonce'], 'wpassist_login_action') ) {
        $creds = array();
        $creds['user_login'] = sanitize_user($_POST['log']);
        $creds['user_password'] = $_POST['pwd'];
        $creds['remember'] = isset($_POST['rememberme']);
        $user = wp_signon( $creds, false );

        if ( is_wp_error($user) ) {
            $error_message = $user->get_error_message();
            return '<p class="wpassist-login-error">' . esc_html($error_message) . '</p>' . wpassist_login_form($redirect);
        } else {
            wp_safe_redirect($redirect);
            exit;
        }
    }

    return wpassist_login_form($redirect);
}

function wpassist_login_form($redirect) {
    ob_start();
    ?>
    <form method="post" action="" class="wpassist-login-form">
        <p><label for="log">Логин</label><br>
        <input type="text" name="log" id="log" required /></p>

        <p><label for="pwd">Пароль</label><br>
        <input type="password" name="pwd" id="pwd" required /></p>

        <p><label><input name="rememberme" type="checkbox" value="forever" /> Запомнить меня</label></p>

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

        <p><input type="submit" value="Войти" /></p>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('wpassist_login', 'wpassist_custom_login_shortcode');

Данный код регистрирует шорткод, который выводит форму и обрабатывает логин. Если данные неверны, выводится ошибка, если правильны — пользователь перенаправляется на нужную страницу.

Добавляем улучшения и безопасность

Используем nonce для защиты от CSRF

В примере выше мы применили wp_create_nonce и wp_verify_nonce для защиты формы от межсайтовой подделки запросов (CSRF). Это обязательная мера безопасности при работе с формами.

Обработка ошибок и уведомлений

Для удобства пользователей важно выводить понятные сообщения об ошибках. Функция get_error_message объекта WP_Error помогает получить текст ошибки. Можно дополнительно стилизовать вывод ошибок через CSS.

Редиректы после входа

По умолчанию после успешного входа пользователя перенаправляют на главную страницу сайта. Чтобы сделать это динамично, мы используем параметр redirect_to в URL, который передаем в форму. Это позволяет направлять пользователя, например, обратно на страницу, с которой он пытался зайти.

Пример использования с плагином Clearfy Pro

Если на сайте установлен плагин Clearfy Pro, можно дополнительно включить опции по защите входа и оптимизации безопасности авторизации, например, ограничение количества попыток входа, капчу и другие функции безопасности.

Как вывести шорткод на странице

Чтобы вывести форму авторизации, достаточно вставить в содержимое страницы или виджета следующий шорткод:

[wpassist_login]

Если нужно указать страницу для редиректа после входа, добавьте параметр redirect_to в ссылку, например:

https://example.com/login?redirect_to=https%3A%2F%2Fexample.com%2Fprofile

Заключение

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

Обязательно используйте nonce для безопасности и обрабатывайте ошибки, чтобы пользователям было понятно, что происходит при входе. При необходимости расширяйте функционал, например, добавляя капчу или интеграцию с плагинами безопасности.