Удобное скрытие административной панели (Admin Toolbar) в WordPress
Часто административная панель в WordPress мешает дизайну сайта, особенно когда она расположена вверху на экране. Это может создавать неудобства при прокрутке или при наличии других плавающих панелей. В таких случаях стоит подумать о том, как сделать эту панель более удобной в использовании.
Одним из универсальных решений является возможность сворачивать панель. Это позволит избежать её вмешательства, когда она не нужна.
Я пробовал различные плагины, но многие из них оказались слишком сложными. Поэтому я решил написать собственный код, который делает панель сворачиваемой. В некоторых случаях это оказывается очень удобно, так как панель не только не мешает, но и может вмещать больше элементов.
Как это работ��ет
Панель появляется, когда вы наводите курсор на иконку в верхнем левом углу, и отображается в вертикальном виде, а не горизонтальном. Вот как это выглядит на теме Twenty Twenty-One:
Код для сворачивания панели
Чтобы применить это решение, вам нужно вставить следующий код в файл functions.php вашей темы:
<?php
/**
- Сворачивает ADMIN-BAR (панель инструментов) в верхний левый угол.
-
@version 1.0
*/
final class Kama_Collapse_Toolbar {public static function init(){
add_action( 'admin_bar_init', [ CLASS, 'hooks' ] );
}public static function hooks(){
// убираем отступы панели remove_action( 'wp_head', '_admin_bar_bump_cb' ); add_action( 'wp_head', [ __CLASS__, 'collapse_styles' ] );}
public static function collapse_styles(){
// ничего не делаем для административной панели. // Уберите это, если хотите сворачивать панель и в админке. if( is_admin() ){ return; } ob_start(); ?>}
}
Kama_Collapse_Toolbar::init();
Альтернативный простой вариант реализации
Если вы хотите использовать другой, более простой вариант, вы можете вставить следующий код:
<?php
/**
- Версия: 1.0
*/
add_action( 'init', [ Collapse_Admin_Bar::class, 'init' ] );
final class Collapse_Admin_Bar {
public static function init(): void {
add_action( 'admin_bar_init', [ __CLASS__, 'hooks' ] );
}
public static function hooks(): void {
// убираем отступы панели
remove_action( 'wp_head', '_admin_bar_bump_cb' );
add_action( 'wp_enqueue_scripts', [ __CLASS__, 'collapse_styles' ] );
}
public static function collapse_styles(): void {
$styles = << .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 );
wp_add_inline_style( 'collapse-admin-bar', $styles );
wp_enqueue_style( 'collapse-admin-bar' );
} }
Вставьте этот код в functions.php, или создайте из него плагин, если часто меняете шаблоны.
Дополнительные замечания
Для того чтобы код работал, в функции footer.php вашей темы должна вызываться функция wp_footer().
Теперь вы знаете, как сделать административную панель более удобной и аккуратной, что поможет вам лучше управлять вашим контентом в WordPress!