WordPress上部に表示されるツールバーを消したい場合のまとめ

WordPress上部に表示されるツールバーを消したい場合のまとめ

WordPressではページ上部にツールバー(管理バー、adminバー等とも)と呼ばれるものが表示されています。
記事とダッシュボード間の移動を行いやすくしたり、プラグインの更新状況等を見やすくする利点を持つこのツールバーですが、上部に固定させるナビゲーションメニューやページ上部に表示させているサイトロゴが隠れてしまったりと何かと邪魔になるのも事実。

今回はこのツールバーを非表示にする事でサイト更新の利便性を高める方法をまとめます。

ツールバー(管理バー)とは

WordPressでサイト編集、記事作成をする際にページの最上部に固定で現れるメニューバーです。
サイトの表示やWordPressの更新情報、記事に対するコメントの通知だけでなく、プラグインによってはサイトの統計情報等も表示することが可能です。
便利な点の多いツールではあるのですが、上記でも触れた通り

・スクロールで上部に固定されるメニューを作ったがツールバーで隠れてしまい挙動を確認できない。
・ページ情報でお知らせ情報を表示させているのにツールバーで隠れてしまって確認ができない。

と、制作時に時折邪魔になることがあります。

なお、ワードプレスにログインしていない人が普通にサイトに訪れる場合は、このツールバーは表示されていません。
当たり前ですけどね。

ツールバーを非表示にする方法

ツールバーをサイト上部から削除する方法はいろいろとありますが、簡単で分かりやすい順にまとめていきます。
基本的にどの方法でもよいかと思いますが、サイトの特性や更新者の技量などで使い分けてみてください。

プロフィールから表示させない設定にする

もっとも簡単な方法は、ダッシュボードの「ユーザー」⇒「あなたのプロフィール」からツールバーの設定を変更する方法です。

個人設定のツールバーで「サイトを見る時にツールバーを表示する」という項目のチェックを外すことで表示のオンオフが可能です。

複数人でサイトを更新していて、自分だけツールバーを非表示にしたい場合に向いている方法です。
人によって表示を切り替えることができるので、操作に慣れていない人やライターさん向けには出しておく、コーダーさんは消すといった事が可能です。

もちろん個人で運用している場合もこの方法で問題はありません。

functions.phpに記述を追加して非表示

functions.phpに


add_filter('show_admin_bar', '__return_false');

を追加で記述してあげることでツールバーを削除することもできます。
functions.phpを触ることになるものの、cssで非表示にする方法より手間が少ないのでユーザー全員分を非表示にする場合はこの方法を取るのが手っ取り早いです。

コピペで導入可能ですので、functions.phpの最後に追加してください。

CSSで非表示設定にする

あえてCSSで削除する必要もありませんが、ツールバーをdisplay:none;にして消すことも可能です。
id=”wpadminbar”がツールバーですので

#wpadminbar{
display:none;
}

としてやることで表示させないこともできます。
ただ、上記の記述だけですとツールバー分ページ上部に空きができてしまうので、htmlに付いているmargin-topも消してやる必要があります。

wp-include内のadmin-bar.phpにmargin-topを指定する記述がありますので、ここを0に書き換えることで上部の空白を消すことが可能です。

いざ元に戻そうとした時にどこを変更したかとか忘れちゃいそうなのであまりお勧めはしませんが、functions.phpに関数を記述する方法とは違いhtmlとcssの知識があればできますので、php絶対書きたくない!でも全員分一気にツールバーを消したい!という場合は使ってみてもいいかも、しれません。

消したらダッシュボードに戻れなくなった!

ツールバーを削除する事で起こる問題として、ダッシュボードに戻れなくなるというデメリットがあります。

対処方法として

① ダッシュボードをお気に入り登録しておく
② サイトのURLに/wp-admin/を入れて遷移する

といった方法がありますので使いやすい方法でダッシュボードへ戻ってください。

まとめ

ということでツールバーを非表示にする方法でした。

普段は特に気にならないツールバーですが、ここぞのタイミングで邪魔になるんですよね。
ユーザーごとに切り替えたいなら個人設定から、一律で消してしまいたいならfunctions.phpから非表示にできると覚えておけばすぐに対応できると思います。
試してみてください。

対応方法カテゴリの最新記事