Как поменять дизайн админки 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. В файл ложем базовый код плагина:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php /* Plugin Name: My Admin Theme Plugin URI: https://wp-admn.com.ua/my-admin-theme Description: My WordPress Admin Theme - Upload and Activate. Author: Ms. WordPress Version: 1.0 Author URI: https://wp-admin.com */ function my_admin_head() { echo '<link rel="stylesheet" type="text/css" href="' .plugins_url('wp-admin.css', __FILE__). '">'; } add_action('admin_head', 'my_admin_head'); ?> |
В общем и в целом плагин у нас теперь готов. Далее заходим в админ панель нашего сайта и активируем созданный плагин My Admin Theme. После активации созданный плагин поможет вам настроить стили админки через папку плагинов.
Создаем в папке плагина еще файл wp-admin.css и добавляем туда любой из кодов примера ниже:
Стили админки
#wp-admin-bar-site-name — Основной стиль для вывода имени сайта или ссылки на просмотр сайта в админ баре ( #wp-admin-bar-site-name).
Пробуем стиль и наблюдаем за админкой:
|
1 2 3 4 5 |
#wp-admin-bar-site-name{ background-color: #616c6e!important; background: -moz-linear-gradient(bottom,#616c6e,#B0C4DE); background: -webkit-gradient(linear,left bottom,left top,from(#616c6e),to(#B0C4DE)); } |
#adminmenuback, #adminmenuwrap — Изменение фона первого уровня меню в админке
Пробуем стили и наблюдаем за админкой WordPress:
|
1 2 3 4 5 |
#adminmenuback, #adminmenuwrap{ background-color: #dbe8f8!important; background: -moz-linear-gradient(bottom,#dbe8f8,#fff); background: -webkit-gradient(linear,left bottom,left top,from(#dbe8f8),to(#fff)); } |
Пробуем стиль и наблюдаем за админкой:
|
1 2 3 4 5 |
#adminmenu ul { background-color: #dbe8f8!important; background: -moz-linear-gradient(bottom,#dbe8f8,#fff); background: -webkit-gradient(linear,left bottom,left top,from(#dbe8f8),to(#fff)); } |
Пробуем стиль и наблюдаем за админкой:
|
1 2 3 4 5 |
#wpwrap { background-color: #E4F0FE!important; background: -moz-linear-gradient(bottom,#E4F0FE,#B0C4DE); background: -webkit-gradient(linear,left bottom,left top,from(#E4F0FE),to(#B0C4DE)); } |
Пример:
|
1 2 3 4 5 6 |
#footer { background-color: #E4F0FE!important; background: -moz-linear-gradient(bottom,#E4F0FE,#B0C4DE); background: -webkit-gradient(linear,left bottom,left top,from(#E4F0FE),to(#B0C4DE)); padding:30px; } |
#wpbody h2 — меняем заголовки на каждой странице в админке.
Пример:
|
1 2 3 4 |
#wpbody h2{ font-size:25px; color:#8b2010 !important; } |
Думаю дальше сможете сами изменять, просто инспектируя те или иные элементы.
Также можно скопировать стандартные стили админки WordPress и менять их внутри платина, лежат они в папке тут: /wp-admin/css. Копируем в папку плагина и меняем админку как вам удобно.
Вот мой результат работы с созданным нами плагином:
Разработчики CMS WordPress также советуют плагин WP Admin Theme для изменения внешнего вида движка.
Еще небольшой бонус в статье:
Можно немного поменять футер в админке специальным хуком:
|
1 2 3 4 5 |
function remove_footer_admin () { echo 'Уроки WordPress <a href="https://wp-admin.com.ua">wp-admin.com.ua</a> (с) 2012'; } add_filter('admin_footer_text', 'remove_footer_admin'); |
Код проверил, все работает. Удачи в разработке сайтов на WordPress!
/*
- Базовый курс по веб-дизайну;
- Верстка сайтов;
- Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
- Разработка сайтов на PHP.
Спасибо за статью, вы очень помогли. А возможно ли поменять html код админки?
Примеры находил, но они были сделаны на javascript, думаю,
что не стоит исходные коды менять. При изменении кода основного можно потерять свой шаблон админки, когда обновиться движок.
Как вариант можно искать в сторону хуков WordPress, но только в английском интернете. Найдете что-то полезное, кидайте или если найдете что-то что не поняли, но это 100% работает, будем разбираться вместе. Только не все подряд )