Оформляем страницу авторизации WordPress на свой вкус

Введение. шаблоны:

Настройки, формы входа и произвольные поля – все это нам известно. В этом разделе мы обсудим, как организованы шаблоны, в том числе какие хуки и фильтры где применяются. Другие хуки также применимы к формам WP-Recall, поскольку они часто задают вопросы на форуме.

Шаблоны напоминания пароля, входа и регистрации можно найти по адресу:ваш/сайт/wpcontent/plugins/temples.

Форма для регистрации располагалась в архиве:form-register.php

Recall/templates в папке по адресу your-site/wp-content и внесите свои собственные изменения оттуда. Изменения не будут перезаписаны, если вы скопируете их сюда.

Все шаблоны WP-Recall доступны на данной странице.

Что вам понадобится для выполнения этого руководства

Для завершения этого урока вам понадобятся:

Почему пользовательская форма входа в wordpress полезна для вашего сайта

Если у вас есть сайт WordPress, вы наверняка знакомы с формой входа wpad. Несмотря на то, что она полностью функциональна, она выглядит неприукрашенной. LIO является примером А.

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

Основные преимущества изменения формы входа WordPress

1. Повышенная безопасность. Вы можете защитить свою страницу входа в систему, перенаправив форму входа в систему на уникальный URL, что затруднит хакерам поиск вашей страницы входа в систему. Вы также можете установить ограничение на количество раз, которое человек может войти в систему, или даже добавить многофакторную аутентификацию.
2. Постоянство бренда. Распространение брендинга на форму входа позволяет поддерживать согласованность с остальной частью сайта, чтобы пользователи и члены команды получали постоянный опыт. Кроме того, добавление аккаунтов социальных сетей в WordPress еще больше облегчает вашим читателям или членам клуба возможность подключаться и делиться вашим контентом.
3. Расширенная навигация. Вы можете использовать форму входа в систему для предоставления конечным пользователям дополнительной навигации. Можно связать с профилями социальных сетей или даже отобразить специальные предложения прямо на экране входа в систему.
4. Улучшенный пользовательский интерфейс. Вы можете настроить форму входа, чтобы конечные пользователи переходили на выбранную вами страницу, например, на страницу профиля или специальных объявлений, или вы можете создать собственные сообщения.

С помощью этих преимуществ вы можете настроить форму входа, которую вы видите при входе в систему. Но, как и во всем остальном, первое – самое важное. Первое, что нужно учитывать, принимая решение о внесении каких-либо изменений, – это безопасность, и в данном случае простые настройки могут значительно повысить ее.

WordPress форма входа. как изменить форму входа wordpress. | vhod-v-lichnyj-kabinet.ru

<?php if(!is_user_logged_in()) { ?>

<form action="<?php echo wp_login_url(get_permalink()); ?>" method="post">

<label for="log">Имя пользователя<br/><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="22" /></label><br />

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

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

<input type="submit" name="submit" value=" Вход " />

</form>

<?php } ?>

<?php if (!(current_user_can('level_0'))){ ?>

<h3>Вход</h3>

<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">

<p><label for="log">Имя</label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" /> </p>

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

<p><input type="submit" name="submit" value="Войти" /></p>

<p>

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

<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />

</p>

</form>

<a href="<?php echo get_option('home'); ?>/wp-register.php">Регистрация</a>

<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Восстановить пароль</a>

<?php } else { ?>

<ul>

<li><a href="<?php echo get_option('home'); ?>/wp-admin/">Консоль</a></li>

<li><a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php">Написать новый пост</a></li>

<li><a href="<?php echo get_option('home'); ?>/wp-admin/page-new.php">Создать страницу</a></li>

<li><a href="<?php echo get_option('home'); ?>/wp-login.php?action=logout&redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Выйти</a></li>

</ul>

<?php }?>

<?php if (!(current_user_can('level_0'))){ ?>

<h3>Вход</h3>

<form action="<?php echo get_option('home'); ?>/wp-login.php" method="post">

<p><label for="log">Имя</label><input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="20" /> </p>

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

<p><input type="submit" name="submit" value="Войти" /></p>

<p>

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

<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />

</p>

</form>

<a href="<?php echo get_option('home'); ?>/wp-register.php">Регистрация</a>

<a href="<?php echo get_option('home'); ?>/wp-login.php?action=lostpassword">Восстановить пароль</a>

<?php } else { ?>

<ul>

<li><a href="<?php echo get_option('home'); ?>/wp-admin/">Консоль</a></li>

<li><a href="<?php echo get_option('home'); ?>/wp-admin/post-new.php">Написать новый пост</a></li>

<li><a href="<?php echo get_option('home'); ?>/wp-admin/page-new.php">Создать страницу</a></li>

<li><a href="<?php echo get_option('home'); ?>/wp-login.php?action=logout&redirect_to=<?php echo urlencode($_SERVER['REQUEST_URI']) ?>">Выйти</a></li>

</ul>

<?php }?>

Вставим фоновую картинку в всплывающую форму:

Для стилизации формы впишем стили:

Добавим бекграунд к всплывающей форме. два варианта анимации!:

Этот подход был использован в дополнении Christmas Time. В этом примере я покажу, как выполнить его самостоятельно. Примеры нужно будет прикрепить к оверлею, потому что вставленные нами числа будут только стилями.

Пример 1Пример 2

Добавим логотип и надпись к форме входа (и к остальным):

.

Если включено подтверждение регистрации. e-mail не подтвержден. провал проверки:

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

Если включено подтверждение регистрации. покажем в форме свое сообщение: пользователь успешно подтвердил регистрацию:

Мы покажем вам свое сообщение:

Изменим сообщение в форме при регистрации:

Если в одобрении регистрации будет отказано. Мы ценим вашу регистрацию!

Используйте свой собственный код

Если вы опытный пользователь, которому нравится работать с PHP и HTML, вы можете сделать это без установки дополнительных плагинов.

Мы не советуем неопытным пользователям использовать этот метод. Однако, если вам нравится писать код, вот некоторые настройки программы для вас.

Если вы хотите добавить эти фрагменты кода, вы можете сделать это в файле functions.php дочерней темы или с помощью плагина Code Snippets.

Измените логотип входа

function my_login_logo() { ?>
    

Измените URL-адрес ссылки для логотипа.

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
 
function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

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

Как изменить текст письма отправляемого при регистрации:

На данный момент нет гибкого решения. Только если вы измените функцию отправки электронной почты rcl_register.mail в /wp-content/plugins/3functions/2g2l;

Настройка плагина

Для начала добавьте описание плагина:

Полезные инструменты для создания пользовательской формы входа в wordpress

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

Пять методов создания пользовательской страницы входа в wordpress

Пять методов, которые мы рассмотрим:

1. Настройка собственной страницы входа с помощью бесплатного плагина
2. Использование Elementor для создания настраиваемой страницы входа с визуальным интерфейсом drag-and-drop
3. Использование специального плагина регистрации WordPress
4. Использование обычного плагина формы WordPress
5. Добавление собственных фрагментов кода.

Редирект после регистрации средствами wp-recall:

Плагин имеет фильтр url_after_register_rcl:

// куда пойдет редирект
apply_filters('url_after_register_rcl',esc_url($_POST['redirect_to']))

Примените его сейчас. После регистрации мы направим пользователя на нужную страницу:

// редирект после регистрации
function otfm_my_registration_redirect() {
    return home_url('/целевая-страница/');
}
add_filter('url_after_register_rcl', 'otfm_my_registration_redirect',10);

В поле home_url введите адрес страницы.

Редиректы средствами wordpress:

” После успешной регистрации перенаправлять пользователя” и “Уведомление о входе и выходе”.

Свой title на картинке логотипа

Добавьте в файл functions.php текущей темы следующую фразу:

function alter_login_headertitle() {
return 'Не входи без надобности!'; //здесь изменяем на свой title
}
add_action('login_headertitle','alter_login_headertitle');

Свой логотип на странице входа и цвет фона

Создайте логотип, дайте ему имя mylogo.png и добавьте его в папку images (если она еще не существует). Добавьте это в файл functions.php текущей темы:

Стиль для логотипа

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

Стиль кнопки

Кнопка “Вход” является последним компонентом окна входа в систему. Измените ее. Ваш код может быть изменен следующим образом:

Стиль ссылок

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

Структура файла form-sign.php – шаблон входа:

Наглядно описал на скриншоте (кликабельно):

У каждого файла вверху есть табы переключения. Область куда приходят сервисные сообщения. Поля ввода в форме и хук для дополнения формы своими полями.
Если вам нужно что-то дополнить, изменить верстку – то думаю теперь вам не составит труда вписать в нужное место.
Хуки разберем ниже.

Хуки и фильтры формы восстановления пароля:

Recall-hook на заголовке формы восстановления пароля

Действие WordPress do_action(‘lostpasswordform’); добавляет поля в форму восстановления пароля. Ничто в этом действии не проходит проверку. Код WordPress активирует тег form.lostpassword_form.

Хуки и фильтры формы входа:

Вспомните хук в заголовке формы входа, вызвав do_action(“rcl-login_form-head”);

Чтобы добавить собственные поля в форму входа, используйте действие WordPress do_action(‘login_form);. ничего не передается. В исходном коде WordPress содержится тег form.login_form.

Для отправки формы авторизации вам требуется фильтр recoll.

Хуки и фильтры формы регистрации:

do_action(‘rcl_register_form_head’); – реколл хук, срабатывает в шапке формы регистрации.

Чтобы добавить собственные поля, используйте действие WordPress do_action(‘register_form’). Это плохой комментарий. Код Iframe активируется внутри тега form.register_form!

Шаг 1. добавление собственного логотипа

Придать своему сайту WordPress профессиональный вид можно, просто добавив свой логотип или его изображение на страницу авторизации.

1. Во-первых, создайте папку media в папке вашего плагина и загрузите в нее свой логотип.
2. В файл вашего плагина (или файл functions.php) добавьте следующую функцию и включите ее в хук login_enqueue_scripts:

Шаг 1. установите плагин формы входа

Затем выберите плагин и включите его. Если вы нашли понравившийся плагин в репозитории WordPress.org, вы можете выбрать другой из списка плагинов или найти его прямо на панели инструментов Wordpad. Мы выбрали настраиваемую страницу входа.

Даже если ваш плагин был загружен с другого сайта, вы все равно должны перейти в раздел “Плагины” и выбрать “Загрузить”. Затем загрузите и установите zip-файл плагина, следуя инструкциям на экране.

Шаг 2. найдите настройки формы входа

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

Шаг 2. придайте стиль странице авторизации

Помимо добавления логотипа можно изменить его размер и добавить стиль к другим компонентам окна авторизации.

Шаг 3. начните настраивать форму входа в wordpress

После того как вы нашли свои настройки, пора приступать к работе! Перейдите к любым опциям, которые вы можете выбрать на странице настроек. Ваш браузер запустит плагин Custom Login Page Cosmeter, когда вы нажмете кнопку “Начать настройку”.

Этот плагин использует известные цветовые схемы, фоны и отступы.

Чтобы создать собственную форму входа в WordPress, просто просмотрите варианты.

Да, у вас есть возможность внести собственные изменения или воспользоваться встроенным вариантом, если вы хотите что-то изменить (или исправить). Раздел “Дополнительные CS” плагина Custom Login Page, который мы используем для создания сайтов с собственными CSS-панелями в кастомайзере WordPress, также доступен для вас.

Сохраните его, когда закончите. После этого ваша новая настроенная форма входа в WordPress должна начать работать.

Заключение

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

Мы представили пять плагинов, которые позволят вам настроить форму входа в WordPress и обновить ваш сайт. Есть ли у вас другие рекомендации по плагинам для пользовательской формы входа? Пожалуйста, расскажите нам о них в разделе комментариев ниже.