WordPress 管理バー(Adminbar) 画面下に表示する設定(Gutenberg ブロックエディタ 対応)

WordPressにログインしているときに、画面上部に表示される「管理バー(Adminbar)」ですが、ブロックエディタ(Gutenberg)を使っているときは、記事公開ボタンを押そうとマウスを持っていったときに、管理バーにマウスが乗ってしまって、公開ボタンを押すつもりが、プロフィール設定へ移動しそうになってしまいます。

公開ボタンを押したいのに、プロフィールが伸びてきてイラっ

これ、注意してマウスを操作していても、プロフィールが「ニョキッとのびてきて」記事公開のボタンを押せない、間違って書いた記事のデータを消しそうになります。(下の動画参照)

管理バー(Adminbar) 画面下に移動させれば解決するはず

これ、公開ボタンの近くのすぐ上に管理バーがあるのが良くない訳で、管理バーを画面下に表示してしまえば、解決すると気づきました。

管理バー(Adminbar) を下に表示するプラグインも多数公開されているのですが、いくつか試したら、ブロックエディタ(Gutenberg)では、うまく反映されない様子。私が試したプラグインはダメでした。

functions.phpに追記するコードも日本語のページで、たくさん紹介されていましたが、やっぱり、ブロックエディタ(Gutenberg)では、うまく反映されない。

英語の記事でうまくいく方法を見つけた

そんな中、見つけたのが、英語のこちらのページ。

ここの「Move the Admin Bar to the bottom」で紹介されているコードをfunctions.phpに追加すると、ブロックエディタ(Gutenberg)でも、管理バー(Adminbar) を下に表示することができました。

// move admin bar to bottom
function fb_move_admin_bar() { ?>
	<style type="text/css">
		body {
			margin-top: -28px;
			padding-bottom: 28px;
		}
		body.admin-bar #wphead {
			padding-top: 0;
		}
		body.admin-bar #footer {
			padding-bottom: 28px;
		}
		#wpadminbar {
			top: auto !important;
			bottom: 0;
		}
		#wpadminbar .quicklinks .menupop ul {
			bottom: 28px;
		}
	</style>
<?php }
// on backend area
add_action( 'admin_head', 'fb_move_admin_bar' );
// on frontend area
add_action( 'wp_head', 'fb_move_admin_bar' );

ちゃんと読んでいくと、プラグインになっていた

上の英語ページを良く読むと、このカスタマイズのオリジナル情報へのリンクがありまして、こちらのページでした。

この記事の最後にさらっと、書かれていたのが、こちら。

As an alternative you could also use this Plugin

えっ、プラグイン、、あるんですか?

Stick Admin Bar To Bottom プラグイン

プラグインの最終更新が7年前となっていましたが、インストール・有効化したところ、 ブロックエディタ(Gutenberg)でも、問題なく使えました。

講座 開催予定

この記事を書いた人