「使わないテーマを削除して更新作業を少なくしよう！」という記事を書いたときに、アドミンバーに表示されているアイコンフォントをなんとかしてblogで書けないかな～といろいろ苦労しました。WordPressにはdashiconsというアイコンフォントが入っていて、管理画面などではたくさん使われています。
そのアイコンを自分が好きなところで使えるようにするにはどうすればいいの？ということを試してみました。
子テーマでdashiconsを使えるようにする方法
「使わないテーマを削除して更新作業を少なくしよう！」という記事を書いていて、ダッシュボードに表示される更新のマークをblogの記事中に表示したいと思いました。
このマークです。
管理画面に表示されている更新マークのアイコン部分のソースを見てみました
<li><a href='update-core.php'>更新 <span class='update-plugins count-4' title='3件のプラグイン更新, 翻訳の更新'><span class='update-count'>4</span></span></a></li>
こんな感じのソースでした。この部分をコピーしてペーストしてみましたが、表示されませんでした。classでこのマークがでるようにしているのでそりゃそうかな(^_^;、と思いました。ちゃんと調べると、
#wpadminbar #wp-admin-bar-updates .ab-icon:before {
content: "\f463";
top: 2px;
}こんな感じにアイコンフォントが表示されるようにclassで指定しているみたいです。
同じようにclassで表示してみようと思いました。子テーマのstyle.cssに
.ryus_dashicons_f463:before {
font-size:1rem;
font-family:"dashicons";
content: "\f463";
}このclassを追加しました。ググってしらべたところこのアイコンは dashicons というWordPressが管理画面で使っているアイコンフォントだということがわかったのでfont-familyで指定します。
また、dashiconsを読み込むためには、functions.phpで
function link_dashicons() {
wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'link_dashicons');を追加します。
これで
このように固定ページや投稿ページのテキストタブで記述すると、
こんな感じにアイコンフォントの更新マークが頭に付いて表示されました。
dashiconsのアイコンフォントの一覧
blogを書いたときはこれしかしていなかったのですが、WordPressのアイコンフォントが使えるなら一覧をみつけていろいろ使ってみたいなと思いました。
検索してこちらのページを見つけました
https://developer.wordpress.org/resource/dashicons/
ここにdashiconsのすべてのアイコンフォントが表示されています。
使いたいアイコンフォントを見つけたら
クリックすると
大きく表示されます。
Copy HTML をクリックすると
こんな感じにコピーすると使えそうなコードが表示されます。
<span class="dashicons dashicons-facebook"></span>
このコードをコピーして投稿のテキストタブに貼り付けてみると
↑Facebookのアイコンフォントが表示されました。
cssを作らなくてもずっと簡単にアイコンフォントを表示することができます(^^)/
落とし穴。ログイン中は表示されるけれど…
この表示はテーマを変更した場合はどうなるんだろう？とテーマを変更して表示してみました
ちゃんと表示されます。あれれ？テーマを変えても表示されるならば、子テーマのfunctions.phpで
wp_enqueue_style('dashicons');
このへんをやらなくても大丈夫なんじゃないかな？でもおかしいな？と思って別のブラウザ(ログインしていない状態)で見たところ、
表示されていませんでした(^_^;。同じブラウザのchromeシークレットモードで見ても
と、表示されていません。つまり、ログイン中は
ツールバーを表示する時にダッシュアイコンが使われているので、ダッシュアイコンが読み込まれている、しかしログインしていなければ読み込まれていないので表示されない、ということみたいです。
ログインして記事を書いて表示確認をしていたので、最初この落とし穴にはまって数日アイコンを表示したつもりで表示されていない状態でした！
まとめ:ダッシュアイコンを使う方法をまとめると
ということでダッシュアイコンを使う方法をまとめます。
ログインしていなくても見ることのできる投稿や固定ページでダッシュアイコンを使いたいときは、利用中の子テーマでダッシュアイコンを読み込みます。
dashiconsを読み込むために、子テーマのfunctions.phpで
function link_dashicons() {
wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'link_dashicons');これを追加します。
あとは「dashiconsのアイコンフォントの一覧」で書いたページで使いたいアイコンのHTMLをコピーして投稿や固定ページのテキストタブにペーストするだけでダッシュアイコンが表示されます。
もしも管理画面やログインした人だけが見るコンテンツならばdashiconsを読み込まなくてもHTMLをコピーしたものを貼り付けるだけで、どのテーマでも表示させることができます。ログイン中はdashiconsが自動的に読み込まれているからです。
[amazon_searchlink search=”WordPress”]
コメント