Панель администратора в мобильной версии сайта

Admin CSS, WordPress Обсудить

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

Меню администратора в мобильной версии WordPress

Я иногда использую мобильную версию сайта для редактирования или правок статей. К сожалению, пункты меню в административной панели мобильной версии сайта, бесполезны для работы. А нужные мне ссылки мобильная версия скрывает.

Панель администратора в WordPress

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

Зато, если вернуть как было (почти, я немного изменил панель под себя), то слева будет название сайта, кликнув по этой ссылке, она приведет на главную страницу:

Своя панель администратора в WordPress

Иногда мне требуется зайти и отредактировать свои записи. Теперь это возможно и в мобильной версии WordPress:

Своя панель администратора в WordPress

Для восстановления ссылок из настольной версии админ шаблона, в свой файл стилей style.css добавляем следующий код:

/* Выводим своё меню в мобильной версии сайта */
@media screen and (max-width: 782px){

/* Стили отступов и размера шрифта */
#wpadminbar, #wpadminbar * {
    font-size: 13px !important;
}
#wp-admin-bar-ipstenu-account {
    margin: 0px 0px 0px 5px !important;
    }
#wp-admin-bar-mylinks1, #wp-admin-bar-mylinks2, #wp-admin-bar-mylinks3 {
    margin: 0px 0px 0px 10px !important;
}
.ab-item {
    padding: 0px 5px !important;
}
   
/* Разрешаем вывод ОБЫЧНЫХ и СВОИХ ссылок */  
#wp-toolbar>ul>li, #wpadminbar #wp-admin-bar-user-actions.ab-submenu img.avatar {
    display: block !important;
}
/* Скрыть иконку НАСТРОЙКИ САЙТА */
#wp-admin-bar-customize .ab-item {
    display: none !important;
}  
/* Скрыть иконку ОБНОВЛЕНИЯ */
#wp-admin-bar-updates .ab-item {
    display: none !important;
}
/* Скрыть иконку КОММЕНТАРИИ */
#wp-admin-bar-comments .ab-item {
    display: none !important;
}
/* Скрыть иконку ВЫЙТИ */
#wp-admin-bar-my-account .ab-item {
    display: none !important;
}  
}

/* Скрыть иконку СТРАНИЦЫ (своя ссылка) при маленьком разрешении */
@media screen and (max-width: 500px){
#wp-admin-bar-mylinks3 .ab-item {
    display: none !important;
    }
}

Каждый участок кода помечен комментариями. Некоторые участки могут вам не понадобится. Они сделаны под моё меню, но общая концепция я думаю ясна.

Панель администратора в консоли WordPress

На странице администратора WordPress эти стили работать не будут. Для админки подгружаются свои стили. Чтобы заставить работать стили выше, их нужно продублировать в файл functions.php своей темы:

function custom_css_admin() {

echo PHP_EOL . '<style type="text/css">

/* Выводим своё меню в мобильной версии сайта */
@media screen and (max-width: 782px){

/* Стили отступов и размера шрифта */
#wpadminbar, #wpadminbar * {
    font-size: 13px !important;
}
#wp-admin-bar-ipstenu-account {
    margin: 0px 0px 0px 5px !important;
    }
#wp-admin-bar-mylinks1, #wp-admin-bar-mylinks2, #wp-admin-bar-mylinks3 {
    margin: 0px 0px 0px 10px !important;
}
.ab-item {
    padding: 0px 5px !important;
}
   
/* Разрешаем вывод ОБЫЧНЫХ и СВОИХ ссылок */  
#wp-toolbar>ul>li, #wpadminbar #wp-admin-bar-user-actions.ab-submenu img.avatar {
    display: block !important;
}
/* Скрыть иконку НАСТРОЙКИ САЙТА */
#wp-admin-bar-customize .ab-item {
    display: none !important;
}  
/* Скрыть иконку ОБНОВЛЕНИЯ */
#wp-admin-bar-updates .ab-item {
    display: none !important;
}
/* Скрыть иконку КОММЕНТАРИИ */
#wp-admin-bar-comments .ab-item {
    display: none !important;
}
/* Скрыть иконку ВЫЙТИ */
#wp-admin-bar-my-account .ab-item {
    display: none !important;
}  
}

/* Скрыть иконку СТРАНИЦЫ (своя ссылка) при маленьком разрешении */
@media screen and (max-width: 500px){
#wp-admin-bar-mylinks3 .ab-item {
    display: none !important;
    }
}

</style>' . PHP_EOL;

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

Заходим в телефон и любуемся полученным результатом:

Своя панель администратора в WordPress на iPhone

Если на мобильной версии сайта нужно скрыть какие-то другие иконки, то из стиля ниже выбираем нужные. Или скрываем все сразу:

#wp-admin-bar-customize .ab-item, #wp-admin-bar-edit .ab-item, #wp-admin-bar-menu-toggle .ab-item, #wp-admin-bar-my-account .ab-item, #wp-admin-bar-my-sites .ab-item, #wp-admin-bar-new-content .ab-item, #wp-admin-bar-site-name .ab-item, #wp-admin-bar-updates .ab-item, #wp-admin-bar-wp-logo .ab-item {
    display: none !important;
}

Привет. Ты находишься на моём сайте. Я разработчик. Здесь я делюсь своими наработками и знаниями. Спрашивай в комментариях, если тебе что-то не понятно или пиши, если есть что добавить.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи: "Панель администратора в мобильной версии сайта"
Если вам нужно добавить участок кода ставьте его между тегами <code></code>