「管理画面の上にあるバーをどうにかしたい！」
こんな方に向けて。
WordPressの管理画面に表示される「管理バー」。「ツールバー」といったりもします。
記事の作成や編集画面、メディアの追加などをする時にワンクリックで移動できるので、とても便利ですね。
通常なにも設定しない状態（デフォルト）だと、画面上部に黒い帯（←本記事ではこれを「管理バー」と言いますね！）が表示されます。
しかし、この管理バーがデザイン要素と重なってしまうケースがあります。
「ヘッダーが見えん…」「あれ、レイアウトが崩れたのかな？」といった具合にたまに問題を引きおこます（←私はこれで沼ったことある）
そこで、WordPressの管理画面で表示される「管理バーを移動 or 非表示する方法」を解説します！
やり方を真似 or コードをコピペで解決できるので、ぜひ参考にしてみてください^^
【全体像】移動・非表示にするやり方
まずは「移動」する方法です。
- 上部に余白をあける
- 下にを移動させる
お次は「非表示」にする方法。
- 管理画面の「ユーザー設定」で非表示にする
- functions.phpで非表示にする
- CSSで非表示にする
管理バーを移動する方法
まずは「移動」する方法から。
冒頭のやつをもう一度、載せます。
- 上部に余白をあける
- 下に移動させる
その１：上部に余白をあける
WordPressの管理画面では管理バーとヘッダーが重なってしまうことがあります。
上記の例では「ハンバーガーメニューと管理バーの両方が画面の最上部に固定されている」のが原因です。
つまり、ハンバーガーメニューを管理バーの高さの分だけ下げた位置に固定すれば解決できます！
下記のコードを「header.phpのheadタグ内」にコピペしてください。
<?php if (is_user_logged_in()) : ?>
<style type="text/css">
.p-hamburger {
top: .50rem!important; //コードによっては「px」を使用してください。
}
</style>
<?php endif; ?>実際の画面がこちら。
なお、上記はハンバーガーメニューが重なってしまったのを修正した事例なので、ハンバーガーメニューのtopの値を修正しました。
しかし、Webサイトによってはヘッダーを上部に固定するパターンもありますよね。その場合のコードは下記です。
<?php if( is_user_logged_in() ) : ?>
<style type="text/css">
.header {
margin-top: 32px;
}
</style>
<?php endif; ?>このようにWebサイトによって微妙にコードが異なるので、「動かしたい要素はなにか？」に気をつけてみてください。
<?php if( is_user_logged_in() ) : ?>の意味
もしかしたら「<?php if( is_user_logged_in() ) : ?>ってなに！？」と思ったかもしれません。
結論から言うと「管理者がログインしてるときだけ〇〇します」を表すプログラミング言語のこと。
たとえば、<?php if( is_user_logged_in() ) : ?>を書かずにふつうにCSSを書いてしまうと、ユーザー（閲覧者）が見た時にも上部に32px分の余白が生じてしまい、レイアウトが崩れます。
たとえば下記。
.header {
margin-top: 32px;
}これは好ましくない例です（真似しないでね）。
そこで「管理者が管理画面にログインしているときだけ余白をあけるよ〜」というPHPのコードを記述してあげています（これを「条件分岐」と言ったりします）。
もう一度載せると下記です。
<?php if( is_user_logged_in() ) : ?>
<style type="text/css">
.header {
margin-top: 32px;
}
</style>
<?php endif; ?>ここまで理解できれば十分です！
その２：下に移動させる
次は、管理バーを下に移動させる方法です。
「管理バーが上にあるのはイヤだけど、非表示もイヤだわ」という方向けの方法です。
完成形はこちら。
下記のコードを「header.phpのheadタグ内」にコピペしてください。
<?php if( is_user_logged_in() ) : ?>
<style type="text/css">
html {
margin: 0 0 32px!important;
}
#wpadminbar {
top: inherit!important;
bottom: 0!important;
}
</style>
<?php endif; ?>margin: 0 0 32px!important;は、管理バーの高さに対応して、ページの上部に余白を設けることをやめ、代わりにページの下部に余白を設定するもの。
これにより、管理バーが画面下部に固定されている場合でも、ページ内の最下部にある要素が管理バーの後ろに隠れないようになります。
【コード書くの怖い人向け】プラグインでやる方法もあり
「コード書くの怖いです…」という方は専用のプラグイン「Admin Bar Position」があるので、こちらを使うのもあり。
やり方は超カンタンで、
- その１：「Admin Bar Position」で検索
- その２：今すぐインストール ＞ 有効化
以上おわりっ！さきほどコードを書いたときとまったく同じ結果になります。
ただし、管理バーを下に移動させるためだけにプラグインをいれるのもなぁ…と思うのも事実。
プラグインは時にバグの原因になったり、表示速度が遅くなったり、といろいろとデメリットもあるからです。プラグイン自体が消える可能性もあるしね。
「コードを書くか、プラグインをいれるか。」この判断はあなたにお任せします（私はコードを書くのを推奨します。カンタンなので！）
管理バーを非表示にする方法
ここからは後半。
管理バーを「非表示」にする方法です。
- 管理画面の「ユーザー設定」で非表示にする
- functions.phpで非表示にする
- CSSで非表示にする
その１：管理画面の「ユーザー設定」で非表示にする
管理画面の「ユーザー設定」で管理バーの表示／非表示を簡単に切り替えることができます。
流れはこんな感じ
- その１：管理画面からユーザー＞プロフィールと進む
- その２：「サイトを見るときにツールバーを表示する」のチェックを外す
- その３：「プロフィールを更新」をクリック
実際にやってみます。
WordPressの管理画面から、「ユーザー > プロフィール」と進みます。
「サイトを見るときにツールバーを表示する」のチェックを外せばOKです。
最後に「プロフィールを更新」をクリックします。
ただし、この方法はWordPressのユーザーごとに設定が適用されます。このため、他のユーザーアカウントでログインした場合は、管理バーが表示されるかどうかがそのユーザーアカウントごとに異なります。
なので、複数人でWordPressを管理している場合には要注意ですね。
逆に言えば、「１人で管理してます！」という方は問題なしです。あなたの状況に合わせて方法を変えてください。
その２：functions.phpで非表示にする
テーマのfunctions.phpファイルにカスタムコードを追加して、管理バーを非表示にすることもできます。
以下は、functions.phpに追加するコードの例です。
add_filter( 'show_admin_bar', '__return_false' );たった一行だけでOKです！
このやり方の場合は、すべてのユーザーに対して管理バーが非表示になります。
functions.phpとは？！
「functions.phpをはじめて聞きました…」という方もいるかもです。
functions.phpは、Webサイトの外観や機能をカスタマイズするためのファイルです。
Webサイトのデザインを変更したり、新しい機能を追加したりできます。たとえば、特定のページにカスタムなスタイルを適用したり、管理バーを特定のユーザーグループにだけ表示させたりできます。
「はじめて触ります…」という方は、functions.phpにうっかり間違ったコードを書いてしまうとバグが生じるので慎重に操作してください。
その３：CSSで非表示にする
最後に、CSSを使用して管理バーを非表示にする方法です。
以下のコードを「header.phpのheadタグ内（もしくはbodyタグ開始直後）」に追加します。
<?php if( is_user_logged_in() ) : ?>
<style type="text/css">
html {
margin-top: 0!important;
}
#wpadminbar {
display: none!important;
}
</style>
<?php endif; ?>このコードを使用することで、管理バーの高さ分の余白を打ち消し、ページの上部に余分なスペースが消えます。
それを実現する方法が「margin-top: 0!important;」というコードです。これを書くことで管理バーの余白を取り除いています。
管理画面に戻りたいときの対処法
「管理バーがなくなったせいで管理画面に戻れなくなりました…涙」
こんな問題も発生しますね。
そんなときの対処法は
- https://www.Webサイトのアドレス/wp-admin/
をメモしておくこと。
もしくはWebサイトのアドレスの末尾に/wp-admin/をつけて検索すればOKです。
ちなみに「wp」とはWordPressのことで「admin」とは管理画面のことです。
下記は末尾に「/wp-admin/」をつけて検索したミニ動画です。
これで管理画面に戻れなくなる問題は解決するはずです^^
なぜ「header.php」に書くのか！？
ところで。
「〇〇.phpがいっぱいあるけど、なんでheader.phpなの…？」と疑問に思ったかもしれません。
スイマセン、解説せずにさらっと流していました。。。
ではなぜか。
Webサイトのデザインとして基本的にheader（ヘッダー）はどのページにも共通するページだからです。header.phpに先ほどのコードを記述すれば、どのページを開いても管理バーが非表示になります。
逆に言えば！
一部のページにしかないファイルに記述する（例：pege.phpなど）と、そのページしか管理バーが非表示になりません。
コード量を少なくするためにも、全ページに共通するファイル（代表例はheader.php）がオススメです。
最後に。
この方法で「うまくできなかった(;_;)」という方は、私のTwitterのDMまでご連絡ください。
また、この他にも解説してほしいものがありましたら、あわせてTwitterのDM宛にご連絡いただければ解説いたします！
最後までありがとうございました！
