WordPress 7.2の管理バーとメニュー、アイコンがSVGに 自作カラースキームは要確認

何が変わったのか：Dashiconsからインラインへ

WordPress 7.2 Betaでは、管理画面のサイドバーメニューと上部の管理バーのアイコンが、Dashicons（アイコンフォント）からインラインSVGに置き換わっています。Make WordPress Core（開発チームのブログ）が2026年11月5日に公開した開発者向けノート「SVG icons in the admin bar and menu in WordPress 7.2」によると、アイコンは@wordpress/iconsのSVGで、以前は::beforeの疑似要素にCSSで描いたフォントの字形でした。

多くのプラグインやテーマは修正不要とされています。ただ、管理画面のカラースキームを自作している場合や、コアのアイコンをCSSで隠したり差し替えたりしている場合は、7.2の正式版（2026年12月8日予定。WordPress.org Newsのベータ版告知による）までに、手直しが必要になることがあります。

なぜDashiconsを置き換えるのか

2026年9月4日のMake Coreの告知記事によると、この置き換えは6月からパッチとして進められてきました。7.1で入ったwp_get_icon()を使い、管理バーとサイドバーのアイコンをWordPressのアイコンセットにそろえる変更です。理由として、次の4点が挙げられています。

  • アイコンフォントは私用領域のコードポイントを使うため、スクリーンリーダーの読み上げが一定しない
  • Windowsのハイコントラストモードなど強制配色で、フォントのアイコンが消えたり崩れたりする
  • Webフォントの読み込みに失敗すると、文字化けのような四角が表示される
  • アイコンセットを1つにそろえることで、見た目の言語を単純にできる

筆者の見方では、見た目の刷新というより、アクセシビリティと表示の安定性を重く見た変更です。ただし原文には見た目の統一も理由として挙がっており、告知記事は「目に見える変更」だとも書いています。

修正が要るのは「疑似要素でアイコンを触っている」CSS

これまで::beforeで色を付けていたルールは、アイコンが実際の要素になったことで効かなくなります。ノートは、後方互換のために次の「ベストエフォート」の措置があると説明しています。

  • サイドバーメニュー：wp_admin_css_color()に渡したアイコン色が使われ、なければメニューの文字色になります。
  • 管理バー：コアの_admin.scssをもとにSASSで作っているスキームは、.ab-icon要素に色が付くため、意図した色のままです。
  • それ以外は、コアの既定色になるため、意図と違う色になることがあります。

きちんと直すには、::beforeに色を付けている箇所で、アイコンの要素にも同じ色を付けます。SVGは親要素の色を継承します。ノートの例では、サイドバーなら#adminmenu div.wp-menu-imageにも、管理バーなら.ab-iconにも同じ色を指定する形です。ホバー・フォーカス・現在のページ・開いた状態、およびモバイル用のルールも同様に直す必要があります。この書き方は7.2より前のバージョンでも動く、とされています。

アイコンを隠している・画像に差し替えているサイトは要確認

::beforeにdisplay: noneを付けてアイコンを隠している場合、アイコンが要素になったため隠れなくなります。div.wp-menu-image svgや.ab-iconも隠す指定が必要です。背景画像で差し替えている場合は、これまでコアがcontentで作っていた箱がなくなるので、contentとサイズを自分で指定します。

管理バーのedit、customize、site-editor、my-sites、site-name、my-accountの各ノードも要注意です。以前は.ab-item::beforeにアイコンが描かれていましたが、7.2では別の.ab-icon要素になりました。.ab-item::beforeにだけcontentを指定していると、自分の字形が隠れて、コアのアイコンが表示されます。.ab-icon::beforeにも同じcontentを指定する必要があります。

PHPでノードのタイトルを加工しているコードにも影響があります。一部のコアノードは、タイトルに空の<span class="ab-icon">を含んでいましたが、7.2ではこの空のspanがなくなり、新しいicon引数でアイコンを指定します。例外はwp-logoで、タイトルにロゴのSVGそのものが入ります。空のspanを探しているコードは、それが見つからなくなるため修正が必要です。

そのまま動くもの、使える新しいAPI

サイドバーメニューのデータは変わりません。たとえばget_post_type_object( 'post' )->menu_iconは引き続きdashicons-admin-postです。プラグインがメニューアイコンにDashiconを指定していて、対応するコア管理画面用のSVGがあれば、そのSVGが表示されます。それ以外のDashicon・画像URL・base64のSVG・文字列noneは、これまでどおり表示されます。なお、menu_iconを指定しない投稿タイプはdashicons-admin-post扱いになり、SVGで描かれます。管理バーのサードパーティ製ノードも、これまでと同じ表示です。

新しいAPIとして、add_menu_page()のアイコン引数や、register_post_type()のmenu_iconに、登録済みアイコンの名前空間付きの名前（例：core-admin/pin）を渡せるようになります。管理バーはWP_Admin_Bar::add_node()にicon引数が加わります。コアのcore-adminコレクションは、一度追加された名前は変更も削除もされないと説明されています。管理画面用にはcoreコレクションを使わないよう明記されており、独自のアイコンはwp_register_icon_collection()とwp_register_icon()で登録します。

正式版までにやっておくこと

筆者は、影響が大きいのは「管理画面をブランディングしている制作会社や、クライアント向けに管理画面をカスタマイズしている案件」だと考えます。カラースキームやホワイトラベル化のプラグインは、見た目が崩れても動作は止まらないため、リリース前には気づきにくく、公開後にクライアントの指摘で発覚しがちです。Beta 4が出ている今のうちに、ステージング環境で次の点を見ておくと安心です。

  • 自作のカラースキームで、メニューと管理バーのアイコンの色・ホバー色が崩れていないか
  • CSSでコアのアイコンを隠している、またはロゴに差し替えている箇所がそのまま機能するか
  • PHPで管理バーのノードのタイトルやアイコンを加工していないか
  • 自作プラグインのメニューアイコンを、新しいSVGの指定に移行するか（任意）

ノートが示す「修正後のCSS」は7.2より前のバージョンでも動く書き方なので、CSSについてはバージョンごとの分岐は不要です。PHPでadd_menu_page()にアイコン名を渡す場合は、function_exists( 'wp_is_valid_icon_name' )での分岐が要ると書かれています。ノートには、7.2より前のバージョンに対応しつつアイコンを設定する方法の節や、マークアップ変更の一覧（付録）もあります。詳細は原文で確認してください。

出典

2026年11月6日時点の情報です。

PR当サイトはアフィリエイト広告を利用しています。掲載内容は広告主から依頼・指示を受けたものではなく、筆者の調査・体験にもとづきます。

コメント

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