お問い合わせはコチラから

WordPress管理画面のツールバー(admin bar)のサイトタイトルの表示を短くする

サイト運営

WordPressはログインしていると管理画面のトップにツールバーが表示されます。この管理画面のツールバーはアドミンバー(admin bar)と呼ばれていて、よく使う項目がすぐにアクセスできるようになっています。

しかし、色々なプラグインを導入するとこのadmin barに項目が増えていき、その結果、画面が狭い場合はツールバーが画面上で折り返してしまいます。

admin barが折り返してしまうと、一番左のサイトタイトル部分と一番右にあるプロフィール部分に他の項目が重なってしまいクリックしにくくなるという問題が起きます。

ツールバーの折り返しを避けるには、ツールバーにある表示項目を減らすか、表示内容を短くする必要があります。

この記事ではadmin barのサイトタイトルの表示文字数を制限するカスタマイズをご紹介します。

admin barのサイトタイトルの表示文字数を制限するカスタマイズ

<?php
add_action('wp_head','admin_bar_css');
add_action('admin_head','admin_bar_css');

function admin_bar_css(){
	if ( is_admin_bar_showing() ) {
?>
<style type="text/css">
	#wpadminbar #wp-admin-bar-my-sites a.ab-item, #wpadminbar #wp-admin-bar-site-name a.ab-item {
		white-space: nowrap;
		width: 5rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
<?php
	}
}

1. アクションフックの登録

add_action('wp_head','admin_bar_css');
add_action('admin_head','admin_bar_css');
  • add_action:WordPressのフックシステムを使用して、特定のタイミングで関数を実行する。
  • wp_head:フロントエンド(サイトの公開側)の<head>タグ内で実行。
  • admin_head:管理画面(ダッシュボード)の<head>タグ内で実行。
  • 目的:フロントエンドと管理画面の両方で、管理バーのスタイルを適用する。

2. 関数の定義

function admin_bar_css(){
	if ( is_admin_bar_showing() ) {
		// CSSを出力
	}
}
  • admin_bar_css:カスタムCSSを出力する関数。
  • is_admin_bar_showing():現在のユーザーに管理バーが表示されているかどうかをチェック。
    • ログイン中のユーザーかつ管理バーが有効な場合にtrueを返す。
  • 目的:管理バーが表示されている場合のみ、CSSを適用する。

3. CSSスタイルの出力

<style type="text/css">
	#wpadminbar #wp-admin-bar-my-sites a.ab-item, 
	#wpadminbar #wp-admin-bar-site-name a.ab-item {
		white-space: nowrap;
		width: 5rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>

  • 対象要素
    • #wp-admin-bar-my-sites a.ab-item:管理バーの「My Sites」メニュー内のリンク。
    • #wp-admin-bar-site-name a.ab-item:管理バーの「サイト名」リンク。
  • CSSプロパティ
    • white-space: nowrap;:テキストを折り返さず、1行で表示。
    • width: 5rem;:要素の幅を5rem(約80px)に固定。
    • overflow: hidden;:要素からはみ出た内容を非表示。
    • text-overflow: ellipsis;:はみ出たテキストを省略記号(...)で表示。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました