Как перенести админ панель (Admin Bar) в нижнюю часть страницы в WordPress 3.8+

Начну с того, что предложу вам взглянуть на шапку моего сайта. Как видите, при прокрутке страницы она фиксируется в ее верхней части. А на предыдущем дизайне сайта к ней еще добавлялись кнопки «поделиться в социальных сетях» при прокрутке страницы.

Представляете, что будет, если ко всему прочему добавится еще и админ панель? Такое нагромождение мне ни к чему.

Конечно, в первую очередь напрашивается вариант полностью отключить админ панель. Этот вариант мне не подходит, потому что я считаю админ панель довольно удобной вещицей. Особенно тем, что на ней есть прямая ссылка на страницу редактирования поста.

Поэтому остановимся на варианте с переносом панели в нижнюю часть страницы:

Рассмотрим два способа реализации этой возможности — правильный и простой. Простой способ будет заключаться в копировании и вставке сниппета кода «как есть» в functions.php вашей активной темы. Если такое вас устроит, то можете сразу прокрутить страницу до второго способа.

А начнем мы пожалуй с правильного способа.

Способ 1.

В чем же заключается правильность этого способа?

Данный способ будет состоять из пары шагов. Сами по себе шаги очень простые.

Шаг 1. CSS

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

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

html {
	margin-bottom: 32px !important;
}
* html body {
	margin-bottom: 32px !important;
}
#wpadminbar {
	top: auto !important;
	bottom: 0;
}
#wpadminbar .menupop .ab-sub-wrapper { /* субменю */
	bottom: 32px;
	-moz-box-shadow: 2px -2px 5px rgba(0,0,0,.2);
	-webkit-box-shadow: 2px -2px 5px rgba(0,0,0,.2);
	box-shadow: 2px -2px 5px rgba(0,0,0,.2); /* изменяем угол падения тени */
}
@media screen and ( max-width: 782px ) {
	html {
		margin-bottom: 46px !important;
	}
	* html body {
		margin-bottom: 46px !important;
	}
	#wpadminbar{
		position:fixed;
	}
	#wpadminbar .menupop .ab-sub-wrapper {
		bottom: 46px;
	}
}

Шаг 2. Удаление блока CSS стилей админ панели по умолчанию

По умолчанию, при использовании админ панели, через wp_head() также будут подключены следующие стили:

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

Вставляем в functions.php:

add_action('get_header', 'true_remove_default_css');
 
function true_remove_default_css() {
	remove_action('wp_head', '_admin_bar_bump_cb');
}

Способ 2. Готовый сниппет для functions.php

При использовании этого способа у нас есть одно преимущество — достаточно всего лишь раскомментировать одну строчку кода — и перенос админ панель вниз страницы сработает также и в админке сайте.

/*
 * Отключение стандартных CSS в HTML-коде
 */
function my_filter_head() {
	remove_action('wp_head', '_admin_bar_bump_cb');
}
 
add_action('get_header', 'my_filter_head');
 
/*
 * CSS для прилепления админки к нижнему краю страницы
 */
function true_move_admin_bar() {
	echo '
	<style type="text/css">
	html{margin-bottom:32px !important}
	* html body{margin-bottom:32px !important}
	#wpadminbar{top:auto !important;bottom:0}
	#wpadminbar .menupop .ab-sub-wrapper{bottom:32px;-moz-box-shadow:2px -2px 5px rgba(0,0,0,.2);-webkit-box-shadow:2px -2px 5px rgba(0,0,0,.2);box-shadow:2px -2px 5px rgba(0,0,0,.2)}
	@media screen and ( max-width:782px ){
		html{margin-bottom:46px !important}
		* html body{margin-bottom:46px !important}
		#wpadminbar{position:fixed}
		#wpadminbar .menupop .ab-sub-wrapper{bottom:46px}
	}
	</style>
	';
}
 
//add_action( 'admin_head', 'true_move_admin_bar' ); // в админке
add_action( 'wp_head', 'true_move_admin_bar' ); // на сайте