WordPress で Dashicon を使用する方法

Dashicon は、WordPress に組み込まれたフォントアイコンのコアセットで、WordPress 3.8 で大規模なバックエンド UI の再設計時に導入され、デフォルトで左側の管理バーのさまざまなリンクに使用されます。これらのアイコンはコア用に構築されていますが、カスタム投稿タイプを定義したりカスタム管理パネルを作成したりするときだけでなく、必要に応じてフロントエンドテーマのデザインでも、独自のカスタムプラグインやテーマで使用できます。何よりも、とても簡単です。

カスタム投稿タイプにダシコンを使用する

WordPress で新しいカスタム投稿タイプを登録するときは、menu_icon 引数を、使用したい Dashicon の CSS クラス名と同じに設定するだけです。このアイコンは、に表示されるアイコンとして定義されます。 WordPress 管理パネルのカスタム投稿タイプ名の左側。 Dashicons ランディングページにアクセスし、使用したいアイコンをクリックするだけです。アイコンの横の上部にクラス名が表示されるので、それをコピーして貼り付けることができます。

例:

// Register a new custom post type named Portfolio
register_post_type( 'portfolio', array(
	'public' => true,
	'menu_icon' => 'dashicons-portfolio',
	'label' => __( 'Portfolio', 'local' ),
);

スクリーンショット:

以下は、ポートフォリオ投稿タイプで Dashicon アイコンがどのように表示されるかを示すスクリーンショットです。覚えているかどうかわかりませんが、Dashcons が登場する前は、投稿タイプのアイコンにカスタム画像 URL を設定する必要があり、サイトで多くのプラグインを使用していた場合、アイコンが一致しないことが多く、管理者の見た目が非常に悪かったです。これで、投稿タイプのアイコンがデフォルトの WP UI と一致し、見栄えが良くなります。

フロントエンドテーマデザインでのダシコンの使用

最近のテーマの多くは、投稿メタ (日付、カテゴリ、タグ、作成者) などのフロントエンドのアイコンや、ユーザー、検索、ショップのアイコンなどのヘッダーアイコンを使用しています。最も頻繁に使用され、人気のあるフォントアイコンセットは FontAwesome で、ほとんどのプロジェクトでうまく機能しますが、おそらく決して使用しないであろう多くのアイコンを含む非常に大きなアイコンセットでもあります。 Fontello などのフォントジェネレーターウェブサイトを使用して、必要なアイコンのみのスタイルシートを作成することもできますが、もう 1 つの代替方法は、WordPress インストールに既に含まれている Dashicons を使用することです。フロントエンドでスクリプトを読み込むだけで済みます。

以下をテーマの function.php に追加して、フロントエンドに Dashicon をロードします (独自のテーマを作成せず、既存のテーマをカスタマイズしている場合は、子テーマを介して挿入します)。

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'dashicons' );
} );

これで、HTML 経由でアイコンを挿入できるようになりました。

<span class="dashicons dashicons-menu"></span>

「メニュー」と表示されている場所を、使用したいアイコンに変更するだけです。この HTML は、アイコンを表示したいテーマ内のどこにでも貼り付けることができます。 HTML をメニュー項目の「ラベル」フィールドに直接貼り付けることで、メニュー項目に HTML を挿入することもできます。

Dashicons ショートコードの作成方法

フロントエンドで Dashicon を使用するためのもう 1 つの解決策は、サイトのどこでも使用できるショートコードを作成することです。これは、クライアント向けにサイトを作成していて、クライアントが HTML をいじる必要がないようにサイトにアイコンを簡単に挿入できるようにしたい場合に良いオプションです。以下はそのコードがどのようなものであるかの例です。単にコードをfunctions.phpファイル（またはfunctions.phpによってロードされる他の非テンプレートファイル）に追加します。

add_shortcode( 'dashicon', function( $atts ) {
	$atts = shortcode_atts( array(
		'icon' => 'menu',
	), $atts, 'bartag' );
	if ( ! empty( $atts[ 'icon' ] ) ) {
		return '<span class="dashicons dashicons-' . esc_attr( $atts[ 'icon' ] ) . '"></span>';
	}
} );

ショートコードの使用法:

[dashicon icon="chart-pie"]

注: 上記のショートコードは、前の手順をすでに実行し、フロントエンドに Dashicons スタイルシートをロードしていることを前提としています。まだ実行していない場合は、上記のスニペットの「wp_enqueue_style」関数をショートコードに追加するだけで、アイコンが使用される場合にのみスタイルシートが読み込まれます。ただし、スクリプトをグローバルにロードすることをお勧めします。そうしないと、Dashicons スタイルシートがサイトのフッターにロードされるため、サイトがレンダリングされた後にアイコンがレンダリングされ、わずかな「フラッシュ」が発生します。