Возвращаем разделители меню в админке в WordPress

При появлении обновленной админки WordPress, не все были рады внесенным новшествам. Лично нам нравится новый минималистичный стиль. Единственная вещь, которой очень не хватало, это отсутствие в сайдбаре админки визуальных разделителей различных разделов WordPress.

В сегодняшней статье мы покажем вам, как вернуть эти самые разделители с помощью нескольких строк кода и исследования CSS бекенда.

Находим стили

Разделители, которые мы попытаемся вернуть, не совсем исчезли — они просто стали прозрачными. Кликаем правой кнопкой мыши в пустом месте между Комментарии and Внешний вид и исследуем этот элемент.

Вы увидите исходный код HTML. Меню — это элементы ul с li для каждого меню.

Откройте ul id=»adminmenu» role=»navigation». Вы увидите все элементы меню, обернутые в li, но также там будет и li между ними. Когда вы кликните по нему, вы увидите стили, и заметите соответствующий код CSS для этого элемента.

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

Это стили нашего разделителя. Именно его нам и нужно изменить.

Добавляем собственные стили CSS в бекенд

Теперь мы напишем функцию для перехвата для наших стилей CSS в бекенде WordPress.

Добавьте следующий код в файл functions.php вашей темы или в плагин для сайта WordPress:

function devise_separators() {

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

Первая часть определяет функцию, а хук add_action добавит ее в хидер админки WordPress. В середине мы добавить вывод нашего кода CSS.

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

Если вы теперь обновите страницу, ваши разделители станут цвета #444 — серого. Мы также изменили отступ разделителя, потому как, по нашему мнению, ему необходимо дополнительное выравнивание.

Подгоняем цвета под стандартные темы WordPress

Если вы — перфекционист, то вы заметите, что эти цвета подходят только к дефолтной черной и синей темам WordPress. Давайте сделаем так, чтобы цвета соответствовали выбранной теме админки.

Тег body в WordPress содержит множество полезных классов для определения различных вариантов. Если вы присмотритесь внимательней, то заметите класс цветовой схемы. Схема по умолчанию называется admin-color-fresh.

Попробуйте изменить вашу схему в разделе “Пользователи” > “Ваш профиль” и вы увидите как изменится класс. С этим доступным нам классом мы можем назначить каждой цветовой схеме свой собственный цвет разделителя. Просто добавьте название класса в начале вашего кода css, например .admin-color-fresh #adminmenu li.wp-menu-separator {background: #444;}.

Ниже приводим код со всем доступными цветовыми схемами и соответствующими разделителями:

function devise_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', 'devise_separators' );

Бонус

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

Плагин

Вышеприведенный код был выделен в отдельный плагин, чтобы быстро добавить его в новые установки движка. Если он вам также необходим, то скачать его можно из официального репозитория плагинов WordPress.

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.