Работа плагина BM Custom Login
06.09.2018
Приветствую всех читателей блога Seobid.net! Сегодня хочу заинтересовать вас темой, которая самому мне очень пригодилась. Речь пойдет, как всегда, о WordPress, но об обратной его стороне. Я имею в виду процесс регистрации и авторизации на сайте, а точнее – страницу регистрации. Практически все системы управления содержимым сайтов (CMS) имеют специальную страницу для входа в панель администратора, где нужно вводить логин и пароль. Хотя Вордпресс и считается самой популярной и универсальной системой во всем интернет-пространстве, но эта страница в нем никогда не подвергается никаким изменениям и модификациям.
Другие конструкторы сайтов это делают при помощи своих базовых возможностей, кто-то меняет эту страницу специальными хаками или плагинами. Имея дело с CMS WordPress, вы наверняка наизусть себе представляете эту не очень веселую картинку:
Как я начал делать плагины для WordPress. Мотивация от WPlovers за 8 минут.
Все как бы стандартно и брендово, но тоскливо. А если ваш блог или сайт – многоавторский, то можно представить себе, сколько человек видели это убожество, скажу прямо. Я на некоторых своих сайтах пытался устанавливать плагины типа Theme My Login или Profile Builder , но по прошествии времени оказывалось, что они кушают довольно много ресурсов и памяти, что не есть хорошо ни для одного сайта. Поэтому до позавчерашнего дня все мои сайты имели девственно чистую, «заводскую» страницу входа в Вордпресс.
Как изменить страницу входа wordpress
А позавчера совершенно случайно, даже не помышляя об этом, наткнулся на плагин BM Custom Login , который мне понравился своей простотой. Делает он именно, то, что я хотел – изменяет внешний вид страницы входа. Но при этом он практически не нагружает сайт, и для его работы требуется всего два новых изображения, которые и будут вызываться при открывании страницы регистрации. То есть – плагин, грубо говоря, формирует всего 2 запроса к БД, что является мизерной нагрузкой на сервер. И включается он, только если активизируется страница входа на сайт. Как он работает? Прежде всего, установим плагин на сайт.
Вы уже знаете мой любимый способ – идем в админку (пока заходим в админпанель со страницы со стандартным интерфейсом), в меню «Плагины» выбираем «Добавить новый», и в поле «Поиск» пишем – «BM Custom Login». Вот как-то так:
Напомню тем, кто не читал моих предыдущих постов, чем выгодна именно такая установка плагинов вообще:
Вы устанавливаете плагин из официального хранилища WordPress, а это значит, что все его версии и исправления проверяются на наличие вирусов. Качая плагин из неизвестных источников, вы подвергаете свой сайт большому риску заражения. Пользуясь вышеописанным способом, вы экономите время. Вам не нужно пользоваться файловыми менеджерами или заходить по FTP на сайт, чтобы залить плагин. WordPress сам распакует и установит плагин – вам останется его только активировать, вот так:
Но перед тем как вы увидите эту картинку, WordPress найдет для вас несколько похожих по названию плагинов, и вам останется только выбрать нужный:
Спросит вас WordPress, и вы, конечно, согласитесь, после чего плагин будет установлен в директорию /wp-content/plugins. Дальше вам необходимо будет настроить его работу. Здесь начинается рутина. Впрочем, шагов совсем немного – больше времени у вас займет подготовка изображений, которые вы хотите видеть на странице входа в админпанель сайта. У меня на одном сайте входная страница выглядит вот так:
Как видите, простенько, но именно такое минималистичное оформление мне и понравилось. А для креативности я сдвинул форму регистрации вправо. Впрочем, можно передвинуть ее в любое место. Или оставить на привычной середине страницы.
Сначала немного об изображениях – одно (на картинке это полупрозрачный черный прямоугольник) должно быть размером 320х460 px, а второе, для фона страницы – 1280х1024 px или 1600х1200 px. Потом в настройках плагина вы сможете подогнать изображение по высоте и ширине. Все это можно сделать в фотошопе, а заодно и уменьшить вес картинки для фона страницы, чтобы быстрее грузилась. Моя картинка после обработки в фотошопе стала весить 60кБ вместо первоначальных 1,8 мБ. Вот так. Теперь – о настройках плагина.
В «Параметрах» — «Custom Login» вы увидите такие пункты:
Для скорейшего понимания настроек я перевел страницу в браузере, и теперь более или менее понятны все пункты.
Сюда вы впишете адрес фоновой картинки для формы регистрации. Напомню – ее размер должен быть не меньше, чем 320х460 px. Если будет немного больше, то плагин сам ее обрежет. Вы можете загрузить это изображение и в корень сайта (адрес – http:www.вашсайт/картинка), и при помощи медиазагрузчика Вордпресс, в директорию /wp-content/uploads. Второй пункт – укажите свой логин для входа в админпанель, чтобы плагин мог вас идентифицировать при всех последующих входах. WordPress footer text: — здесь можете указать произвольный текст. Он будет отображаться только в админпанели внизу страницы. Например, «Привет самому креативному админу!». Цвет фона страницы, если вы не используете первый пункт. Если же у вас будет выводиться фоновая картинка, то цвет в формате #eeeeee можно и не указывать вообще. Здесь вы укажете адрес картинки для фона страницы регистрации и авторизации. В моем случае – это известный бизнес-центр моего города. Следующие три пункта определят положение вашего фонового изображения на странице – это как для обоев рабочего стола (замостить, по центру, и т.д.). Цвет текста ссылок «Регистрация», «Забыли пароль?» и так далее. Тень текста. В общем, на любителя – можно вообще не указывать, тогда и тени не будет. Цвет ссылок при наведении курсора.Вот такие простенькие настройки.
Теперь (может быть, это кому-то интересно) о том, как можно управлять положением формы регистрации на странице. На одном из своих сайтов я оставил все, как есть:
То есть – форма регистрации осталась посередине страницы. А на одном — сместил ее вправо. Как это сделать? Чтобы не быть многословным – заходите в редактор файлов плагинов («Плагины» — «Редактор»), выбираете плагин BM Custom Login, а в нем – файл bm-custom-login/bm-custom-login.css. Это css коды для формы регистрации. Теперь просто смотрите, что вам хочется изменить – сдвинуть влево или вправо, вверх или вниз.
По умолчанию стоят настройки margin-auto, поэтому здесь все просто – убираете эту строку, а вместо нее пишете, например, margin-left: 1000px;. Тогда форма регистрации сдвинется вправо и будет выглядеть, как в первом примере. Если нужно сдвинуть левее – меняйте число, и будет вам счастье. Соответственно вверх и вниз – margin-top и margin-bottom с нужным сдвигом в пикселях. Вот и вся премудрость.
Теперь ваша страница будет выглядеть намного живее и креативнее, что, поверьте мне, понравится вашим посетителям гораздо больше, чем унылый вид стандартной страницы входа. Надеюсь, подобрать изображения, соответствующие тематике вашего сайта или блога вы сможете самостоятельно. Удачи вам в ваших дизайнерских проектах, и до встреч в следующих статьях!