_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に関しては、別途内容を説明してみたいと思います。

コーディングや
WordPress開発のリソースが足りない!

オレインデザインでは、デザインデータからの HTML コーディングから WordPress テーマ・プラグイン開発まで幅広くウェブ制作に対応しています。

お気軽にお問い合わせください。

WordPress 6.5.x 対応版を出版しました

WordPress デフォルトテーマ Twenty Twenty-Four を使って、シンプルなブログやポートフォリオサイト、そしてコーポレートサイトを作りながら、ブロックテーマやサイトエディターの基本を理解することができます。