Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

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

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

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

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

Ви побачите 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
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 1

Костянтин:

Це працює. Проте незрозуміло. Чому зміни адмінки робляться у темі фронтенду?

Додати коментар або відгук