_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行目辺りからこのようなコードを見つけることができます。

/**
 * 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 日本語版

デフォルトの状態では、テーマ自身の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に関しては、別途内容を説明してみたいと思います。

ホームページのお話しませんか?

気楽にカフェや喫茶店で雑談するくらいの雰囲気で、あなたのホームページのお話をしませんか?

  • ブックマーク
  • -
    コピー

この記事を書いた人

久野 晃司

岐阜を中心にWeb制作全般のお仕事をしているフリーランスです。趣味はサッカー・F1観戦。英国プレミアリーグ、マンチェスターユナイテッドを長年愛しています。英国滞在歴2年、日常英会話くらいは大丈夫です。20ヶ国以上列車で単独周遊してきました。WordPress大好きです。Gifu WordPress Meetup共同オーガナイザー・CoderDojo岐阜チャンピオンなどの活動もしています。