ワードプレスのダッシュボードにメニューを追加 アイコンを Awesomeで作る

ワードプレスのダッシュボードにメニューを追加 アイコンを Awesomeで作る

ダッシュボードのメニューにプラグインの項目を表示したくなる時があります。

←ここね。

これには、
add_menu_page という関数を使います。

add_menu_page の書式は以下の通り
function unk_admin_menu_content()
{
	echo 'unk_admin_menu_content';
}
function unk_admin_menu()
{
	add_menu_page(
		'ページタイトル',			// ページタイトル
		'メニュータイトル',			// メニュータイトル
		'manage_options',			// 権限
		'unk_adminmenu',			// メニュースラッグ
		'unk_admin_menu_content',		// 呼び出し関数
		'',					// アイコンURL 
		'50'					// 表示位置
	);
}
add_action('admin_menu', 'unk_admin_menu');
※unk_admin_menu は、任意の名前

とりあえず、これを function.php に張り付ければ、ダッシュボードのメニューに「メニュータイトル」の項目が表示されます。

中味は、呼出し関数で指定した「unk_admin_menu_content」に書き込みます。

アイコンは、dashicons フォントのアイコンが指定できます。
⇒ dashicons アイコン一覧
例えば、こんな感じ。
‘dashicons-performance’, // アイコンURL


メニュー項目のアイコンにAwesomeフォントのアイコンを使う

メニュー項目のアイコンにAwesomeフォントのアイコンを使う場合は以下のようにスタイルシートを準備しないといけないです。

とりあえず Awesomeフォントで書いていますけど、フォントファミリーを変えれば、好きなフォントのアイコンを使えるようになります。

もちろん、フォントファイルは、ワードプレスにインストールしていないといけませんけど。


こんな感じで書きます。
//スタイルシートを読み込む
function unk_style()
{
    wp_register_style( 'custom_wp_menu_css', plugin_dir_url( __FILE__ ) . '/unk.css', false, '1.0.0' );
    wp_enqueue_style( 'custom_wp_menu_css' );
}
add_action( 'admin_enqueue_scripts', 'unk_style' );
//ダッシュボードメニューの定義
function unk_admin_menu()
{
	$menu_id = 
	add_menu_page(
		'ページタイトル',			// ページタイトル
		'メニュータイトル',			// メニュータイトル
		'manage_options',			// 権限
		'unk_adminmenu',			// メニュースラッグ
		'unk_admin_menu_content',		// 呼び出し関数
		'none',					// アイコンURL (Awesome)
		'50'					// 表示位置
	);
}
add_action('admin_menu', 'unk_admin_menu');

アイコンURLは、none にしておきます。
つまりadd_menu_pageに表示戦でいいわって指示するわけです。

スタイルシートはこう書きます。
/* menu icon */
#adminmenu .toplevel_page_unk_adminmenu div.wp-menu-image:before {
    font-family: 'FontAwesome' !important;
    content: "\f207";
}
書き換えるのは、.toplevel_page_unk_adminmenu という名前。
‘.toplevel_page_’までは、デフォルト、以降にメニュースラッグ(unk_adminmenu)を指定します。

つまり、add_menu_pageでのアイコン指定をやめさせて、自分のスタイルシートで #adminmenu 以下のクラスでスタイルをきめてやるということです。

この方法を使うとアイコンだけじゃなくアイコン部分の色も変えることができます。


ダッシュボードメニューでの表示位置の指定

ダッシュボードメニューでの表示位置の指定は、この部分です。

’50’// 表示位置

この数字は、次の表のようにセパレーター位置を基準にしてきめてやります。
  • 2 Dashboard ダッシュボード
  • 4 Separator(セパレータ)
  • 5 Posts 投稿
  • 10 Media メディア
  • 15 Links リンク
  • 20 Pages 固定ページ
  • 25 Comments コメント
  • 59 Separator(セパレータ)
  • 60 Appearance外観(テーマ)
  • 65 Plugins プラグイン
  • 70 Users ユーザー
  • 75 Tools ツール
  • 80 Settings 設定
  • 99 Separator(セパレータ)

ワードプレスのダッシュボードに追加したメニューへサブメニューを追加する

サブメニューは、親のメニューの追加が成功したことを確認してから add_submenu_page で追加します。
function unk_admin_menu()
{
	$menu_id = 
	add_menu_page(
		'ページタイトル',				// ページタイトル
		'メニュータイトル',			// メニュータイトル
		'manage_options',			// 権限
		'unk_adminmenu',			// メニュースラッグ
		'unk_admin_menu_content',	// 呼び出し関数
		//'dashicons-performance',	// アイコンURL (dashicons)https://elearn.jp/wpman/column/c20170626_01.html
		'none',						// アイコンURL (Awesome)
		'50'						// 表示位置
	);
    if( $menu_id !== false ){
        add_submenu_page(
			'unk_adminmenu',			// 親メニュースラッグ
			'UNK submenu1',				// サブメニューページのタイトル
			'UNKMENU_SUB_TITLE1',		// プルダウンに表示されるメニュー名
			'manage_options',			// サブメニューの権限
			'UNKMENU_SUB_SLUG1',		// サブメニューのスラッグ
			'unk_admin_menu_content1'	// 呼び出し関数
		); 
        add_submenu_page(
			'unk_adminmenu',			// 親メニュースラッグ
			'UNK submenu2',				// サブメニューページのタイトル
			'UNKMENU_SUB_TITLE2',		// プルダウンに表示されるメニュー名
			'manage_options',			// サブメニューの権限
			'UNKMENU_SUB_SLUG2',		// サブメニューのスラッグ
			'unk_admin_menu_content2'	// 呼び出し関数
		); 
    }
}
add_action('admin_menu', 'unk_admin_menu');
あとは、それぞれの「呼出し関数」を定義してあげればオッケー。

スポンサーリンク