WordPress как на ладони
Наставник Трепачёв Д.П., phphtml.net wordpress jino

11 хаков для Админ-бара WordPress (тулбара)

C версии 3.1 в WordPress появился «Админ бар» (admin bar), задача которого была предоставить быстрый доступ к страницам админ-панели. А с версии 3.3 он немного изменил свое назначение и стал называться «Панель инструментов» (toolbar или тулбокс). Внешне и в коде ничего не поменялось, изменился подход: теперь он стал полностью поддерживать внешнюю часть сайта (фронт-энд). А когда не было этой панели инструментов мне её очень не хватало и я даже написал один из первых плагинов.

В этой заметке я соберу разные приёмы, для изменения этой панели инструментов (тулбара, админ бара): добавление, изменение, удаление элементов и т.д.

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

Для вставки кодов можно воспользоваться неплохим плагином: Code Snippets

Удобное скрытие панели инструментов

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

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

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

Вот так это выглядит на теме twentysixteen:

Скрытие админ бара

А вот код, который делает такие преобразования:

/**
 * Сollapse ADMIN-BAR (Toolbar) into left-top corner
 * v 0.7
 */
add_action('admin_bar_init', function(){
	remove_action('wp_head', '_admin_bar_bump_cb'); // html margin bumps
	add_action('wp_before_admin_bar_render', 'kama_adminbar_styles');
	//add_action('wp_after_admin_bar_render', 'set_adminbar_styles_show');
});
function kama_adminbar_styles(){
	// Выходим если админка, можно закомментить...
	if( is_admin() ) return;

	echo preg_replace('/[\n\t]/','','
	<style>
		#wpadminbar{ background:none; float:left; width:auto; height:auto; bottom:0; min-width:0 !important; }
		#wpadminbar > *{ float:left !important; clear:both !important; }
		#wpadminbar .ab-top-menu li{ float:none !important; }
		#wpadminbar .ab-top-secondary{ float: none !important; }
		#wpadminbar .ab-top-menu>.menupop>.ab-sub-wrapper{ top:0; left:100%; white-space:nowrap; }
		#wpadminbar .quicklinks>ul>li>a{ padding-right:17px; }
		#wpadminbar .ab-top-secondary .menupop .ab-sub-wrapper{ left:100%; right:auto; }
		html{ margin-top:0!important; }

		#wpadminbar{ overflow:hidden; width:33px; height:30px; }
		#wpadminbar:hover{ overflow:visible; width:auto; height:auto; background:rgba(102,102,102,.7); }

		/* цвет главной иконки */
		#wp-admin-bar-'.( is_multisite() ? 'my-sites' : 'site-name').' .ab-item:before{ color:#797c7d; }

		/* прячем wp-logo */
		#wp-admin-bar-wp-logo{ display:none; }
		/* #wp-admin-bar-search{ display:none; } */

		/* правка для twentysixteen */
		body.admin-bar:before{ display:none; }

		/* Когда работает в админке. Для админки */
		@media screen and ( min-width: 782px ) {
			html.wp-toolbar{ padding-top:0 !important; }
			#wpadminbar:hover{ background:rgba(102,102,102,1); }
			#adminmenu{ margin-top:48px !important; }
		}
	</style>')."\n";
}

Вставлять этот код нужно в functions.php или оформите из него плагин, если часто меняете шаблоны...

к началу

Удаление базовых элементов (ссылок) из тулбара

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

## Удаление базовых элементов (ссылок) из тулбара
add_action('add_admin_bar_menus', function(){
	/* доступно для удаления:

	remove_action( 'admin_bar_menu', 'wp_admin_bar_my_account_menu', 0 );  // Внутренние ссылки меню профиля
	remove_action( 'admin_bar_menu', 'wp_admin_bar_search_menu', 4 );      // поиск
	remove_action( 'admin_bar_menu', 'wp_admin_bar_my_account_item', 7 );  // Полностью меню профиля

	// Связанное с сайтом
	remove_action( 'admin_bar_menu', 'wp_admin_bar_sidebar_toggle', 0 );   // 
	remove_action( 'admin_bar_menu', 'wp_admin_bar_wp_menu', 10 );         // WordPress ссылки (WordPress лого)
	remove_action( 'admin_bar_menu', 'wp_admin_bar_my_sites_menu', 20 );   // мои сайты
	remove_action( 'admin_bar_menu', 'wp_admin_bar_site_menu', 30 );       // сайты
	remove_action( 'admin_bar_menu', 'wp_admin_bar_customize_menu', 40 );  // настроить тему
	remove_action( 'admin_bar_menu', 'wp_admin_bar_updates_menu', 50 );    // обновления

	// Content related.
	if ( ! is_network_admin() && ! is_user_admin() ) {
		remove_action( 'admin_bar_menu', 'wp_admin_bar_comments_menu', 60 );    // комментарии
		remove_action( 'admin_bar_menu', 'wp_admin_bar_new_content_menu', 70 ); // новые комментарии
	}
	remove_action( 'admin_bar_menu', 'wp_admin_bar_edit_menu', 80 ); // редактировать

	remove_action( 'admin_bar_menu', 'wp_admin_bar_add_secondary_groups', 200 ); // вся дополнительная группа (поиск и аккаунт) расположена справа в меню
	*/

	// удаляем
	remove_action('admin_bar_menu', 'wp_admin_bar_customize_menu', 40); // Настроить тему
	remove_action('admin_bar_menu', 'wp_admin_bar_search_menu', 4 );    // поиск
	remove_action( 'admin_bar_menu', 'wp_admin_bar_wp_menu', 10 );      // WordPress ссылки (WordPress лого)
});

В закомментированных строках указанны те пункты панели, которые можно удалить. В этом примере удалены пункты: «Настроить», «Поиск» и основной пункт с WordPress ссылками.

к началу

Удаление/отключение панели инструментов (тулбара)

Во-первых тулбар можно отключить на странице профиля а админ-панели: Пользователи > Ваш профиль.

Отключение панели инструментов wordpress

Но когда нужно отключить глобально, используйте функцию show_admin_bar().

Примеры разных вариантов отключения:

Полностью отключаем панель

add_action('after_setup_theme', function(){
	show_admin_bar( false );
});

Отключаем тулбар для всех кроме администратора

В этом примере панель инструментов не отключается в админ-панели.

add_action('after_setup_theme', function(){
	if ( ! is_admin() && ! current_user_can('manage_options') )
		show_admin_bar( false );
});

По аналогии можно отключить панель для любой роли. Для этого вместо права 'manage_options' нужно указать подходящее право для роли, список прав смотрите здесь. Вот некоторые из них:

  • publish_posts - автор
  • edit_others_posts - редактор

Отключаем панель инструментов во внешней части сайта

add_action('after_setup_theme', function(){
	if ( ! is_admin() ) show_admin_bar( false );
});

Отключаем тулбар для администратора сети

add_action('after_setup_theme', function(){
	if ( is_network_admin() )
		show_admin_bar( false );
});

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

к началу

Удаление любых элементов (ссылок) из тулбара

Базовые элементы лучше удалять способом который описан выше (впрочем это не принципиально). А этим способом можно удалять дополнительные элементы, которые добавляет не WordPress.

Для удаления используется метод remove_menu() или remove_node() — это абсолютно одинаковые методы (алиасы).

Допустим какой-то плагин добавляет в меню элемент с ID menushka и нам нужно удалить этот элемент:

// Удаляем пункт из тулбара
add_action( 'wp_before_admin_bar_render', 'delete_item_from_toolbar', 99 );
function delete_item_from_toolbar() {
	global $wp_admin_bar;
	$wp_admin_bar->remove_menu('menushka');
}
к началу

Добавление элементов и дочерних элементов (ссылок) в тулбар

Для добавления ссылок используется метод add_menu() или add_node() — это одинаковые методы (алиасы).

Добавлять можно как ссылки верхнего уровня так и дочерние. В качестве примера давайте добавим ссылку и дочернюю ссылку в панель:

// Добавляет ссылку в админ бар
add_action( 'admin_bar_menu', 'my_admin_bar_menu', 30 );
function my_admin_bar_menu( $wp_admin_bar ) {
	$wp_admin_bar->add_menu( array(
		'id'    => 'menu_id',
		'title' => 'Внешняя ссылка',
		'href'  => 'http://site.ru',
	) );

	// дочерняя ссылка 
	$wp_admin_bar->add_menu( array(
		'parent' => 'menu_id', // параметр id из первой ссылки
		'id'     => 'some_id', // свой id, чтобы можно было добавить дочерние ссылки
		'title'  => 'Дочерняя ссылка',
		'href'   => 'http://site.ru/subpage',
	) );
}

В результате получим:

toolbar4

Чтобы изменить положение всего блока ссылок, пункта (поставить его до или после какого-то блока), измените число 30 — чем больше, тем ближе к концу.

Еще пример: дочерняя ссылка в меню сайта на страницу плагинов

// дочерняя ссылка в меню сайта на страницу плагинов
if( ! is_admin() ){
	add_action( 'admin_bar_menu', function ( $wp_admin_bar ) {
		$wp_admin_bar->add_menu( array(
			'parent' => 'site-name', // id родительского элемента
			'id'     => 'plugins_link', // свой id, чтобы можно было добавить дочерние ссылки
			'title'  => 'Плагины',
			'href'   => admin_url('plugins.php'),
		) );
	}, 100 );
}

Параметры передаваемые add_menu()

Теперь, когда принцип понятен, смотрите какие еще параметры можно передавать в add_menu( $args ):

$id(строка) (обязательный)
ID создаваемого элемента панели.
$title(строка) (обязательный)
Заголовок/анкор ссылки. Тут можно использовать HTML теги, например чтобы добавить иконку.
$href(строка) (обязательный)
УРЛ ссылки.
$parent(строка)
ID родительского элемента, к которому подбавляемый элемент должен стать дочерним.
По умолчанию: false
$group(логический)
Является ли ссылка групповой. Принадлежит ли она к какой-либо группе.
По умолчанию: false
$meta(массив)

Дополнительные данные ссылки. Доп. атрибуты тега A. Может быть:

  • html - любой HTML код или просто текст, который будет выведен сразу после тега A.
  • class - атрибут 'class'
  • rel - атрибут 'rel'
  • onclick - атрибут 'onclick'
  • target - как открывать ссылку '_blank' - в новом окне
  • title - атрибут title
  • tabindex - порядок при нажатии на клавишу TAB

По умолчанию: array()

к началу

Как узнать $id имеющегося элемента тулбара

Чтобы узнать $id имеющегося элемента панели, чтобы его удалить или чтобы добавить к нему дочерний элемент, посмотреть этот ID в исходном коде: он добавляется как суффикс в атрибут id тега LI: wp-admin-bar-{ID}:

tools

Можно еще найти элемент в коде WordPress или плагина, но это сложнее.

Убрать только отступ вверху у тулбара

Чтобы панель инструментов правильно отображалась WordPress добавляет отступ в 28px к HTML и BODY тегам. Если для каких-то целей нужно этот отступ убрать, используйте такой код:

add_action('admin_bar_init', function(){
	remove_action('wp_head', '_admin_bar_bump_cb'); // html margin bumps
});

Этот вариант удаляет саму функцию, которая добавляет css стили.

Добавление произвольного меню в панель инструментов

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

Использовав следующий код мы регистрируем меню навигации wp_nav_menu и добавляем пункты из этого меню в панель инструментов.

Я написал этот код как замена своему уже устарелому плагину:

// навигационное меню в тулбаре
if(1){
	/**
	 * toolbar nav menu - навигационное меню в тулбаре
	 * v 0.2
	 */
	add_action( 'after_setup_theme', function(){
		register_nav_menu( 'toolbar', 'Панель инструментов' );
	});
	add_action( 'admin_bar_menu', 'kama_add_toolbar_menu', 999 );
	function kama_add_toolbar_menu( $toolbar ){
		$locations = get_nav_menu_locations();

		if( ! isset($locations['toolbar']) ) return;

		$items = wp_get_nav_menu_items( $locations['toolbar'] );

		if( ! $items ) return;

		foreach( $items as $item ){
			$args = array(
				'parent' => false,
				'id'     => 'id_'. $item->object_id,
				'title'  => $item->title, 
				'href'   => $item->url, 
				'meta'   => array(
					// 'html' - The html used for the node.
					// 'class' - The class attribute for the list item containing the link or text node.
					// 'rel' - The rel attribute.
					// 'onclick' - The onclick attribute for the link. This will only be set if the 'href' argument is present.
					// 'target' - The target attribute for the link. This will only be set if the 'href' argument is present.
					// 'title' - The title attribute. Will be set to the link or to a div containing a text node.
					// 'tabindex' - The tabindex attribute. Will be set to the link or to a div containing a text node. 

					'class'  => implode(' ', $item->classes ),
					'title'  => esc_attr( $item->description ),
					'target' => $item->target,
				)
			);

			if( $item->menu_item_parent )
				$args['parent'] = 'id_'. $item->menu_item_parent;

			$toolbar->add_node( $args );            
		}
	}
}

Как это работает.

Добавляете код в functions.php. Затем заходите в админку: Внешний вид > Меню и создаете меню, добавляете в него любые ссылки и прикрепляете меню к области «Панель инструментов». Можно использовать несколько уровней, тогда верхний уровень будет главным в панели инструментов, а дополнительные станут выпадающим списком.

Добавление меню в панель инструментов

к началу

Ссылка на удаление записи в тулбаре

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

add_action( 'admin_bar_menu', 'kama_delete_toolbar_link', 90 );
function kama_delete_toolbar_link() {
	global $wp_admin_bar;

	if ( ! is_super_admin() || ! is_admin_bar_showing() )
		return;

	$obj = get_queried_object();

	if ( ! $obj || ! isset($obj->post_type) )
		return;

	$dellink = get_delete_post_link( $obj->ID );

	if( $dellink ){
		$wp_admin_bar->add_menu( array(
			'id'    => 'delete',
			'title' => EMPTY_TRASH_DAYS ? 'В корзину' : 'Удалить запись',
			'href'  => $dellink,
		) );
	}
}

Здесь 90 - значит после ссылки на редактирование (у неё 80).

к началу

Показывать тулбар всегда

Редкий случай, но и такое может понадобится. Этот код будет всегда показывать панель инструментов, даже когда пользователь не авторизован. Но в этом случае там будет выводиться только ссылка «Войти». Она прописана в коде. По аналогии, можете добавить туда еще какие-нибудь ссылки:

// Всегда показывать админ бар
add_filter( 'show_admin_bar', '__return_true' , 1000 );
add_action( 'admin_bar_menu', 'pjw_login_adminbar', 0 );
function pjw_login_adminbar( $wp_admin_bar) {
	if ( is_user_logged_in() )
	  return;

	$wp_admin_bar->add_menu( array(
	  'title' => 'Войти',
	  'href' => wp_login_url()
	) );

	remove_action( 'admin_bar_menu', 'wp_admin_bar_wp_menu', 10 );
}
к началу

Плагины для панели инструментов

Clicky by Yoast - интегрирует сервис веб аналитики в админ бар.

What The File - отличный плагин для изучения иерархии шаблона. Он показывает какой файл шаблона отвечает за отображение страницы на который вы находитесь в текущий момент. Информация выводится в админ баре.

Admin Bar Disabler - позволяет удалять панель для указанных ролей: белые и черные списки. Или для указанных возможностей: также возможность можно поместить в белый и черный списки. В общем это плагин тотальной настройки пока админ бара.

Все остальные плагины

Сервис: Генератор добавление пунктов в меню

11 хаков для Админ-бара WordPress (тулбара) 20 комментариев
Вопросы 3 Все
  • Почему-то не срабатывает рецепт удаления ссылок из тулбара. Хотела выбросить из пункта "Добавить" пару подпунктов, которые добавляют плагины. Не выходит. Что-то делаю неправильно или что-то устарело?

    Ответитьмесяц назад #
    • Kama4457

      Что-то не так делаешь или не усматриваешь инфа актуальная...

      Ответитьмесяц назад #
      • Да, это я делаю не то. Код подразумевает удаление родительского пункта меню, а мне нужно избавиться от пары дочерних. Прошу прощения, не сразу разобралась. Мою задачу как-нибудь можно решить?

        Ответитьмесяц назад #
        • Kama4457

          Тебе нужно узнать ID нужного пункта и удалить его как написано выше:

          // Удаляем пункт из тулбара
          add_action( 'wp_before_admin_bar_render', 'delete_item_from_toolbar', 99 );
          function delete_item_from_toolbar() {
          	global $wp_admin_bar;
          	$wp_admin_bar->remove_menu( ID );
          }
          Ответитьмесяц назад #
          • Спасибо большое, Тимур. Я, оказывается, неправильно добавляла идентификатор. Весь целиком. А нужен был только суффикс. Прошу прощения, зря приставала, надо было внимательнее читать.

            Ответитьмесяц назад #

Здравствуйте, !

Ваш комментарий