WordPress標準のダッシュアイコン(dashicons)を表示させる方法いろいろ|Personal WP Customization Notes (PWCN)

公開日：2022(令和4)年9月10日／最終更新日： 2022(令和4)年11月30日

TT2テーマに限ったことではなく、投稿本文など任意の場所へアイコンを表示させたいなぁと思うこと多いですよね？

例えば段落の最初にマークとしてアイコンを表示させたり、ボタンにアイコンを表示させたり．．。

そんな時結構紹介されているのが、FontAwesomeなどの外部フォントアイコンを使う方法。

でも、管理画面などに何気に表示されているいろいろなアイコン画像を見て不思議に思ったことないですか？（ない？）

そう、WordPressには、そもそもDashIcon(ダッシュアイコン)というのが読み込まれるようになってるんです。

これは、特に無効にしていなければ閲覧画面側でも標準で読み込まれているので、もちろん使うことができるわけです。

ちなみにWordPress公式サイトのダッシュアイコンページを見ていただくと、実にたくさんのアイコンが使えるのが分かります。

今回はダッシュアイコンをいろいろな場所で使う方法を紹介します。

【前準備】フロントエンドでもダッシュアイコンが表示されるようにする

WordPressのダッシュアイコンは、そもそも管理画面用のアイコンで、フロントエンド（閲覧画面）で表示するようにはなっていません。

したがって、ダッシュアイコンが必要な場合である「ユーザーがログインしている状態」＝管理バーを表示してダッシュアイコンを使う可能性がある場合以外では、フロントエンド側で出力されません（□になります）。

サイトのカスタマイズなどをしている場合はログインしている＝ダッシュアイコンが使える状態なので、表示されないことに気づかないことがありますから、ログアウトして確認してみてください

これを未ログインユーザー（つまり通常の訪問者）でも表示されるようにするには、以下のコードを子テーマのfunctions.phpへ追加します。

/*** ダッシュアイコンをフロントエンド（未ログインユーザー）でも使えるようにする ***/
function sample_dashicons_style_init() {
wp_enqueue_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'sample_dashicons_style_init' );

コードを追加したら、再度ログアウトした状態で、ダッシュアイコンが表示されるかを確認しましょう。

テーマファイル内でダッシュアイコンを使用する方法

テーマファイルの中（テンプレートなど）でダッシュアイコンを使用する方法は大きく3通りあります。

ここでは、WordPressアイコン（これ→ ）を表示させることを前提に紹介します。

DashiconのWordPressアイコンのページはこちら

CSSで先頭にダッシュアイコンを出力する方法

このサイトでも使っている、警告ボックス（以下）のアイコンのように、CSSを使って文字列の先頭にアイコンを表示させる方法です。

警告ボックス

※ここから下の説明はWordPressアイコンを表示させる例です

段落ブロックを挿入して、追加CSSクラスに「ha-para-wp-icon」と入力します。

次にテーマの追加CSSや子テーマのCSSへ以下のスタイルコードを入力します。

.is-style-ha-para-wp-icon:before {
    font-family: 'dashicons';
    content: "\f120";
    font-size: 1.5em;
    vertical-align: sub;
    margin-right: 0.3em;
}

追加CSSクラスに入力したクラスには「is-style」という接頭辞が付くので「is-style-ha-para-wp-icon」というクラスの前（:before）に対して、アイコンを呼び出すスタイルコードを記述します。

フォントの種類を「font-family: ‘dashicons’;」でダッシュアイコンを指定し、「content: “\ff120”;」でWordPressのアイコンを呼び出しています。

その下の項目は、サイズや垂直位置、アイコンの右の隙間を指定していますので、サイトに合わせて調整するとよいでしょう。

spanタグを使ってダッシュアイコンを出力する方法

公式のダッシュアイコンページでアイコンを選択すると、以下のような画面が表示されますので、「HTMLをコピー」をクリックして、目的の場所へ貼り付けます。

WordPress標準のダッシュアイコン(dashicons)を表示させる方法いろいろ|Personal WP Customization Notes (PWCN)

HTMLタグにクラスを追加してダッシュアイコンを出力する方法

テーマファイル内の段落や見出しタグなどに追加CSSクラスを追加すると自動で先頭にアイコンが出力されます。

以下H2見出しタグ先頭にWordPressアイコンを表示させるコードです。

<h2 class="dashicons-before dashicons-wordpress">←WordPressアイコン</h2>

ここまでで紹介した方法は、テーマテンプレートで使うにはちょうどいい方法で、ブロックエディタ（投稿や固定ページの編集画面）では、HTMLはカスタムHTMLブロックでしか動作しないようになっているため、カスタムHTMLブロックを使う以外に方法がないので使いにくいです。

表示されないのは外部のアイコンでも同様に起こりますから、ダッシュアイコンの問題ではなく、ブロックエディタの仕様によるものでしょう

そこで、ショートコードにして呼び出せば自由に使えるのでは？ということで試したところ、上手に表示できましたので、以下にコード解説含め紹介しておきます。

ショートコードを使ってダッシュアイコンを表示させる方法

本機能を追加するには、テーマのfunctions.phpへコード追記をするスキルが必要です。また、上書きされてしまうのを防ぐため、子テーマの利用やコード追加プラグインの使用をおすすめします。

以下の作業を必要なサイトへ行うことで、ショートコードを使ってダッシュアイコンを呼び出して表示させることができるようになります。

テーマのfunctions.phpへショートコード出力用のプログラムを追加する
必要な場所へショートコードを挿入し、必要なパラメーターを設定する

ダッシュアイコンをショートコードで呼び出すコード

/*** dashiconsのショートコード呼び出し ***/
function dash_icon_font_view($atts){
	$atts = shortcode_atts(
	array(
	'icon' => '',
	'size' => '',
	'color' => '',
	'marginl' => '',
	'marginr' => '',
	'align' => '',
	),$atts);

//サイズ指定がなかったとき
if(empty($atts['size'])){
	$atts['size'] = '1';
}

//色指定がなかったとき
if(empty($atts['color'])){
	$atts['color'] = '#222';
}
	
//左マージン指定がなかったとき
if(empty($atts['marginl'])){
	$atts['marginl'] = '0';
}

//右マージン指定がなかったとき
if(empty($atts['marginr'])){
	$atts['marginr'] = '0';
}
	
//縦位置指定がなかったとき
if(empty($atts['align'])){
	$atts['align'] = 'middle';
}
	
	$dstyle ='width:revert;height:revert;';
	
	return '<span class="dashicons '.$atts['icon'].'" style="font-size:'.$atts['size'].'em;color:'.$atts['color'].';margin-left:'.$atts['marginl'].'em;margin-right:'.$atts['marginr'].'em;'.$dstyle.'vertical-align:'.$atts['align'].';"></span>';
	
}
add_shortcode('dicon','dash_icon_font_view');

ショートコードの使い方

投稿本文などの必要な場所へ以下のショートコードをコピーします（段落、テーブル、ボタンなどいろいろなブロックで使用可能です）。

[dicon icon="" size="" color="" marginl="" marginr="" align=""]

以下のパラメーター設定に従って、必要な項目を指定します。

パラメーター	デフォルト	指定方法
icon	なし	ダッシュアイコンのアイコンクラスを入力します（下一覧参照）
size	1	アイコンの大きさを指定します（単位：em）
marginl	0	左マージンを数字で指定します（単位：em）
marginr	0	右マージンを数字で指定します（単位：em）
align	middle	縦位置を指定します（baseline，text-top，text-bottom，topなど）

アイコンクラス（ダッシュアイコン）を探す

ダッシュアイコンのアイコンクラス（ショートコードのiconパラメーターで指定する文字列）は、公式ページ上でアイコンサンプル（実際の表示）付きで掲載されています。

公式サイトのダッシュアイコンのページ：https://developer.wordpress.org/resource/dashicons/

画像をクリックすると、画面上部にアイコンクラスが表示されます（以下はdashicons-menuのサンプルです）

上図にある「dashicons-menu」という文字列（アイコンクラス）をショートコードのiconパラメーターへ挿入します

[dicon icon="dashicons-menu" size="" color="" marginl="" marginr="" align=""]

アイコンクラスに間違いがなければ、「」←のようにアイコンが表示されますので、後のパラメーターを設定して大きさや位置の調整をしましょう。

ちなみにいろいろなパラメーターを以下のように指定すると、「」←のように表示させることもできます

サイズを2emにする
色を赤にする
左マージンを1emにする
右マージンを2emにする
位置を下にする

[dicon icon="dashicons-menu" size="2" color="red" marginl="1" marginr="2" align="bottom"]

いかがでしたか？簡単なコードとショートコードで本文内で自由にダッシュアイコンが使えるようになって便利ですよね？

コードを応用すれば、他のアイコンフォントでも動作するようになりますからチャレンジしてみてください。

ショートコードの作り方について詳しく知りたい方は、以下のページを参考にしてみてください。

参考：いろいろな種類のショートコードの作り方をおさらい

表示画面でダッシュアイコンが表示されないときは

テーマの仕様などで、表示画面側のダッシュアイコンに関するスタイルが読み込まれていないのが大きな原因です。

まずは、HTMLソース表示して、headタグの中に以下の行があるか（ダッシュアイコンが読み込まれているか）を確認しましょう。

<link rel='stylesheet' id='dashicons-css'  href='－－ここは省略してます－－' />

記述があるようでしたら、今一度出力方法に誤りがないか、デベロッパーツールなどできちんと出力されているかなど確認しましょう。

もしも上記の行がない場合には、テーマ側の制御など何等かの影響で読み込まれていない可能性がありますから、以下のコードをテーマのfunctions.phpへ追加します。


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

追加したら、HTMLソース上で行が出力されているかの確認とダッシュアイコンが表示されるかの確認をしてください。

ひまあーと（管理人）

WordPressと出会ったのはTwenty Tenテーマがデフォルトになる前と結構な期間お世話になっています。興味に応じて、いろいろなサイト作っては壊しを繰り返しながら、独自テーマの作成やプラグインの作成などを行っています。

本サイトでは主にTT2テーマのカスタマイズ方法、多彩な機能を詰め込んだ【Hima Art Utility】プラグインの紹介をしています。

WordPressへの感謝、プラグイン作者への感謝を込めて、ささやかながら日本語翻訳に参加させていただいています（参加プロダクトはこちら）