サイトアイコン Gatespace's Blog

[WordPress 3.8] テーマやプラグインでダッシュボードメニューのアイコンを設定する方法

gatespace
この記事をシェアする

WordPress 3.8 からダッシュボードやアドミンバーのアイコンがアイコンフォントに置き換わりました。
以前はプラグイン・テーマで自作のメニューを追加する場合、本体同報のアイコンか自作のアイコン（PNG画像）を使いましたが、この部分の実装方法が変わったのでご紹介します。

ちなみにプラグインによってこの部分にまだ対応していないものもあります。
ほらこんな風にね。

ちょっと残念

アイコンフォント＋ css の color プロパティ

WordPress 3.8 から「管理画面の配色」でダッシュボードの色合いをユーザーが選べるようになりました。
試しに変更するとアイコンの色も変わります。
これはアイコンフォントの色を css の color プロパティで変更しているからです。

例：「投稿」のアイコン

デフォルトの場合、通常は color: #999999、アクティブ時は color: #FFFFFF となっています。

add_menu_page() が変更

http://codex.wordpress.org/Function_Reference/add_menu_page

add_menu_page() の $icon_url パラメーターに 3.8 以上で

が設定できるようになりました。

以降でDashiconsを使う方法と自作のアイコンフォントを使う方法をご紹介します。

実装その1：本体に含まれるのアイコンフォント「Dashicons」を使う

add_menu_page() のプロパティで $icon_url の値を '' にすると「Dashicons」の「gear」になります。

Dashicons の gear

「Dashicons」の他のアイコンを使用する場合はDashiconsのサイトを参考にアイコンの名前を入れます。
http://melchoyce.github.io/dashicons/

例）dashicons-smiley

実装その2：その他のアイコンフォントを使う

「Dashicons」ではなく「Font Awesome」や自作のアイコンを使いたい場合があります。

まずはアイコンフォントのデータ一式を用意しておきましょう。
自作の場合は「IcoMoon」などのサービスを使って作りましょう。
そして用意したcssファイルやフォントファイルをプラグイン（あるいはテーマ）に含めおきます。

次に add_menu_page() の $icon_url は 'none' にします。
（こうすると他のメニューと同じように div の中身が <br> のみになります）

アイコンが空

最後にスタイルシートで装飾します。
ダッシュボードで使うスタイルシートは admin_enqueue_scripts フックを使いリンクさせます。 http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

function load_custom_wp_menu_style() {
    wp_register_style( 'custom_wp_menu_css', plugin_dir_url( __FILE__ ) . '/admin-menu.css', false, '1.0.0' );
    wp_enqueue_style( 'custom_wp_menu_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_menu_style' );

読み込む css のサンプルはこちらになります（IcoMoonで自作した場合のソースです）。
クラス名などは適宜置き換えてください。

@font-face {
    font-family: 'example';
    src:url('fonts/example.eot');
    src:url('fonts/example.eot?#iefix') format('embedded-opentype'),
    url('fonts/example.ttf') format('truetype'),
    url('fonts/example.woff') format('woff'),
    url('fonts/example.svg#nginx') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* menu icon */
#adminmenu .toplevel_page_example div.wp-menu-image {
    font-family: 'example';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#adminmenu .toplevel_page_example div.wp-menu-image:before {
    font-family: 'example' !important;
    content: "e600";
}

元々の div.wp-menu-image:before に !important が付いていますので、Firebug や開発者ツールなどを使って css を調整してください

WordPress 3.8 未満への対応

ただ、このままだと WordPress 3.8 より前のバージョンで残念な感じになります

WordPress 3.7.1 での例

ですので WordPress 3.8 以上ではアイコンフォント、それ未満では今まで通りのフォントを使うように切り分けます。
WordPressのバージョンはグローバル変数 $wp_version に格納されているので、

if ( version_compare( '3.8.*', get_bloginfo( 'version' ), '<=' ) ) {
    $icon = plugin_dir_url( __FILE__ ).'/img/menu-icon.png';
} else {
    $icon = 'none';
}

上記のように PHP の version_compare 関数を使いバージョンを比較してメニューアイコンを変えます。 http://www.php.net/manual/ja/function.version-compare.php

2013.12.23 追記：大曲さん（@jim0912）から突っ込み入ったので直しました。

スタイルシートも同様に3.8以上なら読み込むようにします。

こんな感じになればできあがりです。

ということでWordPress 3.8 になって残念なメニューに遭遇したら作者にそっとパッチを送ってあげましょう。

この記事をシェアする