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

公開日: 使い方など
Knowledge Base トラブル 対処

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

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

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

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

このサイトは私が作っている地域猫と我が家の猫ちゃんのサイトです。
WordPressの管理バーに表示する項目が多過ぎて、サイトデザインが崩れるときの対処
画像の右上、赤枠の部分、見事にあふれてしまってますよね??幸いこのサイトで使っているSimplicity2テーマでは重なって表示されるので特にデザイン上問題ないのですが、テーマやヘッダーの作り方によっては妙な空白ができたりして本来の表示とは違うものになってしまったりします。

これを今回紹介するコードをCSSへ追記すると・・・
WordPressの管理バーに表示する項目が多過ぎて、サイトデザインが崩れるときの対処
解消されています!!

私も気にはなっていて、どうにかして解消できないかなぁと思っていたのですが、管理バーの項目自体を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;
	}
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

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

Wordpressの本

Amazonの人気商品楽天市場の人気商品
いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ) / 石川..

1,738 円 (税込)
基本情報ジャンル建築・理工フォーマット本出版社インプレス発売日2019年07月ISBN9784295006664発売国日本サイズ・ページ280p 21×19cm関連キーワード 9784295006664 出荷目安の詳細はこちら>>楽天市場内検索 『在庫あり』表記について 
いちばんやさしいWordPressの教本第4版 人気講師が教える本格Webサイトの作り方 [ 石川栄和 ]

いちばんやさしいWordPressの教本第4版 人気講師が教える本格Webサイトの作り方 [ 石川栄和 ]

1,738 円 (税込) 送料込
人気講師が教える本格Webサイトの作り方 石川栄和 大串肇 インプレスイチバン ヤサシイ ワードプレス ノ キョウホン イシカワ,ヒデカズ オオグシ,ハジメ 発行年月:2019年08月 予約締切日:2019年06月26日 ページ数:280p サイズ:単行本 ISBN:9784295006664 石川栄和(イ..
楽天ウェブサービスセンター CS Shop
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報