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

Ах, да, страница входа в WordPress — одна из самых узнаваемых страниц в WordPress — не так ли?

Но в то же время наличие этой страницы на вашем сайте WordPress в форме по умолчанию — не всегда лучшая идея.

Почему? - ты спрашиваешь.

Вот ответ:

Зачем вам нужна пользовательская страница входа в WordPress?

Проблема тройная:

1. Трафик . Чем больше трафика вы получаете, тем больше «плохого» трафика вы получаете в результате. Под плохим трафиком я подразумеваю вредоносные скрипты и боты, спамеров и разного рода пользователей, заходящих на ваш сайт с плохими намерениями. Настройка страницы входа в WordPress может сделать ваш сайт более безопасным.
2. Многопользовательский сайт . Если вашим сайтом управляют несколько человек — будь то администраторы или авторы/блогеры — будет происходить несколько входов в систему. Предоставление пользовательской формы входа сделает процесс в целом более приятным.
3. Брендинг . Страница входа по умолчанию хороша, но прямо посередине есть большой логотип WordPress. Переключите это и сделайте страницу входа более похожей на вашу собственную, это может стать приятным фирменным штрихом. Это особенно актуально, если вы создаете веб-сайт для клиента. Предоставление вашему клиенту последовательного опыта, безусловно, то, что они оценят.

Если что-то из вышеперечисленного кажется вам убедительным, вам следует подумать о том, чтобы изменить страницу входа на пользовательскую. Вот как:

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

Есть два основных способа сделать это:

• ручной способ,
• способ плагина .

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

Давайте рассмотрим оба.

Создание пользовательской страницы входа вручную

Хотя это требует от вас настройки некоторых исходных файлов вашей темы, в этом нет ничего сложного. Я собираюсь использовать Twenty Fifteen в качестве примера.

Самое интересное начинается с создания копии файла page.php и файла content-page.php .

Переименуйте эти новые копии в page-login.php и content-login.php соответственно.

Откройте page-login.php и измените всего одну строку. Из этого:

 get_template_part( 'content', 'page' );

К этому:

 get_template_part( 'content', 'login' );

Теперь давайте отредактируем content-login.php и добавим одну строку прямо под <?php the_content(); ?> <?php the_content(); ?> . Вот так:

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

Примечание. На этом этапе вы можете выполнить ряд других настроек, если хотите (например, настроить дизайн/макет, удалить боковую панель), но все это необязательно. Изменение только этих двух строк сделает работу, если вы собираетесь использовать чрезвычайно минимальный подход к своей новой странице входа в WordPress.

Теперь давайте создадим новую страницу в wp-admin и назовем ее просто «login». Убедитесь, что постоянная ссылка также «логин»:

Это гарантирует, что WordPress автоматически использует файл шаблона page-login.php .

Если вы посетите свою новую страницу прямо сейчас, она должна выглядеть примерно так:

На этом этапе осталось только установить перенаправления, чтобы в конечном итоге исключить страницу входа в WordPress по умолчанию. Сделайте это, поместив эти строки в конец вашего файла functions.php :

 /* Main redirection of the default login page */ function redirect_login_page() { $login_page = home_url('/login/'); $page_viewed = basename($_SERVER['REQUEST_URI']); if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); /* Where to go if a login failed */ function custom_login_failed() { $login_page = home_url('/login/'); wp_redirect($login_page . '?login=failed'); exit; } add_action('wp_login_failed', 'custom_login_failed'); /* Where to go if any of the fields were empty */ function verify_user_pass($user, $username, $password) { $login_page = home_url('/login/'); if($username == "" || $password == "") { wp_redirect($login_page . "?login=empty"); exit; } } add_filter('authenticate', 'verify_user_pass', 1, 3); /* What to do on logout */ function logout_redirect() { $login_page = home_url('/login/'); wp_redirect($login_page . "?login=false"); exit; } add_action('wp_logout','logout_redirect');

(Фрагменты кода, созданные на основе: [1][2].)

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

Создание пользовательской страницы входа в WordPress с помощью плагина

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

Во-первых, плагин, который мы будем использовать: Custom Login Page Customizer.

После его установки и активации просто перейдите в « Внешний вид» > «Настройщик входа », где вы можете запустить панель настройщика.

Параметры этого плагина довольно хороши, и они позволяют вам настраивать такие вещи, как:

• Установите логотип, который будет отображаться вместо стандартного логотипа WordPress.
• Установите фон для всей страницы входа.
• Установите фон для самой формы.
• Настройте стиль формы и каждую мелочь в ней (шрифты, размеры, цвета, поля).
• Установите надстройку безопасности, чтобы получить дополнительное поле капчи в форме (отлично подходит для предотвращения спам-логинов / ботов).

Например, всего пара минут работы с плагином и я получил вот такой результат:

Другой вариант плагина

Еще один плагин для пользовательской страницы входа, на который стоит обратить внимание: Login Designer. Этот плагин призван упростить настройку страницы входа в WordPress, при этом предоставляя вам гибкость в дизайне.

Один из способов добиться простоты использования — сделать процесс настройки привычным. Все параметры и инструменты интегрированы прямо в настройщик WordPress. Так что, если вы привыкли использовать Customizer для изменения параметров темы, вы будете чувствовать себя как дома.

Посмотрите это видео, чтобы узнать, как работает плагин.

Вручную или через плагин ?

Каков ваш метод выбора? Вы предпочитаете кодировать вещи вручную или все обрабатывается плагином? Не стесняйтесь поделиться.