10 шагов к созданию профессионально выглядящего администратора WordPress

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

Брендинг администратора WordPress – это не только дизайн, но и умный способ саморекламы. В этом посте мы рассмотрим, как вы можете настроить панель управления WordPress и страницу входа в систему, добавить собственный логотип, удалить или изменить элементы меню, удалить ссылки, указывающие на WordPress.org, и настроить многие другие параметры администратора с помощью помощь AG Custom Admin Panel плагин.
1. Установите плагин AG Custom Admin
Прежде всего, перейдите к пункту «Плагины»> «Добавить нового администратора» на панели инструментов WordPress, найдите плагин AG Custom Admin, установите и активируйте его. Плагин помещает новое подменю AG Custom Admin в меню «Инструменты» и кнопку на верхней панели администратора, чтобы помочь вам быстро перейти к настройкам.
2. Общие настройки
На первой вкладке вы можете настроить общие параметры. Одна из замечательных особенностей этого плагина заключается в том, что если вы наведете курсор на ярлыки параметров, появится небольшая подсказка, в которой вы сможете прочитать больше об этом конкретном параметре.

Первая опция в общих настройках – это «Исключить администратора AGCA из настроек», где вы можете быстро включать и выключать настройки для пользователей с правами администратора. Это может быть полезно, если вы хотите, чтобы пользователи с ролью администратора видели панель управления WordPress по умолчанию.
Следующие две настройки скрывают или отображают «Параметры экрана» и меню «Справка», расположенные в верхнем правом углу каждой страницы администратора (см. Ниже). Слишком большой выбор может сбить с толку тех, кто не разбирается в технологиях, поэтому может быть хорошей идеей избавиться от этих двух вариантов.
Общие настройки также позволяют вам выбрать Возможность WordPress что дает пользователям доступ к настройкам плагина.
3. Скрыть или настроить панель администратора
Вкладка «Настройки панели администратора» позволяет скрыть или настроить панель администратора, горизонтальное меню сверху. Вы можете полностью скрыть его из панели администратора и показывать только стильную кнопку «Выйти» в правом верхнем углу.
В других случаях вы можете просто упростить панель администратора, удалив некоторые из ее менее важных элементов. В настройках панели администратора есть много параметров, которые позволяют вам скрывать каждую часть одну за другой, настраивать заголовок блога, добавлять собственный логотип вместо логотипа WordPress по умолчанию или полностью удалять его.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

На снимке экрана ниже я изменил заголовок блога на «Изменить вид», чтобы указать, что это место, где они могут переключаться между внешним и внутренним интерфейсом.

Я также полностью удалил логотип WordPress, но не заменил его логотипом Hongkiat, так как я скорее добавлю его в вертикальное меню администратора (Шаг 7). На следующем этапе я перейду к полностью удаленной панели администратора.
4. Бренд нижнего колонтитула
На вкладке «Нижний колонтитул администратора» вы можете полностью удалить нижний колонтитул из нижней части панели администратора или изменить его текст на любой другой. Хорошей идеей может быть размещение ссылки на домашнюю страницу вашего бизнеса, чтобы ваши клиенты могли быстро связаться с вами, если им потребуется некоторая поддержка.
5. Очистите приборную панель
Настройки страницы панели инструментов позволяют изменять домашнюю страницу панели администратора. Это экран с виджетами панели инструментов, такими как «Краткий обзор» и «Новости WordPress», которые вы видите в первый раз, когда вы входите в систему как администратор.

В первой настройке вы можете изменить текст заголовка со слова «Панель инструментов» на собственное название бренда, а также добавить собственный контент под ним.

Это может определенно помочь пользователям, если вы разместите ссылку «Подробнее» под заголовком (как я сделал это на скриншоте ниже). Таким образом, они могут легко добраться до вас. Также может быть полезно быстрое вступление «Добро пожаловать в наш админ».
Плагин AG Custom Admin также позволяет скрывать виджеты панели мониторинга один за другим. Я оставляю только два, чтобы сделать мой фирменный админ менее загроможденным. Если вы скроете здесь виджеты, они не будут доступны пользователям в меню «Параметры экрана».
Моя настроенная панель управления WordPress выглядит сейчас так, все ссылки на WordPress.org исчезли, и она выглядит чище и понятнее.
6. Добавьте свой логотип на страницу входа
Параметры страницы входа позволяют настроить страницу входа на ваш сайт, заменить логотип WordPress собственной графикой, а также скрыть или открыть ссылки «Назад в блог», «Зарегистрироваться» и «Забыли пароль».
На приведенном ниже снимке экрана видно, что просто изменение логотипа и указание ссылки за ним на ваш собственный сайт может придать индивидуальный вид странице входа в систему и, безусловно, может помочь в продвижении вашего бренда.
7. Измените меню администратора слева
Меню администратора находится в левой части панели администратора. У этого есть много пунктов, и даже больше подпунктов, у многих из которых действительно нет самого очевидного ярлыка. Это может сделать кривую обучения крутой для людей не технических.

Настройки меню администратора помогут вам быстро очистить меню администратора. Вы можете удалить все меню администратора, если хотите, но, вероятно, лучше просто скрыть элементы, которые не нужны вашим пользователям.
Вы можете сделать не только элементы верхнего меню невидимыми, но и подменю; просто нажмите на меню верхнего уровня, и появится удобный выпадающий список. Более того, вы можете переименовать ярлыки в более понятные для непрофессионалов, точно так же, как я сделал это с метками «Dashboard», «Media» и «Appearance» ниже.
Вы также можете изменить базовый дизайн меню администратора, если хотите. Вы можете скрыть значки, разделители пунктов меню, стрелку подменю и кнопку «Свернуть меню», добавить границу подменю и вставить собственный логотип в верхней части меню администратора.
Для себя я добавил логотип Hongkiat в меню администратора со ссылкой за ним, указывающей на домашнюю страницу hongkiat.com, которая явно обозначает всю панель администратора, но не навязчиво.

Я переименовал 3 пункта меню (новые – «Админка», «Изображения» и «Дизайн»), вообще удалил меню «Плагин» и добавил радиус 10 пикселей в углы всплывающих окон подменю.

Вот как это выглядит:
8. Раскрась Админа
Вкладка Colorizer позволяет вам оживить вашего администратора WordPress, изменив цвет текста и фона основных элементов. Функция colorizer работает в режиме реального времени, поэтому, когда вы подбираете новый цвет, вы можете сразу увидеть изменение без сохранения настроек.

Здесь я изменил только цвет фона по умолчанию на светло-синий, так что теперь он соответствует королевскому синему логотипа Hongkiat, но вы можете изменить другие вещи, если хотите. Вероятно, неплохо бы немного поиграть с цветами, чтобы увидеть, что и где выглядит лучше.
Вы можете изменить не только цвета панели администратора, но и цвет фона страницы входа.
9. Добавить свой код
Если вы являетесь опытным разработчиком внешнего интерфейса, вы также можете добавить свой собственный код CSS и JavaScript в область администратора. С помощью инструментов разработчика вашего браузера вы можете легко получить CSS-селектор элемента, который вы хотите изменить.

На этом этапе я расширяю панель на странице входа в систему с помощью следующего фрагмента кода:

#авторизоваться {
ширина: 480 пикселей;
максимальная ширина: 90%;
поле: 0 авто;
}
Как вы можете видеть, панель входа стала шире, но все еще реагирует благодаря правилу максимальной ширины. Скорее всего, это изменение обеспечит лучший опыт для большинства пользователей. Вы даже можете сохранить свой собственный код, экспортировав его в файл .agca, а затем импортировав его на другие сайты WordPress.
10. Установите предварительно подготовленную тему администратора
Последняя вкладка «Административные темы» позволяет вам установить предварительно подготовленную административную тему поверх ваших настроек. Если вы это сделаете, вы потеряете пользовательские цвета, которые вы установили на вкладке Colorizer, но все равно сможете сохранить другие настройки.

Большинство административных тем здесь не бесплатны (вот 10 тем для WordPress), но покупка одной из них может стать отличным способом поддержать авторов этого замечательного плагина.