Существует множество различных способов создания собственной страницы входа и регистрации в WordPress. Однако многие из этих методов чрезмерно продуманы или настолько стилизованы или сложны, что не особо хочется с ними разбираться.
В этой статье вы найдете простые и самые основные инструменты, необходимые для создания собственной (пользовательской) страницы входа в WordPress и страницы регистрации.
Для этого вам понадобятся 2 ключевые функции WordPress:
1. wp_signon() - аутентифицирует пользователя с возможностью запоминания учетных данных.
2. wp_create_user() - добавляет нового пользователя в базу данных WordPress.
Примечание: эта статья не содержит информации о стилизации страницы входа. Скорей всего, у вас уже есть стиль или дизайн или вы находитесь в процессе его создания.
Рассмотрим пошаговую систему создания собственную страницу регистрации/входа пользователя WordPress без плагина.
Шаг 1. Создайте новую страницу-шаблон с именем login.php
В этом файле вам нужно обработать переменные, приходящие из формы, которая подразумевает ввод логина и пароля пользователя, уже зарегистрированного на вашем сайте.
Поскольку в любом шаблоне нам нужно использовать такую функцию, как get_header() для подключения всех нужных тегов в верхней части страницы, а также шапки сайта с меню и другими данными, то ее необходимо вызвать в верхней части шаблона. Однако при этом происходит отправка заголовков, которые мы будем переопределять в нашем коде при наличии ошибки в имени пользователя или пароле с помощью header("Location: " . home_url() . "/login?error=true");
Поэтому обработку данных формы будем проводить ДО вызова функции get_header().
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <?php /* Template Name: Login */ if($_POST) { global $wpdb; //Проверяем все поля ввода перед запросом SQL $username = $wpdb->escape($_REQUEST['username']); $password = $wpdb->escape($_REQUEST['password']); $remember = $wpdb->escape($_REQUEST['rememberme']); if($remember) $remember = "true"; else $remember = "false"; $login_data = array(); $login_data['user_login'] = $username; $login_data['user_password'] = $password; $login_data['remember'] = $remember; $user_verify = wp_signon( $login_data, false ); if ( is_wp_error($user_verify) ){ //Передаем параметр error для использования его потом в скрипте header("Location: " . home_url() . "/login?error=true"); } else { echo "<script>window.location='". home_url() ."'</script>"; exit(); } } get_header(); ?> <p id="message">Введите данные для входа на сайт</p> <form id="login" name="form" action="<?php echo home_url(); ?>/login/" method="post"> <p> <input id="username" type="text" placeholder="Логин" name="username"> </p> <p> <input id="password" type="password" placeholder="Пароль" name="password"> </p> <input id="submit" type="submit" name="submit" value="Отправить"> </form> <p><a href="<?= home_url(); ?>/lost-password/">Забыли пароль</a></p> <script> let message = document.getElementById('message'); if(location.search.indexOf('error')>-1){ message.innerHTML='Неверные учетные данные'; message.innerHTML+='<br>Введите заново или перейдите на страницу <a href="<?php echo home_url(); ?>/register">регистрации</a>'; } </script> <?php get_footer(); ?> |
После того, как шаблон страницы login.php создан, нужно создать новую страницу, которая использует этот шаблон «Login», и назвать ее «Вход на сайт». Для нее важно задать ссылку login. Конечно, вы можете называть ее как хотите, но в этой статье жестко указаны ссылки на URL-адрес страницы: yourwebsite.com/login/.
Поэтому вам необходимо убедиться, что постоянная ссылка вашей страницы соответствует этому условию или изменить URL-адреса в коде таким образом, чтобы они соответствовали URL-адресу вашей новой страницы «Вход на сайт».
Имеет смысл добавить эту страницу, как пункт основного или вспомогательного меню, если вы разрешили регистрацию на своем сайте. Но иначе зачем бы вам читать эту статью?
В том случае, если пользователь ввел неверные данные при входе на сайт, ему с помощью скрипта будет выведено сообщение об этом и предложение перейти на страницу регистрации, которую мы создадим ниже:
Обратите внимание:
Для того чтобы встроить эти формы в ваш шаблон, вам нужно будет изменить форматирование, добавив теги до и после форм.
Шаг 2 - Перенаправления
Если вы перейдете на новую страницу входа, то она уже должна позволить вам успешно войти в систему.
Однако вы, скорей всего, захотите перенаправить любого, кто пытается использовать стандартные страницы входа в WordPress, на вашу новую пользовательскую страницу входа, например, с адреса http://yoursite.com/wp-login.php. Для этого вставьте код, приведенный ниже, в файл functions.php вашей темы:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | // Перенаправление со страниц входа, например, с http://yoursite.com/wp-login.php function custom_login() { echo header("Location: " . get_bloginfo( 'url' ) . "/login"); } add_action('login_head', 'custom_login'); function login_link_url( $url ) { $url = get_bloginfo( 'url' ) . "/login"; return $url; } add_filter( 'login_url', 'login_link_url', 10, 2 ); |
Шаг 3 - Создаем страницу регистрации
Нам нужно повторить процесс для страницы регистрации нового пользователя - создаем файл register.php, который будет также шаблоном, но для страницы регистрации. Для нее нужно выбрать шаблон с именем Register и ввести ссылку register (http://yoursite.com/register):
Код для этой страницы таков:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | <?php /* Template Name: Register */ require_once(ABSPATH . WPINC . '/registration.php'); global $wpdb, $user_ID; //Проверяем, вошел ли уже пользователь в систему if ($user_ID) { //Залогиненного пользователя перенаправляем на главную страницу. header( 'Location:' . home_url() ); } else { $errors = array(); if( $_POST ) { //Убедитесь, что имя пользователя присутствует и еще не используется $username = $wpdb->escape($_REQUEST['username']); if ( strpos($username, ' ') !== false ) { $errors['username'] = "Извините, в именах пользователей нельзя использовать пробелы"; } //если поле с именем пользователя пустое if(empty($username)) { $errors['username'] = "Пожалуйста введите имя пользователя"; } elseif( username_exists( $username ) ) { //если такой пользователь уже зарегистрирован $errors['username'] = "Имя пользователя уже существует, попробуйте другое"; } // Проверяем, есть ли email и действителен ли он $email = $wpdb->escape($_REQUEST['email']); if( !is_email( $email ) ) { $errors['email'] = "Пожалуйста, введите действительный email"; } elseif( email_exists( $email ) ) { $errors['email'] = "Такой email уже зарегистрирован"; } // Проверка пароля на валидность if(0 === preg_match("/.{6,}/", $_POST['password'])){ $errors['password'] = "Пароль должен состоять не менее, чем из шести символов."; } // Проверка повторного ввода пароля if(0 !== strcmp($_POST['password'], $_POST['password_confirmation'])){ $errors['password_confirmation'] = "Пароли не совпадают"; } // Проверить согласие с условиями обслуживания if($_POST['terms'] != "Yes"){ $errors['terms'] = "Вы должны согласиться с Условиями использования"; } // если ошибок нет if(0 === count($errors)) { $password = $_POST['password']; $new_user_id = wp_create_user( $username, $password, $email ); // Здесь вы можете делать все, что угодно, например, отправлять электронное письмо пользователю и т. д. $success = 1; header( 'Location:' . get_bloginfo('url') . '/login/?success=1&u=' . $username ); } else { $message = 'Есть ошибки в заполнении формы'; } } } ?> <?php get_header(); ?> <p id="message"><?= isset( $message ) ? $message : '' ?></p> <form id="wp_signup_form" action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post" style="max-width: 500px"> <p> <label for="username">Имя пользователя</label> <input type="text" name="username" id="username" value="<?= isset( $_REQUEST['username'] ) ? $_REQUEST['username'] : '' ?>"> <span class="error"><?= isset( $errors['username'] ) ? $errors['username'] : '' ?></span> </p> <p> <label for="email">Email</label> <input type="text" name="email" id="email" value="<?= isset( $_REQUEST['email'] ) ? $_REQUEST['email'] : '' ?>"> <span class="error"><?= isset( $errors['email'] ) ? $errors['email'] : '' ?></span> </p> <p> <label for="password">Пароль</label> <input type="password" name="password" id="password" value="<?= isset( $_REQUEST['password'] ) ? $_REQUEST['password'] : '' ?>"> <span class="error"><?= isset( $errors['password'] ) ? $errors['password'] : '' ?></span> </p> <p> <label for="password_confirmation">Повторите пароль</label> <input type="password" name="password_confirmation" id="password_confirmation" value="<?= isset( $_REQUEST['password_confirmation'] ) ? $_REQUEST['password_confirmation'] : '' ?>"> <span class="error"><?= isset( $errors['password_confirmation'] ) ? $errors['password_confirmation'] : '' ?></span> </p> <p> <input name="terms" id="terms" type="checkbox" value="Yes"> <label for="terms">Я согласен(-на) с условиями предоставления услуг</label><br> <span class="error"><?= isset( $errors['terms'] ) ? $errors['terms'] : '' ?></span> </p> <input type="submit" id="submitbtn" name="submit" value="Зарегистрироваться" /> </form> <?php get_footer(); ?> |
Здесь мы проверяем все поля формы на соответствие определенным критериям.
Эта проверка будет простой. В ней мы создаем массив ошибок $errors, а затем проверяем количество элементов в нем. Если поля формы будут заполнены неверно, массив не будет пустым, а в <span class="error"></span>, который есть после каждого поля, будет выведена ошибка.
Пользователь будет зарегистрирован на вашем WordPress-сайте только в том случае, если массив ошибок пуст.
Вы можете использовать отслеживание всех ошибок либо сократить их количество в зависимости от ваших требований.
Перенаправления на страницу регистрации в functions.php
И снова мы добавляем некоторые перенаправления в наш файл functions.php, чтобы полностью скрыть стандартную страницу регистрации WordPress:
| 1 2 3 4 5 6 7 8 9 10 11 | function register_link_url( $url ) { if ( ! is_user_logged_in() ) { if ( get_option('users_can_register') ) $url = '<li><a href="' . get_bloginfo( 'url' ) . "/register" . '">' . __('Register', 'yourtheme') . '</a></li>'; else $url = ''; } else { $url = '<li><a href="' . admin_url() . '">' . __('Site Admin', 'yourtheme') . '</a></li>'; } return $url; } add_filter( 'register', 'register_link_url', 10, 2 ); |
Опять же, наш скрипт регистрации предполагает, что страница регистрации находится по адресу yourwebsite.com/register/. Кроме того, перейдет пользователь на эту страницу только в том случае, если еще не выполнен вход на сайт. То есть вы как администратор, залогиненный на своем сайте, не сможете зарегистрировать пользователя, если не выйдете из своего аккаунта.
Теперь у вас есть страницы входа и регистрации, которые можно настроить так, как вы хотите.
Итого
Теперь вы можете отказаться от стандартных страниц входа и регистрации WordPress для вашего сайта. Эта реализация может быть доработана с помощью настраиваемых ссылок для выхода из системы и правильного метода работы с забытыми паролями.
По мотивам статьи Create a simple custom WordPress login and sign up without plugins
Очень крутая статья, спасибо большое. Только вот вопрос, когда пользователь вошел в аккаунт на странице login, его перебрасывает на главную страницу, но потом пользователь все равно сможет зайти на страницу login и у него будет опять видна форма входа в аккаунт, что нужно дописать чтобы пользователю был заблокирован вход на эту страницу, если он уже в аккаунте и чтобы срабатывал допустим редирект на личный кабинет пользователя, за ранее спасибо !
Привет! Да, ошибки не выводит. Может статью подправит админ? Надо. Статья то правда полезная
Статья исправлена, код несколько видоизменен, добавлены скриншоты.
Проверено для WordPress 5.9
Здравствуйте, сделал всё по инструкции, всё работает, за исключением одного но, ошибки при регистрации новых пользователей не отображаться, как исправить данную проблему, подскажите пожалуйста!
Ошибку вызывали перенаправления с помощью заголовков типа
header("Location: " . home_url() . "/login?error=true");.Это происходило из-за того, что вы наверняка вставляли форму после вызова функции get_header(), когда заголовки уже были посланы на сервер.
Спасибо, за пример кода!
Подскажите пожалуйста, как этому научиться, где брать справочный материал чтобы вот так собрать форму, за ранее оч спасибо !!! )
Сложный вопрос. Чтобы научиться чему-то, во-первых, нужно желание, во-вторых, нужно начать что-то делать, в-третьих, у вас должна быть готовность пробовать разные варианты, отслеживать и редактировать ошибки. Что касается WordPress, то вашим любимым сайтом, скорей всего, станет https://wp-kama.ru/, т.к. на нем представлены переводы функций из Кодекса WordPress, а также любые сайты, посвященные WP, в том числе и на английском языке.
Спасибо! То, что нужно.