[WordPress] プラグインを使わず管理バー（ツールバー）を下に表示したい
WordPressにログインしていると、ページ上部に黒帯の管理バーが固定表示されます。
ナビゲーションを固定表示にしていたりすると、バーと被ってしまって見栄えや操作性が悪かったり、htmlタグにマージンも設定されてしまうためレイアウトも微妙にずれてしまいます。
この管理バーを画面下部に固定表示することで、上記のような問題を回避できます。
今回は、プラグインを使わず、なおかつfunctions.phpにも手を入れずに管理バーの位置を変える方法を検討してみました。
サンプルコード
<?php
if(is_user_logged_in()) {
?>
<style>
html {
margin-top: 0px !important;
}
#wpadminbar {
top: initial;
bottom: 0px;
}
</style>
<?php
}
?>
上記コードをfooter.phpなどに記載します。記載箇所は「wp_head」関数が呼ばれたあとであればどこでもOKです。
「is_user_logged_in」関数を使って、ログイン中のみ有効なスタイルを指定します。
管理バーには「#wpadminbar」というIDが振られており、「position: fiexd」で固定表示されています。
「top」の値を初期値にし、「bottom」を0pxにして管理バーを下端表示させます。
また、管理バーの高さ分の「margin-top」も設定されるため、0pxで上書きするようにしています。
「margin-top」はstyleタグ内に記載されるため、通常のスタイルシートで記載しても上書きができません。そこで、上書き用のスタイルもstyleタグに書く形を取っています。
管理バーを非表示にする場合のサンプルコード
<?php
if(is_user_logged_in()) {
?>
<style>
html {
margin-top: 0px !important;
}
#wpadminbar {
display: none;
}
</style>
<?php
}
?>
管理バーが不要な場合は、上記コードで非表示にできます。
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。