バージョン7.2以降の管理画面でSVG画像を使う方法、7.1.x以前でダッシュアイコンを表示させる方法

WordPressのバージョン7.2以降では、管理画面内の標準メニューのアイコンがSVGに切り替わりますね。

ベータバージョンの段階では、ダッシュアイコンのままもありつつのようですが、徐々に完全に切り替わっていくのでしょう。

もちろんWordPressはきちんとフォールバックされている親切なプログラムなので、しばらくはダッシュアイコンも使い続けることができるのでしょうけど、テーマやプラグインのコードでメニューを追加している場合には、私のように早速SVGでメニューアイコンを表示させたいと考える方も多いのではないでしょうか？

そこで今回はバージョン7.1.x以前のサイトでは従来のダッシュアイコンで表示させつつ、7.2-beta以降ではSVGアイコンを表示させる方法を例として紹介します。

今回の方法では、前述したように、現段階ではSVGアイコンがダッシュアイコンの代替として完全に一致していないため、同じもので置き換えることができない場合があり、今回の手法では7.1.xと7.2以降でアイコンを変更することになるケースもありますので、アイコン自体は変えたくないという場合には、公式ページで紹介されているように、これはダッシュアイコンに対するSVG画像がない場合にダッシュアイコンを表示させるというアプローチの方がいいかも知れませんのでお好みでどうぞ。

どんなSVGアイコンがあるのかは、こちら(GitHubのページ)で見ることができます。また、こちらのページのコードで「collections」パラメーターに「core-admin」の指定があるものは、管理画面のアイコンとして使用できますので参考にしてみてください

以下がWordPressのコアバージョンによって、ダッシュアイコンを表示するのか、SVGアイコンを表示するのかを切り替えるコード例です（本サイトで配布しているHima Art Utilityプラグインのメインメニューのコードです）。

function haumenu_init_main_menu() {
// 7.2のベータ版、RC版、および7.2以降の正式版をすべて含める場合
	if ( version_compare( wp_get_wp_version(), '7.2-beta', '>=' ) ) {
		// WordPress 7.2 ベータ以降の場合の処理
		$icon_url = 'core-admin/plugins';
	} else {
		// WordPress 7.1.x 以前の場合の処理
		$icon_url = 'dashicons-screenoptions';
	}

	add_menu_page(
		__('HimaArt Utilitiy(New)','hima-art-utility'), // $page_title ページのタイトル（ブラウザのタブへ表示）
		__('HA Utilitiy(New)','hima-art-utility'), // $menu_title メニューのタイトル
		'manage_options', // $capability 権限
		haumenu_define_menu_slug(), // $menu_slug スラグ
		'haumenu_main_menu_page', // $callback コールバック関数
		$icon_url,
		9998 //$position メニューを表示する位置
	);
}
add_action('admin_menu', 'haumenu_init_main_menu');

これまでのメニューのコードとの相違点は、コード前半でWordPressバージョンによって、ダッシュアイコンにするのか、SVGアイコンにするのかを判定して、add_menu_page()の$icon_urlに渡すものを切り替えるという部分を追加しただけです。

これで、7.1.xでは従来のダッシュアイコンが表示され、7.2.x（7.2-beta以降を含む）ではSVGアイコンが表示されるので、古いバージョンのWordPressでもきちんとアイコンが表示されるようになります。

前述したように、従来のダッシュアイコン自体がすぐに使えなくなるということではないので、必ず対応しなければならないことではありませんが、将来的に使用できなくなるかもしれないということを考えて、または最新のものを取り入れたいという方はこの手法で対応しておくといいのではないかと思います。

※アイコンスラグの左に実際のアイコンを表示しています

※「core-admin」グループのみ〇の付いているアイコンは管理画面専用なのでここでは表示されません

※「core」グループのみ〇の付いているアイコンは表示画面専用なので管理画面では利用できません