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

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

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

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

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

このサイトは私が作っている地域猫と我が家の猫ちゃんのサイトです。
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 > 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 > ul > li {
		float:none!important;
	}
	#wpadminbar .quicklinks > ul > 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コード、公式サイトで最近リリースされていたプラグインからそのまま抽出したコードになります(プラグイン作者の方すみません・・・)。

プラグイン自体もCSSファイルを読み込ませるPHPファイルが存在するだけの軽量なものですので、テーマのCSSへ上のコードを追加するもよし、このプラグインを使うもよし、どちらでも同様の動作をします。

Wordpressの本

Amazonの人気商品楽天市場の人気商品
CS Shop
【中古】WordPressレッスンブック ステップバイステップ形式でマスタ-できる /ソシム/エ・ビスコム・テック・ラボ (単行本)

【中古】WordPressレッスンブック ステップバイステップ形式でマスタ-できる /ソシム/エ・ビスコム・テック・ラボ (単行本)

258 円 (税込) 送料込
◆◆◆ディスク有。中古商品のためキズ、日焼け、使用感等ある場合が御座いますが概ね良好な状態になります。迅速・丁寧な発送を心がけております。【毎日発送】商品状態著者名:エ・ビスコム・テック・ラボ発行者:ソシム発売日2010年09月
WordPressによるウェブアプリケーション開発 [ Rakhitha Nimesh Ratnayake ]

WordPressによるウェブアプリケーション開発 [ Rakhitha Nimesh Ratnayake ]

4,104 円 (税込) 送料込
Rakhitha Nimesh Ratnayake プライム・ストラテジー オライリー・ジャパンワードプレスニヨルウェブアプリケーションカイハツ ラーキサ ニーメシュ ラーネヤク プライム ストラテジー 発行年月:2014年11月26日 予約締切日:2014年11月25日 ページ数:364p サイズ:単行本 I..
楽天ウェブサービスセンター CS Shop
トップへ戻る