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

Последнее обновление — 8 июля 2021 г.

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

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

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

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

Можно внести несколько изменений на страницу входа в WordPress, обновив исходный код в файле function.php выбранной темы. Хотя, как только вы обновите WordPress, эти изменения будут потеряны. Это связано с тем, что ваша таблица стилей темы для страницы входа не является частью настройки темы WordPress, что требует от вас создания другой таблицы стилей для пользовательской страницы входа.

Начните с создания папки с именем «Вход» в папке вашей темы и добавьте файл .txt с именем custom-login-style.css . После этого вы можете приступить к внесению некоторых основных изменений, чтобы настроить и добавить уникальности странице входа.

Изменить фон

Чтобы обновить цвет фона страницы или конкретной кнопки, выберите цвет фона: #222222 и измените шестнадцатеричный код на цвет по вашему выбору. Воспользуйтесь цветовой палитрой, чтобы выбрать цвет, который дополняет эстетику вашего бизнеса и визуально привлекателен.

Кроме того, если вы хотите изменить фоновое изображение своей страницы входа, выберите строку кода background-image: url(logo_login.png') и замените logo_login.png , которое является именем файла, на URL-адрес обновленного файла изображения . .

Компании, которые хотят, чтобы их клиенты помнили их бренд, могут изменить логотип WordPress на собственный логотип. После сохранения файла пользовательского изображения логотипа в папке входа в систему замените имя файла своим логотипом в коде background-image: url('logo_login') .

Настройка формы входа путем настройки отступов и полей

Разработчики могут настроить форму входа, чтобы сделать свою страницу привлекательной и подходящей для внешнего вида сайта. От заполнения кнопок до цвета и размера шрифта меток и т. д. Вы можете добавить больше места внутри кнопки, чтобы текст не казался сжатым, увеличив отступ; просто увеличьте числа в коде заполнения: 12px 12px 12px 12px. Если вы хотите создать больше пространства за пределами кнопки, чтобы окружающие элементы не были плотно упакованы, вы можете сделать это, увеличив отступ в поле кода : 12px 12px 12px 12px. Даже такая простая вещь, как добавление нескольких пробелов, может в совокупности повлиять на окончательный вид вашей страницы входа и сделать ее более цельной.

Изменение размера и цвета шрифта

Вы можете изменить размер шрифта текста абзаца, ссылок или полей формы, используя код font-size: 15px , изменив число по своему вкусу. То же самое можно сделать для цвета шрифта, обновив цвет в коде color: #222222 и заменив цвет.

Изменение сообщения об ошибке входа

С ростом числа киберпреступлений и мошенничества в Интернете веб-разработчики и владельцы бизнеса не могут рисковать своими веб-сайтами и потерять конфиденциальные данные. Когда пользователь поспешно вводит неправильные учетные данные для входа, автоматически генерируется сообщение об ошибке по умолчанию. Хотя это должно сигнализировать пользователям об этой ошибке, хакеры могут попытаться взломать данные для входа. Таким образом, лучший способ защититься от хакеров — изменить сообщение об ошибке в файле function.php .

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

Плагин настройки входа

Login Customizer — один из самых удобных плагинов, который позволяет вам вносить изменения прямо из вашего WordPress Customizer. После простого процесса установки вы можете легко получить к нему доступ с панели инструментов WordPress на вкладке « Внешний вид ». Нажмите « Начать настройку », и он перенаправит вас на экран настройки, где вы измените дизайн всех областей по своему вкусу.

Настройщик входа в Colorlib

Colorlib Login Customizer — это находчивый и гибкий инструмент, который обладает всеми функциями плагина премиум-класса, но предлагает их бесплатно. Широкий набор уникальных функций делает его лучшим выбором для веб-разработчиков, стремящихся создать индивидуальное решение для своих пользователей. Это также позволяет настраивать с помощью WordPress Customizer, чтобы вы могли легко перемещаться и реконструировать свою страницу входа.

В итоге

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