誰にでもあることです。

気に入ったテーマを見つけてインストールし、数ヶ月間サイトの外観を楽しみます。 しかし、数ヶ月後には、そのテーマが陳腐化し、少し退屈に感じられるようになります。

もし、あなたのテーマにちょっとしたスパイスを加え、際立たせることができたら......。

手を上げて絶望する前に、手間をかけずに、しかもサイトの速度を低下させるような不要な画像を追加することなく、簡単にテーマのスパイスを加える方法を紹介しましょう。

WordPress3.8で登場したフォントアイコンです。 ダッシュボードにログインしたときに表示される、クールで素晴らしいアイコンです。 これをテーマにも追加できたら、クールだと思いません？

その方法をお教えしましょう。

ナビゲーションメニューにダッシュコンを使うにはどうしたらよいですか？

ダッシュコンはWordPressのバージョン3.8から搭載されていますが、サイトのフロントエンド（つまりテーマ）に正しく表示させるためには、ダッシュコンを搭載する必要がある、という簡単な例から始めましょう。

ステップ1：テーマのダッシュコンを準備する

テーマのダッシュコンを準備するために、まずfunctions.phpファイルを開きます（外観>エディタにあります。 デフォルトでは、現在のテーマのCSSファイルが開きます）。

ステップ2：スクリプトをエンキューする

一番下までスクロールして、最後に以下のコードを貼り付けてください：

 //Dashicons スクリプトをエンキューする add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } 。 

これで、Dashiconsを使用する準備が整いました。

ステップ3：メニューアイテムにダッシュコンを追加する

ホームリンクにDashiconを追加してみましょう。 Dashiconsのサイトにアクセスして、好きなアイコンを選びます。

更新：Dashiconsは当初GitHub.ioで公開されていましたが、その後WordPress.orgでも公開されるようになりました。

ステップ4：

アイコンをクリックし（今回はホームアイコンを選択）、「HTMLをコピー」をクリックします。 ポップアップウィンドウに必要なコードが表示されます。

ステップ5：

WordPressのダッシュボードに戻り、「外観> メニュー」をクリックし、ナビゲーションラベルと書かれているところにコードを貼り付けてください。

それでも表示させたい場合は、閉じるdivブラケットの後に単語を入力してください。

保存をクリックし、ホームページを読み込みます。 これで、ホームページのリンクにきれいなダッシュコンが表示されるはずです。

ナビゲーションメニューの全項目、または「ホーム」だけにこの操作を行うことができます。 一致するアイコンで、上記の手順を繰り返すだけです。 簡単だったでしょ？

ポストメタにダッシュコンを使うにはどうしたらいいのでしょうか？

つまり、著者名、日付、カテゴリー、タグの前にダッシュコンを追加することができます。

テーマでDashiconsを登録済みなので、あとはstyle.cssファイルを開き（またはカスタムCSSエディタを使用すると、テーマが更新されても変更が失われないので便利です！）、一致するセレクタを見つけてCSSコードを追加するだけです。

例えば、自分の名前や作者の名前の前にアイコンを付けたいとします。

ステップ1：

まず、好きなアイコンを選びます。

ステップ2：

すると、ポップアップウィンドウに貼り付けるべきコードが表示されます。

ステップ3：

style.cssを開き、対応するセレクタ（この場合は.entry-author）を探します。 :before を追加し、DashiconsのウェブサイトからコピーしたCSSコードを貼り付けると、著者の名前の前に素敵なアイコンがつきます。 また、Dashiconsフォントを使っていることも指定します。 修正後のコードは以下のようになりました：

 .entry-author:before { font-family: "dashicons"; content: "\f110"; }. 

スタイリングも少し追加して、完成したコードはこんな感じになりますね：

 .entry-author:before { font-family: "dashicons"; content: "\f110"; color: #f15123; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1; vertical-align: top; margin-right: 5px; margin-right: 0.5rem; } 。 

最終結果

では、最終的にはどのような形になるのでしょうか。

こんな感じかな：

Dashiconsの使い方はたくさんあります。

まとめると

上記の例以外にも、バックエンドでDashiconsを使って、投稿タイプごとに異なるアイコンを指定したり、投稿タイトルやウィジェットタイトルに使用したり、カスタムランディングページを作成している場合は、サイトの異なるページを区別することができます。

ここでは、それらを使って作成できる基本的な例を紹介します：