WordPressに入っているアイコンフォントdashiconsを使う方法

「使わないテーマを削除して更新作業を少なくしよう!」という記事を書いたときに、アドミンバーに表示されているアイコンフォントをなんとかしてblogで書けないかな~といろいろ苦労しました。WordPressにはdashiconsというアイコンフォントが入っていて、管理画面などではたくさん使われています。
そのアイコンを自分が好きなところで使えるようにするにはどうすればいいの?ということを試してみました。

子テーマでdashiconsを使えるようにする方法

「使わないテーマを削除して更新作業を少なくしよう!」という記事を書いていて、ダッシュボードに表示される更新のマークblogの記事中に表示したいと思いました。

このマークです。

管理画面に表示されている更新マークのアイコン部分のソースを見てみました

こんな感じのソースでした。この部分をコピーしてペーストしてみましたが、表示されませんでした。classでこのマークがでるようにしているのでそりゃそうかな(^_^;、と思いました。ちゃんと調べると、

こんな感じにアイコンフォントが表示されるようにclassで指定しているみたいです。

同じようにclassで表示してみようと思いました。子テーマのstyle.css

このclassを追加しました。ググってしらべたところこのアイコンは dashicons というWordPressが管理画面で使っているアイコンフォントだということがわかったのでfont-familyで指定します。

また、dashiconsを読み込むためには、functions.php

を追加します。

これで

このように固定ページや投稿ページテキストタブで記述すると、

こんな感じにアイコンフォントの更新マークが頭に付いて表示されました。

dashiconsのアイコンフォントの一覧

blogを書いたときはこれしかしていなかったのですが、WordPressのアイコンフォントが使えるなら一覧をみつけていろいろ使ってみたいなと思いました。

検索してこちらのページを見つけました

https://developer.wordpress.org/resource/dashicons/

ここにdashiconsのすべてのアイコンフォントが表示されています。

使いたいアイコンフォントを見つけたら



クリック
すると

大きく表示されます。

Copy HTML をクリックすると

こんな感じにコピーすると使えそうなコードが表示されます。

このコードをコピーして投稿のテキストタブに貼り付けてみると

Facebookのアイコンフォントが表示されました。

cssを作らなくてもずっと簡単にアイコンフォントを表示することができます(^^)/

落とし穴。ログイン中は表示されるけれど…

この表示はテーマを変更した場合はどうなるんだろう?とテーマを変更して表示してみました

ちゃんと表示されます。あれれ?テーマを変えても表示されるならば、子テーマのfunctions.php

このへんをやらなくても大丈夫なんじゃないかな?でもおかしいな?と思って別のブラウザ(ログインしていない状態)で見たところ、

表示されていませんでした(^_^;。同じブラウザのchromeシークレットモードで見ても

と、表示されていません。つまり、ログイン中

ツールバーを表示する時にダッシュアイコンが使われているので、ダッシュアイコンが読み込まれている、しかしログインしていなければ読み込まれていないので表示されない、ということみたいです。

ログインして記事を書いて表示確認をしていたので、最初この落とし穴にはまって数日アイコンを表示したつもりで表示されていない状態でした!

まとめ:ダッシュアイコンを使う方法をまとめると

ということでダッシュアイコンを使う方法をまとめます。

ログインしていなくても見ることのできる投稿や固定ページでダッシュアイコンを使いたいときは、利用中の子テーマでダッシュアイコンを読み込みます。

dashiconsを読み込むために、子テーマのfunctions.php
 

これを追加します。

あとは「dashiconsのアイコンフォントの一覧」で書いたページで使いたいアイコンのHTMLをコピーして投稿や固定ページのテキストタブにペーストするだけでダッシュアイコンが表示されます。

もしも管理画面やログインした人だけが見るコンテンツならばdashiconsを読み込まなくてもHTMLをコピーしたものを貼り付けるだけで、どのテーマでも表示させることができます。ログイン中はdashiconsが自動的に読み込まれているからです。

[Amazon sponsored link] WordPress 関連本
兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る