WordPressの管理バーに表示する項目が多過ぎて、サイトデザインが崩れるときの対処

公開日：2018年8月17日

最近のWordPress用プラグインはサイドバーメニューや管理バーに表示項目を追加するものが増えていますね。それはそれで使いやすいのですが、時には非表示にしてしまいたい！と思うものもあるかと思います。

まあ管理画面のサイドバーメニューであれば項目が増えても慣れれば・・・というところですが、問題は管理バー。項目が増えて画面からあふれた部分は下へずれて表示されるようになっています。

これが元となってヘッダーに表示したものの一部が下へずれて表示されてしまい、困ったことありませんか？

百聞は一見に如かずということで実際の画像を見ていただきましょう。

このサイトは私が作っている地域猫と我が家の猫ちゃんのサイトです。

画像の右上、赤枠の部分、見事にあふれてしまってますよね？？幸いこのサイトで使っているSimplicity2テーマでは重なって表示されるので特にデザイン上問題ないのですが、テーマやヘッダーの作り方によっては妙な空白ができたりして本来の表示とは違うものになってしまったりします。

これを今回紹介するコードをCSSへ追記すると・・・

解消されています！！

私も気にはなっていて、どうにかして解消できないかなぁと思っていたのですが、管理バーの項目自体をdisplay:noneで非表示にしても、その項目が表示されなくなるだけで【あふれる状態】は解消できないんですよ、これが。

同じようにお悩みの方へ、解消方法を見つけましたので紹介しておきます。

会員制サイトでログインユーザーに管理バーを表示している方で、このあふれ現象でデザイン崩れを起こしてしまったという方、ユーザー設定で管理バーを表示するようにしている場合に表示が崩れてしまうという方には役に立つかと思います。

ページ上部へ戻る▲

WordPressサイトの管理バー項目が多くてサイト表示に不具合が出るのを防ぐコード

以下のコードをテーマのCSS(カスタマイザーの追加CSSでも可)へ追記するだけです。追記したのに適用されないときはしばらく放置、もしくはキャッシュのクリアを行ってください。

/**************** 管理バーがあふれるのを防ぐ ******************/
@media screen and (min-width: 782px){
/* Prevent wrapping of admin bar that has more items than admin bar area */
#wpadminbar .quicklinks {
justify-content:space-between;
}
#wpadminbar .quicklinks,
#wpadminbar .quicklinks &gt; ul {
display:-ms-flexbox;
display:flex;
flex-wrap:nowrap;
-ms-flex-wrap:nowrap;
min-width:0!important;
}
#wpadminbar #wp-admin-bar-top-secondary {
flex-direction:row-reverse;
-ms-flex-direction:row-reverse;
}
#wpadminbar .quicklinks &gt; ul &gt; li {
float:none!important;
}
#wpadminbar .quicklinks &gt; ul &gt; li,
#wpadminbar .quicklinks .ab-item {
white-space:nowrap;
text-overflow:ellipsis;
min-width:0!important;
}
#wpadminbar .quicklinks .ab-item {
overflow:hidden;
}
#wpadminbar .quicklinks .ab-item .ab-label,
#wpadminbar .quicklinks .ab-item .display-name {
float:none;
display:inline;
}
}

簡単に説明すると、管理バーに表示する項目が画面の幅を越えてしまったとき、各項目の内容をある程度の単語数で切って後ろに「．．．」を付け、画面幅に管理バーの項目が収まるようにするものです。

実はこのCSSコード、公式サイトで最近リリースされていたプラグインからそのまま抽出したコードになります（プラグイン作者の方すみません・・・）。