純正のアイコンフォント dashiconsを利用する

WordPressの管理画面で利用されているiconfontの使い方

WordPress3.8.1でdashiconsを利用してみた。

WordPress3.8から専用のiconが利用できるようになっている。管理画面のメニューの先頭に追加されているアイコンフォントが該当する。具体的には画像の水色で囲った部分のことを指す。

WordPressで利用されているアイコンは一部で、新規にアイコンを追加したい場合は必要なものを追加することができる。今回は、ダッシュボードの概要欄に新規にリンクを追加し、そのリンクの先頭にdashiconsを追加してみたい。

dashiconsの一覧は下のサイトで確認することができる。

上のページにアクセスし、

という手順で利用することになる。より具体的な使用方法は以下のように利用する。

WordPress管理画面のダッシュボードにリンクを追加する。より具体的には[概要]というパネルにリンクを追加する。

上の画像の水色の部分にリンクを新設する。そのためには、dashboard_glance_itemsフィルターフックを利用してアイコンを追加できる。下のコードをfunctions.phpに追記する。

add_filter( 'dashboard_glance_items', 'add_dashboard_glance_items');

add_dashboard_glance_itemsには、配列に新規のリンクを追加する処理を書いておく。

function add_dashboard_glance_items( $arr ) {

	$arr[] = '<a href="blog.local" class="share">外部リンク</a>';
	return $arr;
}

ここまでの作業でリンクが設定される。

上のコードでaタグにclass属性を追加してあるので、そのclassに対してdashiconを設定する。cssの記述はstyle要素を直接管理画面のHTMLに追加する方法で行う。

admin_print_stylesアクションフックを利用して管理画面にstyle要素を追加する。

add_action('admin_print_styles', 'dashboard_add_style');

dashboard_add_styleでdashiconsのcssを記述する。要素セレクタにbefore疑似要素を設定することで、リンクの先頭にiconfontが付加される状態にしている。

function dashboard_add_style() {
?>
<style>
#dashboard_right_now li a.share:before { content: '\f242'; }
</style>
<?php
}

下の画像のように新しいリンクがiconfont付きで表示された。