WordPress:Dashiconsをテーマで使用する方法

  • Posted on
  • Category : WordPress
WordPress:Dashiconsをテーマで使用する方法

このブログで使ってみようと思い、WordPressの3.8から導入されたアイコンフォント「Dashicons」を管理画面ではなくテーマで使用する方法を調べたので備忘録です。また、3.9から「dashicons-before」というクラスが追加されたの知らなかったので、それに関しても書いておこうと思います。

Dashiconsを使用できる状態にする

参考で見たやつそのままですが、まずDashiconsを使用できる状態にするためにCSSを読み込む必要があるので、以下のどちらかをfunctions.phpに記述します。

functions.php

add_action( 'wp_enqueue_scripts', 'load_dashicons' );

function load_dashicons() {
	wp_enqueue_style( 'dashicons' );
}

または…

functions.php

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri(), array('dashicons'), '1.0' );
}

上記どちらかを記述してソースを見ると、dashicons.min.cssが読み込まれていることを確認できると思います。
どちらの方法を用いるかはテーマや自身が使いやすい方に合わせてください。
この方法は以下はそのまま以下で紹介されている方法です。

また、上記それぞれで使用しているwp_enqueue_styleについて詳しく知りたい場合はCodexで詳細を確認できます。

Back to top

Dashiconsを使用する

CSSを読み込んでDashiconsを使用できる状態になったら、あとは下記のように表示したいところにHTMLもしくはCSSで記述・指定すれば使用できます。
例えば、WordPressのロゴを表示させたい時はそれぞれ以下のように記述し、ソースの赤字部分を変更することで他のアイコンに変更することができます。

HTMLの場合 #1

HTML

<div class="dashicons dashicons-wordpress"></div>

HTMLの場合 #2

3.8のDashicons導入時にはなかったんですが、3.9になりdashicons-beforeというクラスが追加され、表示するだけならこのクラスを使うことでCSSを変更することなく:beforeを使用したアイコン表示ができるようになったみたいです。

HTML

<p class="dashicons-before dashicons-wordpress">WordPress</p>

CSSの場合

CSS

element:before {
	font-family: "dashicons";
	content: "\f120";
}

どのアイコンがどのクラスやコードを記述することで使用できるかは「Dashicons」で確認することができ、一覧化されているアイコンの中から使用したいアイコンを選ぶと、下のキャプチャのようにページ上部に選択したアイコンが大きく表示されます。
あとはCSSで使用したい場合は「Copy CSS」を、HTMLで使用したい時は「Copy HTML」をそれぞれ選択すると該当のコードが出力されるので、それを用いることで選択したアイコンを使用することができます。

Dashiconsのコード確認

3.9でも新たに30種類のアイコンが追加(WordPress › Dashicons in WordPress 3.9 « Make WordPress Core)されたので、今後も種類が増えていくとは思いますが、現状だと以下のようなアイコンが使用できます。

Dashicons一覧

Back to Top

WordPress:Dashiconsをテーマで使用する方法

WordPress:Dashiconsをテーマで使用する方法

/ WordPress

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。