---
title: "_s(underscores)でFontAwesomeを利用する方法"
canonical_url: "https://olein-design.com/blog/fontawesome-on-underscores"
language: "ja"
date_published: "2014-12-10T15:40:16+09:00"
date_modified: "2014-12-10T15:40:16+09:00"
content_type: "post"
author: "久野晃司"
taxonomies:
  category:
    - "WordPress"
  post_tag:
    - "underscores"
---

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

前回は[_s（underscores）でWordPressテーマを作成するための準備](https://olein-design.com/concrete5/install-concrete5-to-local-environment-created-by-mamp)という内容で書いてみました。 今回は、_s（underscores）でFontAwesomeを使うための設定をご紹介します。といっても簡単なんですけどね。単純にfunctions.phpにコードを追加するだけです。 ## FonAwesomeの外部CSSのURLをコピーしてくる

 まずはこちらにアクセスしましょう。FontAwesome公式サイトの導入方法説明のページです。 [Get Started with Font Awesome](http://fontawesome.io/get-started/)[!\[\](http://b.hatena.ne.jp/entry/image/http://fontawesome.io/get-started/)](http://b.hatena.ne.jp/entry/http://fontawesome.io/get-started/)

 そして、こちらの部分にCDNが書いてあるのでコピーしてきましょう。 ![fontawesome-on-underscores](https://olein-design.com/wp-content/uploads/2014/12/fontawesome-on-underscores-1024x278.png) 上の画像ではこのような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() で最初に登録されていれば、そのハンドルを使って追加することができます。 [関数リファレンス/wp enqueue style - WordPress Codex 日本語版](http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_style)[!\[\](http://b.hatena.ne.jp/entry/image/http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_style)](http://b.hatena.ne.jp/entry/http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_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などを読み込む方法を覚えると、発展系として必要な場面（特定のページとか）だけファイルを読み込む・読み込まないというプログラムも書くことができます。 デフォルトのfunctions.phpに関しては、別途内容を説明してみたいと思います。