【プラグイン不要】Wordpressカスタム投稿タイプ管理画面メニューのアイコンを変更する

2024年8月30日 09:17

はじめに

Wordpressによるサイト構築時、「カスタム投稿タイプを複数設定した場合に、同じアイコンが並ぶと紛らわしい」「プラグイン配布する際に、オリジナルのアイコン画像を表示したい」「でもプラグインは使いたくない」と思い、プラグインを使わないアイコン変更に挑戦しました。

サンプル用カスタム投稿タイプを用意

以下のカスタム投稿タイプを作成し、管理者画面で表示を確認します。[カスタム投稿slug]は任意の記述に書き換えてください。

function create_news() {
	$pagename = "おしらせ";
	register_post_type('[カスタム投稿slug]', array(
		'labels' => array(
			'name' => $pagename,
			'add_new' => '新規'.$pagename.'追加',
		),
		'public' => true,
		'has_archive' => true,
		'menu_position' => 5,
		'supports' => array('title', 'editor','thumbnail')
	));
}
add_action('init', 'create_news');

追加したカスタム投稿タイプ「おしらせ」

ブラウザの検証機能等を用いてメニューバーのソースコードを確認すると、各メニューは<li>タグで生成されていることが分かりました。

<div id="adminmenuwrap"><!-- メニューバー開始 -->
	<ul id="adminmenu"><!-- メニューリスト開始 -->
	...
	...
	...
		<!-- ▼カスタム投稿「おしらせ」のみ抜粋 -->
		<li class="wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu-icon-[カスタム投稿slug]" id="menu-posts-[カスタム投稿slug]">
			<a href="edit.php?post_type=[カスタム投稿slug]" class="wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu-icon-[カスタム投稿slug]">
				<div class="wp-menu-arrow">
					<div></div>
				</div>
				<div class="wp-menu-image dashicons-before dashicons-admin-post" aria-hidden="true"><br></div>
				<div class="wp-menu-name">おしらせ</div>
			</a>
			<ul class="wp-submenu wp-submenu-wrap"><!-- サブメニューのリスト開始 -->
				...
				...
				...
			</ul><!-- サブメニューのリストここまで -->
		</li><!-- ▲カスタム投稿「おしらせ」ここまで -->
		...
		...
		...
	</ul><!-- メニューリストここまで -->
</div><!-- メニューバーここまで -->

デフォルトで割り当てられているアイコンに該当するのは以下の記述です。

<div class="wp-menu-image dashicons-before dashicons-admin-post" aria-hidden="true"><br></div>

デフォルトではDashiconsというアイコンフォントが用いられます。
classタグに指定された「dashicons-admin-post」に対応するピンマークが表示されています。

手法①Dashiconsで用いられるiconを使用する場合

カスタム投稿タイプの定義に'menu_icon'記述を追加するだけで簡単に変更できます。

function create_news() {
	$pagename = "おしらせ";
	register_post_type('[カスタム投稿slug]', array(
		'labels' => array(
			'name' => $pagename,
			'add_new' => '新規'.$pagename.'追加',
		),
		'public' => true,
		'has_archive' => true,
		'menu_position' => 5,
		'supports' => array('title', 'editor','thumbnail'),
		'menu_icon' => 'dashicons-awards'
	));
}
add_action('init', 'create_news');

手法②任意の画像を割り当てる場合

１．アイコン表示をオフにする

カスタム投稿タイプの定義に「'menu_icon' => ''」を記述します。
デフォルトのピンアイコンが非表示になることを確認してください。

function create_news() {
	$pagename = "おしらせ";
	register_post_type('[カスタム投稿slug]', array(
		'labels' => array(
			'name' => $pagename,
			'add_new' => '新規'.$pagename.'追加',
		),
		'public' => true,
		'has_archive' => true,
		'menu_position' => 5,
		'supports' => array('title', 'editor','thumbnail'),
		'menu_icon' => ''
	));
}
add_action('init', 'create_news');

２．画像をアップロードし、URLを取得する

アイコンにしたい画像を作成または取得し、Wordpressのメディアにアップロードします。画像の横幅は20pxに設定するため、複雑な図形を用いないよう注意してください。
アップロードした画像の詳細＞ファイルの URLから、画像のURLを取得できます。

３．アクションフックを追加する

管理画面を表示時にCSS記述を追加するアクションフックを設定します。
以下のコードをfunction.phpに追記します。[アイコン画像パス]には画像の絶対パスまたは相対パスに書き換えてください。

function setting_news_icon() {
	echo '<style>
 #menu -posts-[カスタム投稿slug] .wp-menu-image {
		background-repeat: no-repeat;
		background-size: 20px;
		background-position: center;
		background-image: url([アイコン画像パス]);
	}
	</style>';
  }
  add_action('admin_print_styles', 'setting_news_icon');

画面を更新し、アイコン画像が書き換えられるのを確認します。
書き換わらない場合、ブラウザのキャッシュクリアを行ってから再度更新をしてみてください。
また、現状では、選択時と非選択時で同じ画像を表示しているため、色の切り替わりはありません。

選択していない状態

まとめ

カスタム投稿タイプの管理画面メニューアイコンを変更したい場合は、まずDashiconsを確認しましょう。ぴったりのアイコンが見つかるかもしれません。
画像を設定する場合は、アクションフックを用いてCSSを書き換えることで実現可能です。
選択時に色を変更する場合や、SVGを用いた場合については後日掲載します。
今回紹介した手法はテーマファイルやプラグインを自作する時にも活用できるので、ぜひ試してみてください！

お知らせ

電巧社ではセキュリティ分野専門のブログも公開しています。ゼロトラストセキュリティを始めとした、ランサムウェアへの対処法等を紹介しています。こちらもよろしくお願いします。

参考ページ

Dashicons - WordPress Developer Resources
カスタムポストタイプを作成する際に表示させるアイコンを選ぶ方法 - Sensitivitiy

【プラグイン不要】Wordpressカスタム投稿タイプ 管理画面メニューのアイコンを変更する