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レッスンブック ステップバイステップ形式でマスターできる / エビスコム / ソシム [単行本]【メール便送料無料】【..

323 円 (税込)
著者:エビスコム出版社:ソシムサイズ:単行本ISBN-10:4883377245ISBN-13:9784883377244■通常24時間以内に発送可能です。午後1時までのご注文は通常当日出荷。■メール便は、1冊から送料無料です。※宅配便の場合、2,500円以上送料無料です。※あす楽ご希望の方は、宅配便を..
【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっと..

【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっと..

2,138 円 (税込)
■ISBN:9784774182186★日時指定・銀行振込をお受けできない商品になりますタイトル【新品】【本】小さなお店&会社のWordPress超入門 初めてでも安心!思いどおりのホームページを作ろう! オリジナルのテーマであっという間にホームページができる! 星野邦敏/著 大胡由紀/..
楽天ウェブサービスセンター CS Shop
トップへ戻る