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

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

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

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

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

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

<?php // phpcs:disable
/**
 * Collapse ADMIN-BAR (Toolbar) into left-top corner.
 *
 * @version 1.0.1
 */
final class Kama_Collapse_Toolbar {

	public static function init(): void {
		add_action( 'admin_bar_init', [ __CLASS__, 'hooks' ] );
	}

	public static function hooks(): void {
		// remove HTML margin bumps
		remove_action( 'wp_head', '_admin_bar_bump_cb' );
		add_action( 'wp_head', [ __CLASS__, 'collapse_styles' ] );
	}

	public static function collapse_styles(): void {
		// do nothing for admin-panel.
		// Remove this if you want to collapse admin-bar in admin-panel too.
		if( is_admin() ){
			return;
		}

		ob_start();
		?>
		<style id="kama_collapse_admin_bar">
			#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); }

			/* the color of the main icon */
			#wp-admin-bar-<?= is_multisite() ? 'my-sites' : 'site-name' ?> .ab-item:before{ color:var(--color-accent, #797c7d); }

			/* hide wp-logo */
			#wp-admin-bar-wp-logo{ display:none; }
			/* #wp-admin-bar-search{ display:none; } */

			/* edit for twentysixteen */
			body.admin-bar:before{ display:none; }

			/* for admin panel --- */
			@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; }
			}

			/* Gutenberg */
			#wpwrap .edit-post-header{ top:0; }
			#wpwrap .edit-post-sidebar{ top:56px; }
		</style>
		<?php
		$styles = ob_get_clean();

		echo preg_replace( '/[\n\t]/', '', $styles ) ."\n";
	}

}

Теперь нужно скопировать этот код в файл, подключить этот файл в functions.php и запустить класс так:

Kama_Collapse_Toolbar::init();

Ещё один вариант:

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

<?php // phpcs:disable
/**
 * Vesrion: 1.1.1
 */

Collapse_Admin_Bar::init();

final class Collapse_Admin_Bar {

	public static function init(): void {
		add_action( 'admin_bar_init', [ __CLASS__, 'hooks' ] );
	}

	public static function hooks(): void {
		// remove html margin bumps
		remove_action( 'wp_head', '_admin_bar_bump_cb' );

		add_action( 'wp_enqueue_scripts', [ __CLASS__, 'collapse_styles' ] );
	}

	public static function collapse_styles(): void {
		$styles = <<<CSS
			#wpadminbar {
				transition: clip-path .3s ease 1s, background-color .2s ease 1s;
				clip-path: polygon(0 0, 32px 0, 32px 100%, 0 100%);
			}

			#wpadminbar:not( :hover ) {
				background-color: rgba(29, 35, 39, 0);
			}

			#wpadminbar:not( :hover ) .ab-item::before {
				color: #1d2327;
				transition-delay: 1s;
			}

			#wpadminbar .ab-item {
				position: relative;
			}

			#wpadminbar #wp-admin-bar-site-name > .ab-item::after {
				content: '';
				position: absolute;
				top: 7px;
				left: 7px;
				z-index: -1;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: #fff;
				opacity: .8;
				transition: opacity .2s ease 1s;
			}

			#wpadminbar:hover #wp-admin-bar-site-name > .ab-item::after {
				opacity: 0;
				transition-delay: 0s;
			}

			#wpadminbar:not( :hover ) > * {
				pointer-events: none;
			}

			#wpadminbar:hover {
				transition-delay: 0s;
				clip-path: polygon(0 0, 100% 0, 100% 100vh, 0 100vh);
			}

			@media screen and ( max-width: 782px ) {
				#wpadminbar {
					clip-path: polygon(0 0, 50px 0, 50px 100%, 0 100%);
				}
			}
			CSS;

		wp_register_style( 'collapse-admin-bar', false ); // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion
		wp_add_inline_style( 'collapse-admin-bar', $styles );
		wp_enqueue_style( 'collapse-admin-bar' );
	}

}

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

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

/**
 * Удаление основных элементов (ссылок) из панели инструментов (Admin Bar, Toolbar).
 */
add_action( 'add_admin_bar_menus', 'kama_remove_default_wp_menu_items', 0 );
function kama_remove_default_wp_menu_items() {
	/**
	 * Для полного списка доступных элементов:
	 * @see WP_Admin_Bar::add_menus()
	 * @see https://wp-kama.com/note/removing-basic-elements-links-from-the-toolbar
	 */
	$remove_wp_menus_items = [
		/** Логотип WordPress (со ссылками). {@see wp_admin_bar_wp_menu()} */
		'wp_admin_bar_wp_menu',
		/** Customizer. {@see wp_admin_bar_customize_menu()} */
		'wp_admin_bar_customize_menu',
		/** Комментарии. {@see wp_admin_bar_comments_menu()} */
		'wp_admin_bar_comments_menu',
		/** Дополнительная группа справа (поиск и аккаунт). {@see wp_admin_bar_add_secondary_groups()} */
		'wp_admin_bar_add_secondary_groups',
	];

	foreach( $remove_wp_menus_items as $callback ){
		$priority = has_action( 'admin_bar_menu', $callback );
		if( $priority !== false ){
			remove_action( 'admin_bar_menu', $callback, $priority );
		}
	}
}

Все доступные элементы меню WP для удаления (для приведенного выше кода).

$remove_wp_menus_items = [
	/// Связанные с пользователем (справа).

	/** Внутренние ссылки меню профиля. {@see wp_admin_bar_my_account_menu()} */
	'wp_admin_bar_my_account_menu',
	/** Весь пункт меню профиля. {@see wp_admin_bar_my_account_item()} */
	'wp_admin_bar_my_account_item',
	/** Поиск. {@see wp_admin_bar_search_menu()} */
	'wp_admin_bar_search_menu',

	/// Связанные с сайтом

	/** Логотип WordPress (со ссылками). {@see wp_admin_bar_wp_menu()} */
	'wp_admin_bar_wp_menu',
	/** Мои сайты. {@see wp_admin_bar_my_sites_menu()} */
	'wp_admin_bar_my_sites_menu',
	/** Сайты. {@see wp_admin_bar_site_menu()} */
	'wp_admin_bar_site_menu',
	/** Редактировать сайт. {@see wp_admin_bar_edit_site_menu()} */
	'wp_admin_bar_edit_site_menu',
	/** Настроить тему. {@see wp_admin_bar_customize_menu()} */
	'wp_admin_bar_customize_menu',
	/** Обновления. {@see wp_admin_bar_updates_menu()} */
	'wp_admin_bar_updates_menu',

	/// Связанные с контентом.

	/** Комментарии. {@see wp_admin_bar_comments_menu()} */
	'wp_admin_bar_comments_menu',
	/** Добавить запись, страницу, медиафайл и т. д.. {@see wp_admin_bar_new_content_menu()} */
	'wp_admin_bar_new_content_menu',
	/** Редактировать. {@see wp_admin_bar_edit_menu()} */
	'wp_admin_bar_edit_menu',

	/// Другие.

	/** Дополнительная группа (поиск и аккаунт) справа. {@see wp_admin_bar_add_secondary_groups()} */
	'wp_admin_bar_add_secondary_groups',
];

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

См. WP_Admin_Bar::add_menus().

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

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

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

Мягкое отключение

Предположим, нам нужно отключить "Панель инструментов" в лицевой части сайта. Но при этом, нужно дать возможность плагинам, включить панель через фильтр show_admin_bar.

Для этого вставьте следующую строку в файл темы functions.php:

show_admin_bar( false );

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

На фронте и в админке:

// Отключаем админ бар во фронте
add_filter( 'show_admin_bar', '__return_false' );

// Отключаем админ бар в админ панели
remove_action( 'in_admin_header', 'wp_admin_bar_render', 0 );

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

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

add_filter( 'show_admin_bar', 'admin_bar_for_admin_only', 99 );

function admin_bar_for_admin_only( $show_admin_bar ) {

	if ( $show_admin_bar && ! current_user_can( 'manage_options' ) ) {
		$show_admin_bar = false;
	}

	return $show_admin_bar;
}

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

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

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

add_filter( 'show_admin_bar', 'admin_bar_for_admin_only', 99 );

function admin_bar_for_admin_only( $show_admin_bar ) {

	if ( $show_admin_bar && ! is_network_admin() ) {
		$show_admin_bar = false;
	}

	return $show_admin_bar;
}

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

Для добавления ссылок используется метод WP_Admin_Bar::add_menu() он же WP_Admin_Bar::add_node(). Добавление нужно делать на хуке admin_bar_menu.

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

// Добавляет ссылку в админ бар
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://example.com',
	) );

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

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

Чтобы изменить положение всего блока ссылок, пункта (поставить его до или после какого-то блока), измените число 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 );
}

Для этого в параметре title нужно добавить HTML тег dashicons, а также дополнительно к его классам добавить класс ab-icon. Рассмотрим такой пример:

add_action( 'admin_bar_menu', 'add_toolbar_link', 70 );

function add_toolbar_link( $wp_admin_bar ){

	$wp_admin_bar->add_menu( [
		'id'    => 'chartlink',
		'title' => '<span class="ab-icon dashicons-visibility" style="top:2px"></span><span class="ab-label">Views</span>',
		'href'  => '#',
	] );
}

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

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

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

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

/**
 * toolbar nav menu - навигационное меню в тулбаре
 * v0.3
 */
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 = [
			'parent' => $item->menu_item_parent ? 'id_' . $item->menu_item_parent : false,
			'id'     => 'id_' . $item->ID,
			'title'  => $item->title,
			'href'   => $item->url,
			'meta'   => [
				// '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,
			],
		];

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

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

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