Изменить css стили в админке wordpress (например, скрыть часть меню)

Привет!

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

Как изменить меню в админке WordPress

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

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

Первый способ (как изменить css в админке wordpress)

Он осуществляется через вставку вашего css через правильное событие (action /  filter hook, экшн или фильтр хук) в формате плагина или в файл functions.php вашей темы.

Плюсы:

  • вы можете скрыть любые элементы
  • вы можете изменить стили элементов
  • этот способ проще в осуществлении и понимании

Минусы:

  • вы не можете переименовать какой-то пункт меню или админбара (это полоска админ. меню вверху окна)
  • вы не можете запретить пользователям доступ ко скрытым пунктам меню (вы можете скрыть только кнопки, но по прямой ссылке по прежнему все разделы будут доступны)

Как это делается?

Вам понадобится следующий код...

function gb_custom_css_admin()
{
 // чтобы отображать эти стили только рядовым пользователям, раскомментируйте строку ниже и строку в конце кода
 // можно также изменить user на admin, чтобы отображать код наоборот только администраторам
 // if( current_user_can( 'user' ) ):

 echo PHP_EOL . '<style type="text/css">
 /* Ваши любые стили ниже */
  
  /* Например, скрыть пункт меню "Консоль" */
  #menu-dashboard {
   display: none;
  }

 /* Ваши любые стиле выше */
</style>' . PHP_EOL;

 // endif;
}
add_action('admin_head', 'gb_custom_css_admin');

Этот вам необходимо вставить в файл functions.php вашей активной темы (это проще) или же оформить в виде плагина, если вы умеете (это немного сложнее для новичка, я опишу эту тему в одной из следующих статей).

Чтобы скрыть любой элемент, нам нужно:

  • открыть страницу, где он присутствует
  • правой кнопкой (в браузере Chrome) кликнуть по нужному элементу и выбрать в появившемся меню пункт "Проверить элемент" (или открыть "инспектор" в любом другом браузере)
  • найти какой-то уникальный (неповторяющийся) идентификатор (обычно это id, а иногда class) для этого элемента и скопировать его
  • в нашем коде выше изменить #menu-dashboard на ваш найденный #id или .class
  • сохранить изменения

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

Например, мы может пробежаться по id в основном меню: Записи - #menu-posts, Медиафайлы - #menu-media, Страницы - #menu-pages и так далее. Или, еще пример, id знакомой вам надписи "Привет, (ваше имя)" в правом верхнем углу - #wp-admin-bar-my-account.

Таким образом вы можете скрыть или изменить любые стили практически любого элемента в админке вордпресс.

Второй способ (редактирование админки WordPress)

Второй способ предполагает активное использование документации WordPress для того, чтобы редактировать разные элементы интерфейса. Мы ищем различные события, к которым можно привязать свои функции, и с помощью PHP кода творим различные изменения в админке.

Плюсы:

  • вы можете менять названия разделов и подпунктов меню и многих других элементов
  • вы можете менять порядок разделов меню
  • вы можете блокировать доступ к разным разделам админ-панели WordPress

Минусы:

  • этот способ требует вложения времени и умения искать нужные события (action и filter) в документации wordpress, на форумах и блогах разработчиков

Как его использовать?

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

В этой заметке опишу пару примеров, чтобы вы могли представить о чем идет речь.

Вот этот код меняет название раздела Записи и его подразделов:

function gb_post_menu_labels()
{
 global $menu;
 global $submenu;
 
 $menu[5][0] = 'Контакты';
 $submenu['edit.php'][5][0] = 'Контакты';
 $submenu['edit.php'][10][0] = 'Добавить контакт';
 
 // изменить имя подраздела Записи - Рубрики
 $submenu['edit.php'][15][0] = 'Категории';

 // изменить имя подраздела Записи - Метки
 $submenu['edit.php'][16][0] = 'Свойства';
}
add_action( 'admin_menu', 'gb_post_menu_labels' );

А вот этот код, меняет различные названия элементов внутри раздела "Записи". То есть заголовок, кнопки, ссылки и так далее. Можете проверить у себя, вставить его в functions.php вашей темы.

function gb_post_submenu_labels()
{
 global $wp_post_types;
 
 $labels = &$wp_post_types['post']->labels;
 $labels->name = 'Контакты';
 $labels->singular_name = 'Контакт';
 $labels->add_new = 'Добавить новый';
 $labels->add_new_item = 'Добавить новый контакт';
 $labels->edit_item = 'Редактировать контакт';
 $labels->new_item = 'Контакт';
 $labels->view_item = 'Просмотреть контакт';
 $labels->search_items = 'Искать контакты';
 $labels->not_found = 'Контактов нет';
 $labels->not_found_in_trash = 'Контактов в корзине нет';
}
add_action( 'init', 'gb_post_submenu_labels' );

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

Богдан

[ Прочитайте комменты ниже или напишите свой... ]

Ищете хостинг для своего сайта? Могу порекомендовать свой (нажмите здесь)

Один отзыв к “Изменить css стили в админке wordpress (например, скрыть часть меню)”

  1. Юлия 15.06.2016 в 09:19 #

    Спасибо огромное! То, что надо! )