Як змінити дизайн адмінки WordPress

за Ніколаєнко Максим · Опубліковано Грудень 15, 2012 · Оновлено Серпень 27, 2020

Зміст приховати

1 Намагаюся запропонувати свою версію зміни зовнішнього вигляду адмінки.

2 Приступимо до створення плагіна теми адмінки WordPress

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

4 Пробуємо стилі та спостерігаємо за адмінкою WordPress:

5 Пробуємо стиль та спостерігаємо за адмінкою:

6 Пробуємо стиль та спостерігаємо за адмінкою:

7 Ось мій результат роботи зі створеним нами плагіном:

У моїй групі Вконтакті мені поставили запитання, як змінити дизайн адмінки 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. У файл кладемо базовий код плагіна:

<?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');

?>

<?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).
Пробуємо стиль та спостерігаємо за адмінкою:

#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));
}

#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:

#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));
}

#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));

}

#меню адміністратора – Другий рівень меню в адмінці.

Пробуємо стиль та спостерігаємо за адмінкою:

#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));
}

#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));

}

#wpwrap - Змінюємо фон в адмінці

Пробуємо стиль та спостерігаємо за адмінкою:

#wpwrap {
  background-color: #E4F0FE!important;
  background: -moz-linear-gradient(bottom,#E4F0FE,#B0C4DE);
  background: -webkit-gradient(linear,left bottom,left top,from(#E4F0FE),to(#B0C4DE));
}

#wpwrap {

background-color: #E4F0FE!important;

background: -moz-linear-gradient(bottom,#E4F0FE,#B0C4DE);

background: -webkit-gradient(linear,left bottom,left top,from(#E4F0FE),to(#B0C4DE));

}

#колонтитул - Змінюємо підвал адмінки WordPress.

приклад:

#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;
}

#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 - Змінюємо заголовки на кожній сторінці в адмінці.
приклад:

#wpbody h2{
  font-size:25px;
  color:#8b2010 !important;
}

#wpbody h2{

font-size:25px;

color:#8b2010 !important;

}

Думаю, далі зможете самі змінювати, просто інспектуючи ті чи інші елементи.

Також можна скопіювати стандартні стилі адмінки WordPress і міняти їх усередині платина, лежать вони в папці тут: /wp-admin/css. Копіюємо в папку плагіна і міняємо адмінку як вам зручно.

Ось мій результат роботи зі створеним нами плагіном:

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

Ще невеликий бонус у статті:

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

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');

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.

Докладніше читайте на сторінці репетитор по WordPress

Теги: налаштування адміністраторів wordpress стиль адміністраторів wordpress теми для адмінки wordpress

Ніколаєнко Максим

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

Вам також може сподобатися...

Розробник :

Грудень 16, 2012 о 6:42 ранок

Дякую за статтю, ви дуже допомогли. А чи можна змінити html код адмінки?

Відповіcти
- Уроки WordPress :
  
  Грудень 16, 2012 о 8:57 вечора
  
  Приклади знаходив, але вони були зроблені на javascript, думаю,
  що не варто вихідні коди міняти. При зміні основного коду можна втратити свій шаблон адмінки, коли оновитись двигун.
  
  Як варіант можна шукати у бік хуків WordPress, але лише в англійському інтернеті. Знайдете щось корисне, кидайте або якщо знайдете щось, що не зрозуміли, але це 100% працює, розбиратимемося разом. Тільки не всі поспіль )
  
  Відповіcти