Как создать и настроить страницу авторизации для WordPress
Но когда дело доходит до создания веб-сайта для клиентов, скорее всего, вы захотите иметь более гибко настраиваемую страницу авторизации, чтобы она была едина с идеей дизайна сайта.
Кроме того, зайдя на нестандартную страницу авторизации, которая была сделана специально под ваш сайт, клиенты будут иметь наглядное представление об уровне вашей организации.
Если это то, чего вам не хватает на сайте — приступайте к изучению инструкции, изложенной в данной статье.
Пользовательская страница авторизации
Затем, создаем новую страницу в панели администрирования и ставим постоянную ссылку для страницы авторизации.
WordPress автоматически подцепит шаблон page-login.php :
Форма входа
Поместите тег wp_login_form в код шаблона page-login.php для отображения формы авторизации:
Следующая часть необязательна, но в некоторых случаях она может быть использована. Мы можем настроить такие части формы, как страница для редиректа после успешной авторизации, поля смены пользователя и пароля и так далее:
Здесь же вы можете, к примеру, добавить такие штуки как логотип и описание вашего сайта:
Теперь приступим к настройке внешнего вида страницы с помощью CSS-стилей. В этом примере я покажу, как выглядит моя страница для входа.
У нее темный фон с голубой кнопкой, которые соответствуют теме сайта Hongkiat.com :
Проверка связки имя-пароль
В этой части страница уже функционирует. Мы можем попытаться авторизоваться, и если вход выполнен успешно, нас перебросит на страницу, которую мы указали в параметре redirect на предыдущем шаге. Но есть еще кое-что, на что мы обратим наше внимание.
Во-первых, страница wp-login.php до сих пор остается доступной. Стоит поставить редирект с wp-login.php на созданную нами страницу, чтобы наши клиенты могли на неё попасть.
Для этого нужно добавить следующий код в файл functions.php используемой вами темы WordPress:
Во-вторых, страница авторизации работает так как задумано только в случае, если попытка входа удалась. Но, что происходит, если вход не удался?
Чтобы избежать этого добавляем следующую функцию в файл functions.php :
Две эти функции выполняют несколько задач: переадресуют пользователей в случае неудачной попытки входа и дописывают к URL-адресу строки запроса login значение failed или empty :
Последняя проблема, которую мы решим это редирект к wp-login.php при выходе с сайта. Нам стоит определить страницу редиректа для корректного перехода при нажатии кнопки выхода:
Сообщение об ошибке
Поместите код, приведенный ниже, в шаблон страницы авторизации:
Код, приведенный выше, проверяет, содержит ли переменная login что-либо и в противном случае приравнивает ее к значению 0.
И ниже, собственно, пример того, как может такое сообщение выглядеть:
Заключение
Осталось еще несколько вещей, которые мы можем добавить к странице авторизации. К примеру, ссылка на страницу для восстановления пароля, ссылка на страницу регистрации нового пользователя и персонализированные сообщения об ошибках.
Но с другой стороны, наша страница полностью функциональна, позволяет пользователям входить на сайт и выходить из него, и поэтому я считаю это неплохой точкой для старта. Далее можно добавлять тот функционал, который вы посчитаете нужным.
Надеюсь, это руководство окажется для вас полезным!
Как сделать форму регистрации на WordPress
Стандартная комплектация платформы не подразумевает привычную регистрацию пользователей. Необходимо заходить на отдельную страницу, предназначенную для входа администратора и регистрироваться, заполнив строку имени и почты. Многие скрывают панель входа в целях безопасности, следовательно, регистрация для посетителей становится невозможной. Чтобы открыть авторизацию и расширить возможности работы с аккаунтами – необходимо использование специальных плагинов.
ProfilePress
Расширение, позволяющее сделать форму регистрации на WordPressбез особых сложностей. Все что требуется на старте – ряд несложных настроек. Но, возможности плагина достаточно шире, так как позволяют соорудить целую ветку модулей для пользователей: шаблон регистрации, вход в аккаунт и страницу с профилем. Плагин совместим со всеми темами платформы.
Основной функционал предлагается на бесплатной основе. Причем, имеется несколько различных стилей оформления и тем, позволяющих максимально подобрать дизайн формы к сайту. Хотя, имеется возможность приобрести премиальную версию, расширяющую функционал: добавление авторизации через социальные системы, установка капчи и загрузка изображений профиля.
Основные возможности бесплатного пакета:
Функционал платного пакета:
Для полноценной работы, требуется установка дополнительного расширения Shortcake Shortcode UI. Оно упростит добавление шорткодов в панели управления. После активации плагинов, убедитесь, что стандартные настройки разрешают регистрацию новых пользователей (должна быт установлена галочка «Любой может зарегистрироваться»). При использовании платного пакета, необходимо скопировать лицензию в консоли плагина.
Заметьте, что после установки модуля появятся новые страницы: регистрация, сброс пароля и вход. Для них предусмотрены специальные шорткоды, благодаря которым можно разместить формы в требуемом месте. В пункте Redirection можно выполнить настройку для перенаправления пользователей со страницы входа.
Можно установить приветственное сообщение и параметры его появления. Также задаются сообщения, отправляемые пользователям по почте при действиях с учетной записью.
Постройка форм
Выбрав необходимую вкладку в меню настроек плагина, открывается рабочая панель, позволяющая приступить к созданию формы для входа и других страниц. Для каждой предложено по 5 стилей оформления. Благодаря предварительному просмотру видно, как будет выглядеть форма регистрации на WordPress. Для редактирования шаблона следует нажать на Edit. Возле кнопки загрузки медиафайлов находится запуск ProfilePress Shortcodes – окно, которое показывает все элементы, доступные для добавления. Таким образом, редактирование функций и полей осуществляется очень просто.
Важно! При покупке платной версии придется заплатить 49 долларов. Всего доступно 3 тарифа, в зависимости от количества используемых сайтов с конструктором форм. Чтобы убедиться, что данное расширение подходит вам, протестируйте бесплатный пакет, предоставляющий все необходимые возможности.
Profile Builder
Как сделать форму регистрации на WordPress за 5 минут? Воспользоваться плагином Profile Builder. Он предоставляет все необходимые функции по установке форм авторизации, без каких-либо излишеств. Достаточно изучить инструкцию по использованию расширения. Первое – скачиваем, устанавливаем и активируем модуль. После этого переходим к созданию новой страницы сайта с названием «Регистрация». На ней размещается шорткод соответствующего шаблона из плагина Profile Builder.
Для удаления лишних полей следует перейти в настройки. Здесь же указывается информация о строках, которые обязательны к заполнению. Следующий этап – создание формы входа, через которую зарегистрированные пользователи смогут авторизоваться на сайте. Создавать для этого отдельную страницу нет необходимости, достаточно разместить шорткод в виджете или файле темы.
Как и в предыдущем плагине, перед запуском следует разрешить регистрацию пользователей в общих настройках системы. Основные характеристики, инструкция и обозначения шорткодов указаны в главном меню. Со столь небольшим списком функций это расширение является максимально эффективным и простым. Все пользовательские настройки могут осуществляться при достаточных знаниях CSS.
Login With Ajax
Система не предоставляет возможности персонализировать авторизацию посетителей сайта стандартными методами, а плагин Login With Ajax поможет сделать форму регистрации на WordPress, работающую независимо от системной страницы входа.
Сразу перейдем к возможностям расширения:
Установка проходит, как обычно – через стандартный загрузчик плагинов. Тема устанавливается и активируется. В общих настройках консоли WordPress снимаем запрет на добавление новых пользователей, как в предыдущих случаях.
В меню параметров необходимо выбрать шаблон, который будет отображаться по умолчанию, на выбор 3 варианта:
Доступно меню настроек почты, переадресации и групп пользователей. Чтобы добавить саму шаблон авторизации на сайт, следует перейти в меню виджетов и выбрать соответствующий сайтбар Login With Ajax. Перед публикацией можно проверить все настройки и отредактировать при требовании. Как видно, сделать форму регистрации на WordPress можно в течение нескольких минут, она будет аккуратно отображена в виджете.
3 популярных плагина авторизации через социальные сети
Несколько лет назад, авторизация пользователей при помощи социальных сетей стала появляться практически у каждого сайта. Нет необходимости вводить множество данных и подтверждать почту, достаточно связать аккаунт социальной сети с ресурсом.
Social Login
Плагин предлагает комплекс простых методов по включению авторизации и регистрации при помощи социальных сетей. Доступно более 15 популярных ресурсов, включая:
Форму для входа можно разместить в виджете или используя шорткод. Приятная особенность – модуль полностью совместим с BuddyPress.
Super Socializer
Позволяет установить модуль для авторизации на сайте и комментирования постов из социальных сетей. На выбор несколько видов оформления панели авторизации. После того, как посетитель зарегистрировался, в консоли и базе данных сохраняется его учетная запись со всеми необходимыми данными. Доступны все известные социальные сети.
WordPress Social Login
Параметры плагина позволяют устанавливать ограничения и доступы для пользователей. Предусмотрено множество пользовательских настроек. Иконки входа и регистрации устанавливаются в любом месте сайта, в том числе в стандартном окне авторизации WordPress.
В итоге
Чтобы сделать форму регистрации на WordPress можно пойти двумя популярными путями: использовать один из конструкторов, либо упростить авторизацию при помощи социальных сетей. Хотя, многие сайтостроители выбирают третий метод – создание собственной формы или модернизация стандартной. Этот способ требует продвинутых знаний в HTML и PHP. Все предоставленные плагины имеют необходимые технические составляющие для создания качественного шаблона регистрации.
20 плагинов для формы авторизации и регистрации на сайте WordPress
Если Вам нужна форма авторизации и регистрации на сайте на WordPress, то это можно сделать с помощью плагинов и их достаточно много.
Причин для использования для установки формы авторизации или регистрации на сайте достаточно много. Это и продажа некой информации, например курса обучения, и собирание базы для рассылок, и самая все-таки распространенная – борьба с ботами. Я надеюсь, что у Вас хватит терпения прочитать до конца и выбрать именно то, что Вам нужно.
Список плагинов для формы авторизации и регистрации на сайте WordPress
1. Loginza
Возможности плагина: Пользователи Вашего блога смогут без процедуры регистрации авторизироваться в блоге и оставлять комментарии и другие. Подробнее здесь.
Хочу предупредить. На данный момент этот плагин не обновлялся с 2012 года.
2. Facebook Login Widget
3. Login Widget With Shortcode
4. Clef
5. New User Approve
6. Cimy User Extra Fields
7. Peter’s Login Redirect
8. Pie Register
C 10 мая 2015 года на официальном сайте WordPress.org его не стало. Не знаю почему.
9. Uber Login Logo
Этот плагин позволяет настроить внешний вид WordPress страницу входа и панели управления.
Вы можете загрузить собственное изображение в экране входа в систему и указать ссылку, прикрепленной к логотипу. Вы также можете использовать Виджеты. Подробности.
11. Theme My Login
12. Custom Login
13. Sidebar Login
14. Scan-to-Login
Плагин добавляет новые поля в регистрационной форме для новых пользователей. Новые поля включают имя, фамилию, имя, веб-сайт и другую информацию.
Самое замечательное в этом плагине, что увеличение регистрационных данных может помочь остановить спамеров и позволит лучше управлять своим пользователям. Подробности.
UserPro предлагает так много возможностей, это трудно понять, с чего начать. Этот плагин дает много фронтальных профилей, логин и регистрацию WordPress.
Создает неограниченное количество пользовательских профилей полей и позволяет настроить профили и регистрационную форму. Плагин премиум также включает в себя социальную интеграцию средств массовой информации и возможность создания для поиска каталог ваших членов. Этот плагин платный. Подробнее здесь.
NURCaptcha вставляет ReCaptcha в Реестре форме вашего сайта, чтобы защитить ее от спам-ботов. Санскр NURCaptcha проста в установке и не замедлять работу Вашего сайта. Плагин использует ReCaptcha инструменты Google, чтобы дать вашему сайту дополнительную защиту против тех спамеров ботов, добавив безопасности в WP Регистрация форме. Подробности.
Плагин требует регистрации и дает ключ API пользователю. Формирует контактная форму, регистрационную форму, вход в форме, форму подписки, бронирование формы, формы опроса, регистрации событий, по электронной почте рассылку …Доступен на 37 языках. Подробности.
Простой и быстрый способ, чтобы включить интерфейс формы входа. Есть также форма регистрации, редактор профиля и сброса формы пароля. Подробности.
А может Вы уже используете ли вы какой-либо из перечисленных плагинов? Какие плагины вы рекомендуете для авторизации и регистрации пользователей?
Возможно вам это будет интересно:
Возможно Вас также заинтересует:
5 комментариев
Спасибо за содержательную статью, поставил у себя Loginza все работает без проблем.
Круто. Сейчас попробую плагины социальной авторизации для пользователей.
Поправьте опечатку
Спасибо за замечание.
Хорошая подборка, добавил в закладки. До этого пользовался плагином Wp-Private, он создает форму регистрации, скрывает страницы от незарегистрированных пользователей, при этом есть возможность настройки ручной модерации зарегистрированных пользователей.
Есть еще плагин “wp-recall” – мой любимый плагин, так как имеет множество дополнений и примочек. Советую обратить на него внимание и не обходить мимо.
Добавить комментарий Отменить ответ
Как создать собственную форму входа в WordPress
Скорее всего, вы приложили немало усилий, чтобы создать свой сайт WordPress и сделать так, чтобы он хорошо смотрелся на интерфейсе. Однако вы можете игнорировать один важный аспект: форму входа в WordPress.
Существует множество причин для настройки формы входа в WordPress, например, для повышения безопасности, повышения узнаваемости бренда и улучшения взаимодействия с пользователем. Любой из этих причин должно быть достаточно, чтобы убедить вас отказаться от стандартного экрана входа в WordPress. Это простое изменение – удивительно отличный способ улучшить ваш сайт.
В этом посте мы обсудим преимущества создания пользовательской формы входа в WordPress. Затем мы представим некоторые инструменты, которые помогут вам легко выполнить эту задачу, в том числе некоторые из лучших настраиваемых плагинов для страницы входа, из которых вы можете выбрать. Давайте начнем!
Почему пользовательская форма входа в WordPress полезна для вашего сайта
Он также не предлагает никаких особых функций безопасности, чтобы не допустить хакеров и других нежелательных лиц в вашу административную область, кроме базовых настроек безопасности WordPress (например, надежных паролей). По этим причинам ваша форма входа заслуживает такого же внимания, как и любая другая область вашего сайта.
Вот лишь некоторые из преимуществ настройки формы входа в WordPress:
Это лишь некоторые из преимуществ, которые вы можете получить с помощью настраиваемой формы входа. Однако первое является наиболее важным. При принятии решения о внесении каких-либо изменений в ваш сайт всегда в первую очередь следует думать о безопасности, и в этом случае вы можете значительно улучшить его с помощью всего лишь нескольких простых настроек.
Полезные инструменты для создания пользовательской формы входа в WordPress
К настоящему времени вы понимаете причины, по которым вы можете захотеть изменить форму входа в WordPress. К счастью, есть множество плагинов, которые могут вам помочь (плюс многие из них можно использовать для настройки других форм WordPress). Следующие ниже варианты являются одними из лучших из имеющихся, с отличным набором функций и хорошей репутацией.
Регистрация пользователя ProfilePress, вход в систему и плагин для профиля пользователя WordPress
ProfilePress – удобный плагин, который позволяет настраивать индивидуальный вход в WordPress, регистрацию, сброс пароля и редактировать формы профиля. Вы также можете использовать его для создания пользовательских профилей внешнего интерфейса, уникальных для каждого пользователя.
Вам не нужно изобретать велосипед, создавая формы с нуля и имея дело с проверкой, аутентификацией и авторизацией на стороне сервера. Пусть ProfilePress позаботится обо всем этом и многом другом за вас. Стоит отметить, что ProfilePress использует шорткоды. Поэтому вместо того, чтобы кодировать формы в HTML, как обычно, просто вставьте шорткод. Гибкость шорткодов делает возможной форму входа, показанную на изображении ниже.
ProfilePress даже поставляется с красивыми готовыми к использованию шаблонами. Использовать эти готовые шаблоны очень просто; просто скопируйте и вставьте шорткод шаблона на страницу WordPress, а затем сохраните. Предварительный просмотр, чтобы увидеть форму вживую. Проще простого.
ProfilePress также включает множество других интересных функций, включая: модерацию зарегистрированных пользователей, социальный вход через Facebook, Twitter, LinkedIn, Google, GitHub и VK.com, вход пользователя без пароля, интеграцию с BuddyPress, BbPress, MailChimp, CampaignMonitor, Polylang, Мультисайт и т.д.
Ключевая особенность:
Пользовательский настройщик страниц входа Бесплатный плагин для WordPress
Если вы ищете быстрый и простой способ настроить форму входа в WordPress, то настройщик пользовательской страницы входа – отличный вариант. Он использует знакомый Live Customizer с простыми опциями для изменения вашего логотипа, фона, отступов, полей формы и кнопки. Кроме того, вы всегда можете добавить немного настраиваемого CSS для более сложных изменений.
Ключевая особенность:
Пользовательская страница входа администратора Бесплатный плагин для WordPress
Плагин Customize WordPress Login Page позволяет легко персонализировать вашу форму входа, чтобы она выглядела правильно. Он предоставляет вам возможность изменять цвета, добавлять фоновое изображение и даже создавать фоновые слайд-шоу. В дополнение к функциям настройки, этот плагин адаптируется для мобильных сайтов и интегрирован с Google Fonts.
Ключевая особенность:
LoginPress Customizer Page Customizer Бесплатный плагин для WordPress
Информация и Скачать
LoginPress делает процесс настройки формы входа в WordPress простым и интуитивно понятным. Он позволяет вам редактировать страницу входа прямо из панели управления WordPress и добавлять настраиваемые поля и сообщения для пользователей. Кроме того, существует множество ориентированных на дизайн функций, которые помогут вам соответствовать бренду и стилю остальной части вашего сайта.
Ключевая особенность:
White Label Branding для плагина WordPress Premium WordPress
Этот премиальный плагин позволяет настраивать не только форму входа, но и всю админку WordPress. Вы также можете использовать White Label Branding для WordPress, чтобы контролировать, что видит любой пользователь в зависимости от назначенной им роли, например, редактора или автора, и при необходимости скрывать определенные области. Это создает ценный дополнительный уровень безопасности для вашего сайта.
Ключевая особенность:
Индивидуальный вход Пользовательская страница входа в систему Премиум плагин для WordPress
Плагин Tailored Login имеет встроенный менеджер стилей для вашей формы входа и предоставляет широкий спектр опций настройки. Он позволяет добавлять дополнительные виджеты, а также настраивать фон, заголовки, кнопки и многое другое для области входа в систему. Плагин является частью членства в iThemes, которое включает премиальную поддержку и форум сообщества.
Ключевая особенность:
Как настроить форму входа в WordPress
Теперь, когда вы ознакомились с некоторыми полезными инструментами, которые можно использовать для изменения формы входа в WordPress, вот краткий обзор того, как это сделать. Конечно, эти шаги будут разными для каждого из вышеупомянутых плагинов. Если вы выберете многофункциональный плагин с множеством настроек и параметров, настройка формы входа в WordPress может занять немного больше времени, но пока мы собираемся показать вам один из самых простых вариантов.
Шаг 1. Установите плагин формы входа
Итак, для начала выберите плагин, затем установите и активируйте его. Если понравившийся плагин находится в репозитории WordPress.org, вы можете найти его прямо на панели инструментов WordPress в разделе «Плагины»> «Добавить новый », используя поле поиска. Например, мы выбрали настройщик пользовательской страницы входа.
Если ваш плагин взят со стороннего веб-сайта, вы все равно захотите перейти в «Плагины»> «Добавить новый», но затем нажмите кнопку «Загрузить плагин». Оттуда следуйте инструкциям на экране, чтобы загрузить zip-файл плагина и установить его.
Шаг 2. Найдите настройки формы входа
Теперь, когда ваш плагин установлен и активен, вы должны попытаться найти страницу настроек плагина. Для настраиваемого настройщика страницы входа они находятся в разделе Внешний вид> Настройка входа в систему. Другие плагины можно найти в разделе «Инструменты», «Настройки» или даже в новой вкладке меню, добавленной в вашу панель управления WordPress.
Шаг 3. Начните настраивать форму входа в WordPress
Как только вы нашли свои настройки, пора приступить к работе! Если у вас есть параметры на странице настроек, начните их изменять. Для используемого нами плагина Custom Login Page Customizer вам сначала нужно нажать кнопку «Начать настройку», которая откроет настройщик WordPress.
Этот конкретный плагин использует знакомые варианты дизайна для цветов, фона, отступов и многого другого.
Просто пройдите через доступные параметры, чтобы создать свою собственную форму входа в WordPress.
Да, и если вам нужно (или вы хотите) изменить что-то, что недоступно в качестве встроенной опции, вы всегда можете использовать немного настраиваемого CSS, чтобы внести свои изменения. Плагин Custom Login Page Customizer, который мы используем, включает собственную панель CSS, но есть раздел «Additional CSS» в настройщике WordPress по умолчанию, который вы тоже можете использовать. Быстрый поиск в Google обычно является самым простым способом выяснить, как написать пару строк CSS, но если вы не уверены, вы всегда можете увидеть, поможет ли разработчик плагина.
Когда вы закончите, просто не забудьте сохранить. После этого ваша новая пользовательская форма входа в WordPress должна быть запущена!
Заключение
Когда дело доходит до вашего сайта WordPress, вы хотите уделять настройке админки столько же внимания, сколько и интерфейсу. Настройка формы входа в систему поможет вам пройти лишнюю милю с вашим брендом, а также может обеспечить повышенную безопасность и удобство для пользователей.
В этой статье мы представили пять плагинов, которые помогут вам создать настраиваемую форму входа в WordPress, соответствующую вашему сайту, но, возможно, мы пропустили ваш любимый. Есть ли другие плагины для пользовательских форм входа, которые, по вашему мнению, стоит попробовать? Сообщите нам о них в комментариях ниже!