Изменяем стандартную страницу авторизации с помощью плагина My Brand Login

Изменяем стандартную страницу авторизации с помощью плагина My Brand Login

5/5 - (1 голос)

Существует несколько плагинов для изменения внешнего вида стандартной страницы авторизации WordPress. Это как и добавление логин-панели в сайдбар с помощью виджета, так и написание специального кода в том месте, где вы хотите, чтобы она отображалась. Есть возможность не размещать логин-панель на главной странице своего сайта, а изменить существующую стандартную страницу авторизации. Одним из таких является плагин My Brand Login. Скачать плагин можно на официальном сайте WordPress. Принцип его работы достаточно прост: он подменяет стандартный внешний вид страницы авторизации на тот, который вы укажете в его настройках. Согласитесь, очень удобно, например в панели указать логотип и цветовые стили своего сайта, а не использовать установленные по-умолчанию. Установка плагина стандартна и не должна вызвать затруднения. Просто поместите папку с плагином в директорию wp-content/plugins/ или воспользуйтесь панелью установки плагинов в консоли администрирования WordPress. В настройках плагина нам будет доступна вот такая панель управления:

Панель имеет шесть вкладок со следующими настройками:

  • WP Logo – позволяет загрузить ваш логотип, который будет размещен над панелью авторизации. Для загрузки логотипа достаточно нажать кнопку “Upload Image”, а затем вставить полученный URL файла в поле на вкладке и нажать кнопку “Сохранить изменения”. Обратите внимание, что максимальный размер загружаемого логотипа имеет ограничение в 330px на 130px. Можно и больше, однако изображение будет центроваться, а края попросту выйдут за границы допустимого поля и не будут видны.
  • BG HEX – HEX-код цвета бэкграунда страницы авторизации. Обратите внимание, что с правой стороны имеется палитра, на которой с помощью пипетки можно подобрать нужный вам цвет, а затем вставить его HEX-код в соответствующее поле на вкладке.
  • BG Picture – если же вы хотите задать в качестве бэкграунда изображение, то это можно сделать на этой вкладке. Принцип размещения изображения тот же, что и на вкладке WP Logo. Загруженное вами изображение будет моститься по всей странице, поэтому лучше всего подойдет для этой цели однотонное изображение.
  • Top HEX – цвет верхней панели, содержащая ссылку на главную страницу сайта.
  • Login BG – бекграунд можно задать не только всей странице, но и непосредственно логин-панели. Максимальный размер загружаемого изображения 400px на 300px.
  • Link HEX – как видно из названия, здесь можно задать цвет ссылок. Опять же, выбираем в палитре подходящий нам цвет и вставляем HEX-код в поле вкладки.

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

  • Position The Login Form – если вас не устраивает тот факт, что логин-форма расположена по центру страницы, то вы можете исправить эту ситуацию. Сделайте необходимые отступы логин-формы относительно левого верхнего угла страницы как указано в примере ex: 20px 20px 20px 20px.
  • Admin Logo – Top Left Corner (look up) – наверняка, вы обратили внимание на то, что в панели Администрирования в верхнем левом углу красуется небольшой логотип WordPress. Его тоже можно заменить на свой, загрузите нужную вам картинку с помощью кнопки “Upload Image” в панели, а затем вставьте полученную ссылку на изображение в поле. Максимальный размер логотипа 40px на 40px.
  • Background To The Administration – позволяет в качестве бэкграунда в панели Администрирования задать собственное изображение. К сожалению, в качестве фона нельзя задать только цвет, что является, на мой взгляд очень неудобным моментом.

В принципе, этих настроек уже достаточно, чтобы заметно изменить и “оживить” стандартную страницу авторизации, но для самых искушенных есть еще одна возможность повлиять на страницу. Если вам все-таки недостаточно тех настроек, которые предоставляет плагин в своей панели, то можно другие элементы логин-страницы изменить путем правки файла mybrand.php плагина. Открыв файл, вы увидите, что он содержит классы стилей css, которые мы можем настроить в панели управления плагином. Таким образом, зная классы стилей нужных нам элементов, мы можем вписать их в этот файл.

Изменяем стандартную страницу авторизации с помощью плагина My Brand Login: 4 комментария

  1. В плагинах ничего не разбираюсь. А вот какие плагины конфликтуют между собой? Можете ответить? Буду признательна.

    1. Отключите все плагины, а потом подключайте по одному, вот и выясните, какой плагин мешает жить вашему.

  2. А чё таблицу стилей отредактировать не легче, чем какую то херню себе ставить?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *