_s(underscores)でFontAwesomeを利用する方法

前回は_s(underscores)でWordPressテーマを作成するための準備という内容で書いてみました。

今回は、_s(underscores)でFontAwesomeを使うための設定をご紹介します。といっても簡単なんですけどね。単純にfunctions.phpにコードを追加するだけです。

FonAwesomeの外部CSSのURLをコピーしてくる

まずはこちらにアクセスしましょう。FontAwesome公式サイトの導入方法説明のページです。

Get Started with Font Awesome

そして、こちらの部分にCDNが書いてあるのでコピーしてきましょう。

fontawesome-on-underscores

上の画像ではこのようなURLになっているかと思います。(画像で青く選択している部分です)(記事執筆時)

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

functions.phpにコードを加える

次にfunctions.phpを開きましょう。

すると99行目辺りからこのようなコードを見つけることができます。

上記コードのこちらの部分に注目しましょう。
wp_enqueue_style( 'olein-style', get_stylesheet_uri() );

wp_enqueue_styleというのは、WordPressが作ったページに対してスタイルシートファイルを追加してくれる関数になります。Codexではこのように書いてあります。

WordPress が生成したページに CSS スタイルファイルを安全に (キューへ) 追加します。wp_register_style() で最初に登録されていれば、そのハンドルを使って追加することができます。

関数リファレンス/wp enqueue style – WordPress Codex 日本語版

デフォルトの状態では、テーマ自身のCSS(この場合、get_stylesheet_uriという関数で)を読み込むように書いてあります。ですので、これに習ってFontAwesomeのCSSを追記します。

wp_enqueue_style( 'olein-style', get_stylesheet_uri() );の下に、

全体としてはこのような記述になります。

olein-fontawesomeという部分はハンドル名なので自分のわかりやすい名前を使って良いと思います。一応、規則性を持たせるためにolein-**という形で記述しました。

また、FontAwesome公式サイトからコピーしてきたURLにはhttp:が記載されていないので追記する必要があります。この点はご注意ください。

まとめ

今回の方法でスタイルシートやJavaScriptなどを読み込む方法を覚えると、発展系として必要な場面(特定のページとか)だけファイルを読み込む・読み込まないというプログラムも書くことができます。

デフォルトのfunctions.phpに関しては、別途内容を説明してみたいと思います。