2020/05/25

WordPressの管理バーを非表示にする方法【5パターン紹介】

Web

こういった悩みにお答えします。

本記事の内容

• WordPressの管理バー（ツールバー）を非表示にする方法

こんにちは、mine（@mineblog7）です。

ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。

WordPressを利用したことがある人なら誰もが知っている管理バー（ツールバー）。
WordPressの管理画面にログインするとブラウザ上部に管理バーが表示されます。

上部固定の黒いバーが管理バー

管理バーはWordPressの初期設定で表示されるようになっています。
管理者がログインしているかどうかと、各種管理画面へのリンクが設置されています。

管理バーに含まれるリンク

• ダッシュボード
• テーマ編集ページ
• 投稿編集（新規）ページ
• コメント一覧ページ
• 更新ページ
• プロフィール編集
• その他プラグイン設定

非常に便利な管理バーですが、サイトのデザイン・レイアウトを確認したい時に管理バーが重なることで邪魔になるときがあります。管理バーがあることで、レイアウトがずれてしまったりして見た目の正しいチェックができないケースがあります。

このようなケースを回避するために、WordPress管理バーを非表示にする方法を紹介します。

プロフィール編集画面から管理バーを設定する

WordPressで管理画面にログインし、メニューからユーザー > あなたのプロフィールをクリックして、プロフィール編集画面を開きます。

プロフィール設定画面

個人設定画面の中の項目に、ツールバーがあるので、サイトを見るときに管理バーを表示するのチェックを外して、プロフィールを更新ボタンをクリックして反映させます。

そうすると、管理画面にログイン状態でも管理バーが非表示になります。

CSSで管理バーを非表示にする

基本的に、WordPressではフッターエリアはfooter.phpというファイルで構成されており、管理バーのHTMLは、wp_footer()によって出力されるようになっています。

強引な方法ではありますが、CSSでこの管理バーを構成する要素に対して非表示になるような記述をします。

<style>
html {
  margin-top: 0!important;
}
#wpadminbar {
  display: none;
}
</style>

footer.phpを開いて、その一番下の行に上記のCSSを記述してください。これで管理バーが非表示状態になります。

管理バーの大元の要素wpadminbarに対してdisplay: none;を指定して非表示状態にします。また、htmlタグに、デフォルトで指定されている管理バー分のマージンを打ち消すような記述をしています。

function.phpに管理バーを非表示用コードを記述する

先述したとおり、管理バーは、wp_footer()で出力されています。
今度は、フィルターフックを利用した方法として、function.phpに下記のコード記述をします。

方法1

add_filter( 'show_admin_bar', '__return_false' );

add_filterを使った方法です。

方法2

show_admin_bar( false );

show_admin_bar();を使用した方法です。こちらのほうが分かりやすいですね。

管理バーを最下部に移動させる方法

画面下部に固定されて表示されるようになります。

非表示とは意味が違いますが、通常上部に固定されている管理バーを最下部に移動させる方法も紹介します。

基本的に、CSSで非表示にする方法と同様に、下記CSSを追加すればOKです。

<style>
html {
	margin-top: 0!important;
}
#wpadminbar {
	top: unset;
	bottom: 0;
}
</style>

footer.phpを開いて、その一番下の行に上記のCSSを記述してください。

プラグインで管理権限ごとに管理バーを非表示にする方法

WordPressプラグインAdminimizeを使うことで、管理権限ごとに管理バーを非表示にしたり表示にしたりできます。

Adminimize設定手順

• プラグインAdminimizeを導入
• 設定画面を開く
• Global optionsを選択して、Admin Barにチェックを入れる

一つずつ手順を説明します。

プラグインAdminimizeを導入

管理画面からインストール

プラグイン新規追加で、Adminimizeを検索します。
検索結果が表示されたら、今すぐインストールボタンをクリックしてインストールします。

有効化する

インストールが完了したら、有効化ボタンをクリックします。
これで準備はOKです。

設定画面を開く

チェックのON/OFFで表示切り替え可

管理画面の管理メニュー > 設定 > Adminimizeをクリックすると、Adminimizeの設定画面を開けます。

Global optionsを選択して、Admin Barにチェックを入れる

いくつか項目がありますが、その中のGlobal optionsを選択（クリック）します。

チェックを入れてUpdate Optionsボタンクリックでで更新すると、管理バーを非表示にできます。このプラグインの特徴は、管理者権限ごとに管理バーの表示非表示を設定できることです。

管理者権限ごとに設定可能

• 管理者
• 編集者
• 投稿者
• 寄稿者
• 購読者

まとめ

再度、管理バーを非表示にする方法をまとめます。管理バーを非表示にする方法は大きく5つです。

管理バーを非表示にする方法5パターン

• プロフィール編集画面から管理バーを設定する
• CSSで管理バーを非表示にする
• function.phpに管理バーを非表示用コードを記述する
• 管理バーを最下部に移動させる
• プラグインで管理権限ごとに管理バーを非表示にする

自分の状況や、サイトの運用方針に従って最適な方法を採用してみてください。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の４点減点法」で面接に挑んだ結果

WordPress

• facebook
• Tweet
• hatebu
• Share
• Read Later