Відновлюємо роздільники меню у Консолі WordPress

Не всім подобаються зміни, які відбулися в адмінці WordPress. Хоча і такий мінімалізм має свої плюси, все ж таки не вистачає поділу різних областей у бічній панелі в консолі wordpress. І сьогодні йтиметься про те, як повернути роздільники, які були присутні до версії WordPress 3.8.

А саме – як перевірити бекенд CSS та повернути роздільники за допомогою кількох рядків коду.

Дивіться також:

• Як налаштувати Консоль WordPress для зручнішого користування
• Як видалити непотрібні пункти меню в адмінці на WordPress
• Змінюємо колірну схему в Консолі WordPress - 10 безкоштовних плагінів
• 17 тем оформлення для вашої Консолі WordPress

Знаходимо потрібні стилі

Розділювачі, які ми відновлюватимемо в адмінці, насправді нікуди не зникли, вони просто невидимі. Клацніть правою кнопкою мишки на порожню область між пунктами меню Коментарі и Зовнішній вигляд і відкрийте вихідний код за допомогою інструмента Inspect elements у вашому браузері.

Ви побачите HTML код, у якому будуть ul-елементи та li-елементи для кожного пункту меню.

Відкрийте ul id="adminmenu" role="navigation". Перед вами всі пункти меню з li-елементами та код li class="wp-menu-separator" між ними. Коли ви натиснете на нього, побачите стилі і CSS для цього елемента.

#adminmenu li.wp-menu-separator {
    background:   transparent;
    border-color: transparent;
}

Це стиль роздільника, який потрібно змінити.

Додаємо потрібний код до CSS

Додати цей код functions.php у файл вашої теми:

function tutsplus_separators() {

}
add_action( 'admin_head', 'tutsplus_separators' );

Перша частина визначає функцію, а зачіпка add_action додасть її до шапки адмінки WordPress. У середині коду ми додамо нудьгувати, щоб розмістити наш власний CSS-код:

function tutsplus_separators() {
  echo '<style type="text/css">#adminmenu li.wp-menu-separator {margin: 0; background: #444;}</style>';
}
add_action( 'admin_head', 'tutsplus_separators' );

Якщо ви перезавантажите адмінку, то роздільники будуть сірого кольору (код #444).

Змінюємо стандартні колірні схеми WordPress

Ви могли помітити, що цей колір підходить лише для стандартного чорного та блакитного стилю адмінки WordPress. Погляньмо, як можна змінити їх на нові колірні схеми.

Тег тіло має багато класів, один з яких відповідає за колірні схеми та за умовчанням він називається admin-color-fresh.

Спробуйте змінити стиль оформлення консолі через меню Користувачі → Ваш профіль і ви побачите, як зміниться клас. Тепер можна змінити колір роздільника. Для цього потрібно додати назву класу перед css-кодом таким чином:

.admin-color-fresh #adminmenu li.wp-menu-separator {background: #444;}

Нижче наведено код з усіма стилями кольорів для роздільників:

function tutsplus_separators() {
   echo '<style type="text/css">
        #adminmenu li.wp-menu-separator {margin: 0;}
        .admin-color-fresh #adminmenu li.wp-menu-separator {background: #444;}
        .admin-color-midnight #adminmenu li.wp-menu-separator {background: #4a5258;}
        .admin-color-light #adminmenu li.wp-menu-separator {background: #c2c2c2;}
        .admin-color-blue #adminmenu li.wp-menu-separator {background: #3c85a0;}
        .admin-color-coffee #adminmenu li.wp-menu-separator {background: #83766d;}
        .admin-color-ectoplasm #adminmenu li.wp-menu-separator {background: #715d8d;}
        .admin-color-ocean #adminmenu li.wp-menu-separator {background: #8ca8af;}
        .admin-color-sunrise #adminmenu li.wp-menu-separator {background: #a43d39;}
         </style>';
}
add_action( 'admin_head', 'tutsplus_separators' );

Бонус

Якщо ви хочете зробити роздільні лінії між кожним пунктом меню, спробуйте змінити налаштування у menu-top класі з елементами li, border-bottom та border-top.

Джерело: code.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/