WordPressのウイジェット（カテゴリ、固定ページ、アーカイブ）のリスト手前にFont Awesomeを設置するカスタマイズ方法

WordPressウィジェットの、アーカイブやカテゴリ、固定ページなどは、基本的に以下のようになっています。

今回は、こういったリストの先頭にFont Awesomeでワンポイントを入れる方法を紹介したいと思います。

最終的には、以下のような表示を目指したいと思います。

ウィジェットのリスト構造

ウィジェットのリスト構造<li>は、基本的に以下のようになっています。

<div id="[ウィジェットID]" class="widget [ウィジェットの種類クラス]">
  <h4 class="widgettitle">タイトルがない場合もあるけど</h4>
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
  </ul>
</div>

ulとliなどのリスト構造なので、CSSなどでリストスタイルを指定して画像を指定しても、ワンポイント置くこともできます。

ただ、その方法だと、画像の準備が必要ですし、他にやり方を紹介されているページもたくさんあると思うので、今回はFont Awesomeを利用して、スタイルシートを使って指定する方法を紹介します。

リストにFont Awesomeを指定する手順

まずはウィジェットのリスト先頭に、Font Awesomeを指定する簡単な手順を説明します。

主な手順は以下のようになります。

Font Awesomeを使用する準備をする
Font Awesomeから利用したいアイコンを見つけUnicodeナンバーを取得する
ブラウザの開発ツールでCSSセレクタを見つける
CSSを編集する

こんな感じになります。

以下では、順を追って説明します。

Font Awesomeを使用する準備

Font Awesomeを使用するには、Font Awesomeを使うためのファイルを読み込む必要があります。

もう既にFont Awesomeが読み込まれている場合は、この設定は必要ありません。Simplicityを利用している場合も必要ありません。

一番簡単な方法は、<head></head>内に以下のタグを挿入することです。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

他にも、自分のサーバーにファイルを置く方法もありますが、その方法についてはGet Startedを参照してください。

※なるべく最新版を利用してください。

利用したいアイコンを探す

次に、利用したいアイコンをThe Iconsから、探してきます。

The Iconsに行くと、以下のようにアイコン一覧があるので使用したいアイコンをクリックします。

今回は、以下のアイコンフォントを使うとして、重要になってくるのは「 Unicode」と書いてある赤枠の部分です。

この「Unicodeナンバー（コード）」を覚えておくか、メモしておいてください。

開発環境でCSSセレクターを見つける

次は、ウィジェットのリストをCSSから変更するために、ブラウザのWEB開発ツールから、CSSセレクターを見つけます。

今回は、僕のやっている2つのブログとも、Chromeユーザーがダントツに多いので、Chromeのデベロッパーツールを使用した方法を紹介します。

今回は、例としてアーカイブウィジェットと、カテゴリウィジェットのCSSセレクタの取得方法を紹介します。

アーカイブウィジェットリスト部分のCSSセレクタ取得

まずは、リストの上で右クリックして「要素を検証」を選択してください。

すると以下のようにウェブマスターツールが立ち上がります。

そしてよく見ると、先程右クリックしたHTML要素にフォーカスが当たっているので注目してみます。

すると、フォーカス周辺は以下のようなHTMLソースになっています。

<div id="archives-9" class="widget widget_archive">
  <h4 class="widgettitle">アーカイブ</h4>
  <ul>
    <li>
    <a href="">2014年11月</a>
    </li>
    <li>
    <a href="">2014年10月</a>
    </li>
    <li>
    <a href="">2014年9月</a>
    </li>
  </ul>
</div>

アーカイブウィジェットは、リスト一つ一つに固有のIDが振られていないので、<li>あたりに次のようなCSSセレクターを割り振ることができます。

選択したウィジェットのみに適用されるCSSセレクタ
アーカイブウィジェットすべてに適用されるCSSセレクタ

選択したウィジェットのみ

選択したウィジェットのみに適用されるCSSセレクタは以下のようになります。

#archives-9 li{...}

#archives-9の番号は、環境によって違いますので、自身のものに合わせてください。

アーカイブウィジェットすべてに

アーカイブウィジェットすべてに適用されるCSSセレクタは以下のようになります。

.widget_archive li{...}

ここらへんはややこしいかもしれませんが、使っていくうちに、そのうち慣れると思います。

詳しくは、以下のページを参考にしてください。

セレクタの種類－CSSの基本

CSSの基本解説・チュートリアル

カテゴリウィジェットリスト部分のCSSセレクタ取得

こちらも、先程同様Chromeのウィジェットリスト上を右クリックして「要素の検証」を選択してください。

すると、「カテゴリウィジェット」、「固定ページウィジェット」の場合は、以下のようなソースが表示されます。

<div id="categories-9" class="widget widget_categories">
  <h4 class="widgettitle">カテゴリー</h4>
  <ul>
    <li class="cat-item cat-item-10">
      <a href="">サッカー</a>
    </li>
    <li class="cat-item cat-item-11"></li>
    <li class="cat-item cat-item-12"></li>
    <li class="cat-item cat-item-13"></li>
    
  </ul>
</div>

今回ポイントとなるのは、アーカイブウィジェットとは違って、<li>には固有のclass名が与えられるということです。このクラス名を使用すれば、個別に先頭アイコンを指定することができます。

もちろん、先程と同様に1、2も選択できます

選択したウィジェットのみに適用されるCSSセレクタ
カテゴリウィジェットすべてに適用されるCSSセレクタ
それぞれのカテゴリリストに対して適用されるCSSセレクタ

選択したウィジェットのみ

選択したウィジェットのみに適用されるCSSセレクタは以下のようになります。

#categories-9 li{...}

#categories-9の番号は、環境によって違いますので、自身のものに合わせてください。

アーカイブウィジェットすべてに

アーカイブウィジェットすべてに適用されるCSSセレクタは以下のようになります。

.widget_categories li{...}

それぞれのカテゴリリストのみに

それぞれのカテゴリリストのみに適用されるCSSセレクタは、以下のように書いていけばOKです。

.cat-item-11{...}
.cat-item-12{...}
.cat-item-13{...}

こちらも、class名はそれぞれのカテゴリによって違うので、その都度デベロッパーツールなどから確認してください。

CSSを編集する

最後に、これまでのことを踏まえてCSSを編集します。

WordPressでしたら通常は、style.cssに記入すればOKかと思います。

ウィジェットのリスト前にFont Awesomeのフォントを挿入するには、基本的にはこのような書き方になります。

/*:before擬似要素を用いて書く*/
[CSSセレクタ]:before {
  content: " \[取得したUnicode]";
  font-family: FontAwesome;/*Font Awesomeのフォント使用*/
  margin-right:3px;/*右側に少し余白*/
}

要は、先の手順で取得した[取得したUnicode]と[CSSセレクタ]の2箇所を、どんどんはめ込んでいってやれば設定できます。

:before擬似要素については、以下を参照してください。

:before擬似要素－スタイルシートリファレンス

HTMLタグ・スタイルシート・特殊文字等の早見表

アーカイブウィジェットリストの設定例

例えば、アーカイブウィジェットリストすべてを挿入するのであれば、以下のように書きます。

アーカイブウィジェットすべてに適用される書き方。

.widget_archive li:before {
  content: " \f105";
  font-family: FontAwesome;
  margin-right:5px;
}

Unicodeの手前に\を忘れないでください。margin-rightは環境に合わせて調節してください。

※Font Awesome最新版のファイルを使用しないと、サイトに表示されているUnicodeとファイルのUnicodeが違う場合があります。そうすると、アイコンが表示されないので、ご注意ください。

style.cssにこのように記入すると、以下のように表示されます。

Font Awesomeにはいろいろなアイコンフォントがあるので自由に選択してください。

カテゴリーウィジェットリストの設定例

先程、ウィジェットリスト全体にスタイルを適用する方法は紹介したので、今回はカテゴリリストそれぞれにアイコンフォントを設定する方法を紹介します。

例えば次のようなリストがあった場合は、

以下のように設定します。

.cat-item-10:before {
  content: " \f1e3";
  font-family: FontAwesome;
  margin-right:3px;
}

.cat-item-11:before {
  content: " \f001";
  font-family: FontAwesome;
  margin-right:3px;
}

.cat-item-12:before {
  content: " \f1b0";
  font-family: FontAwesome;
  margin-right:3px;
}

.cat-item-13:before {
  content: " \f03e";
  font-family: FontAwesome;
  margin-right:3px;
}

すると、以下のような表示になります。

編集の効率的には以下のように書いた方が良いのですが、説明がややこしくなってしまいます。ですので今回は説明を単純化するためにあえて前述のように書きました。

.cat-item:before {
  font-family: FontAwesome;
  margin-right:3px;
}

.cat-item-10:before {
  content: " \f1e3";
}

.cat-item-11:before {
  content: " \f001";
}

.cat-item-12:before {
  content: " \f1b0";
}

.cat-item-13:before {
  content: " \f03e";
}

この記述方法にピンと来た場合は、こちらの書き方でもOKです。

固定ページウィジェットリストの設定例

固定ページウィジェットも基本的にはカテゴリウィジェットと同じように設定します。

こんな感じなのを

以下のように設定すると

.page-item-1460:before {
  content: " \f0e5";
  font-family: FontAwesome;
  margin-right:3px;
}
.page-item-143:before {
  content: " \f007";
  font-family: FontAwesome;
  margin-right:3px;
}

.page-item-144:before {
  content: " \f183";
  font-family: FontAwesome;
  margin-right:3px;
}

.page-item-145:before {
  content: " \f182";
  font-family: FontAwesome;
  margin-right:3px;
}

以下のように表示されます。