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;
:はみ出たテキストを省略記号(...
)で表示。