前回は_s（underscores）でWordPressテーマを作成するための準備という内容で書いてみました。
今回は、_s（underscores）でFontAwesomeを使うための設定をご紹介します。といっても簡単なんですけどね。単純にfunctions.phpにコードを追加するだけです。
FonAwesomeの外部CSSのURLをコピーしてくる
まずはこちらにアクセスしましょう。FontAwesome公式サイトの導入方法説明のページです。
そして、こちらの部分にCDNが書いてあるのでコピーしてきましょう。
上の画像ではこのようなURLになっているかと思います。（画像で青く選択している部分です）（記事執筆時）
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
functions.phpにコードを加える
次にfunctions.phpを開きましょう。
すると99行目辺りからこのようなコードを見つけることができます。
/**
* Enqueue scripts and styles.
*/
function olein_scripts() {
wp_enqueue_style( 'olein-style', get_stylesheet_uri() );
wp_enqueue_script( 'olein-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
wp_enqueue_script( 'olein-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'olein_scripts' );
上記コードのこちらの部分に注目しましょう。
wp_enqueue_style( 'olein-style', get_stylesheet_uri() );
wp_enqueue_styleというのは、WordPressが作ったページに対してスタイルシートファイルを追加してくれる関数になります。Codexではこのように書いてあります。
WordPress が生成したページに CSS スタイルファイルを安全に (キューへ) 追加します。wp_register_style() で最初に登録されていれば、そのハンドルを使って追加することができます。
デフォルトの状態では、テーマ自身のCSS（この場合、get_stylesheet_uriという関数で）を読み込むように書いてあります。ですので、これに習ってFontAwesomeのCSSを追記します。
wp_enqueue_style( 'olein-style', get_stylesheet_uri() );の下に、
wp_enqueue_style( 'olein-fontawesome', 'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );
全体としてはこのような記述になります。
/**
* Enqueue scripts and styles.
*/
function olein_scripts() {
wp_enqueue_style( 'olein-style', get_stylesheet_uri() );
wp_enqueue_style( 'olein-fontawesome', 'http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );
wp_enqueue_script( 'olein-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
wp_enqueue_script( 'olein-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'olein_scripts' );
olein-fontawesomeという部分はハンドル名なので自分のわかりやすい名前を使って良いと思います。一応、規則性を持たせるためにolein-**という形で記述しました。
また、FontAwesome公式サイトからコピーしてきたURLにはhttp:が記載されていないので追記する必要があります。この点はご注意ください。
まとめ
今回の方法でスタイルシートやJavaScriptなどを読み込む方法を覚えると、発展系として必要な場面（特定のページとか）だけファイルを読み込む・読み込まないというプログラムも書くことができます。
デフォルトの
