При небольших разрешениях сайта в 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 своей темы:
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');
Заходим в телефон и любуемся полученным результатом:
Если на мобильной версии сайта нужно скрыть какие-то другие иконки, то из стиля ниже выбираем нужные. Или скрываем все сразу:
display: none !important;
}
