Как поменять дизайн админки WordPress

В моей группе Вконтакте мне задали вопрос, как поменять дизайн админки CMS WordPress. Думаю на этот вопрос мне как всегда поможет официальное руководство, начнем разбираться вместе.

Зайдя на сайт Codex WordPress я как всегда понял что русского перевода этого вопроса нет, а значит начинаем переводить и искать разные статьи на эту тему.

Постараюсь предложить свою версию смены внешнего вида админки. 

Итак, на основе все тех же Хуков о которых я уже писал в разделе «Для разработки плагинов» можно безболезненно менять дизайн админки. Так как хуки можно использовать в собственных плагинах я решил создать для вас базовый код, а вы там уже точно дальше разберетесь как и что, вы же у меня умнички ).

Приступим к созданию плагина темы админки WordPress

Работать мы будем с вот таким хуком  add_action(‘admin_head’, ‘my_admin_head’). Для начала создайте на своем тестовом сайте в папке плагинов папку wp-admin-themmes и файл wp-content/plugins/wp-admin-themmes/my-admin-themes.php. В файл ложем базовый код плагина:

В общем и в целом плагин у нас теперь готов. Далее заходим в админ панель нашего сайта и активируем созданный плагин My Admin Theme. После активации созданный плагин поможет вам настроить стили админки через папку плагинов.

Создаем в папке плагина еще файл wp-admin.css и добавляем туда любой из кодов примера ниже:

Стили админки

#wp-admin-bar-site-name — Основной стиль для вывода имени сайта или ссылки на просмотр сайта в админ баре ( #wp-admin-bar-site-name).
Пробуем стиль и наблюдаем за админкой:

#adminmenuback, #adminmenuwrap — Изменение фона первого уровня меню в админке

Пробуем стили и наблюдаем за админкой WordPress:

#adminmenu ul — Второй уровень меню в админке.

Пробуем стиль и наблюдаем за админкой:

#wpwrap — Меняем фон в админке

Пробуем стиль и наблюдаем за админкой:

#footer — Меняем подвал админки WordPress.

Пример:

 

#wpbody h2 — меняем заголовки на каждой странице в админке.
Пример:

Думаю дальше сможете сами изменять, просто инспектируя те или иные элементы.

Также можно скопировать стандартные стили админки WordPress и менять их внутри платина, лежат они в папке тут: /wp-admin/css. Копируем в папку плагина и меняем админку как вам удобно.

Вот мой результат работы с созданным нами плагином:

Как поменять дизайн админки WordPress stylize wordpress adminpanel

Разработчики CMS WordPress также советуют плагин WP Admin Theme для изменения внешнего вида движка.

Еще небольшой бонус в статье:

Можно немного поменять футер в админке специальным хуком:

Код проверил, все работает. Удачи в разработке сайтов на WordPress!


Купить хостинг WordPress
/* Репетитор по wordpress
Услуги репетитора онлайн. Список курсов которые я веду
  • Базовый курс по веб-дизайну;
  • Верстка сайтов;
  • Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
  • Разработка сайтов на PHP.
Подробнее читайте на странице репетитор по WordPress
*/

Николаенко Максим

Директор веб-студии ProGrafika. Занимаюсь разработкой, дизайном и продвижением веб-сайтов. Всегда рад новым читателям блога и хорошим клиентам.


Вам может также понравиться...

комментария 2

  1. Developer:

    Спасибо за статью, вы очень помогли. А возможно ли поменять html код админки?

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

      Как вариант можно искать в сторону хуков WordPress, но только в английском интернете. Найдете что-то полезное, кидайте или если найдете что-то что не поняли, но это 100% работает, будем разбираться вместе. Только не все подряд )

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Шаблоны для WordPress
Самый лучший хостинг в Украине
Стабильный хостинг для Drupal