WordPressのテーマ制作で必要なcssとjsの設定方法

2016.09.29

WordPressでのcss, jsファイル設置方法

WordPressでテーマファイルを作成する時には、デザインに必要なスタイルシート(以下css)やjavascript(以下js)での動作といった設定が必要になってきます。

普通のhtmlファイルでしたら <head>〰</head>タグの中で以下のような形で必要なファイルを読み込ませる設定します。

  <head>
    <title>タイトル</title>
    <link rel="stylesheet" href="/sample.css" type="text/css" media="screen" />
    <script src="/js/sample.js"></script>
  </head>

これをWordPressで設置したい場合には単純に考えて<head>タグがあるヘッダーheader.phpに同じようにHTMLで直接記述しても動作します。しかしWordPress側でこの設定を支援する機能が存在します。

それがwp_enqueue_style, wp_enqueue_script関数を使って読み込ませる方法です。

スタイルシート(css)の読み込み	wp_enqueue_style
javascript(js)の読み込み	wp_enqueue_script

上記のsample.cssとsample.jsをこの方法で設定するには下記のようにfunctions.phpに書き込みます。

function my_enqueue_script() {
    wp_enqueue_style( 'sample-style', get_template_directory_uri() . '/sample.css');
    wp_enqueue_script( 'sample-js', get_template_directory_uri() . '/sample.js');
}

add_action( 'wp_enqueue_scripts', 'my_enqueue_script' );

これらをテーマファイル内の例えばfunctions.phpから下記のような設定で読み込ませる事で、テンプレート内では、header.phpのに入れる部分では、テンプレートの</head>の直前。

    <?php wp_head(); ?>
    </head>

またフッターの footer.php等 </body> の直前に入れる場合には、

<?php wp_footer(); ?>

この関数がよばれた時に、それぞれでの設定したcssやjsが表示されるようにになります。

ちなみにこの２つの関数wp_headとwp_footer（wp_footではない)を入れることで、WordPressにログインして、通常のページを開いた時に、一番上に黒い管理画面の帯のブロックが表示されます。自分がログイン状態にある事がわかり、表示ページや記事から直接編集画面へ飛べるので、とても便利です。

wp_enqueue_style, wp_enqueue_scriptを使うメリット

では、なぜわざわざ直接htmlを書かずにwp_enqueue_styleやwp_enqueue_scriptを利用するのでしょうか。下記の理由が挙げられます。

jquery等の汎用javascriptの重複読み込みを避ける事ができる(js)
子テーマ依存関係を設定できる
バージョンを指定してブラウザの閲覧者のキャッシュをコントロールできる
ヘッダーとフッターの表示位置の選択ができる(js)

こうしてみると、jsを指定するwp_enqueue_scriptの方はかなり使うメリットがあると思われます。特にplugin等でjquery関連のjavascriptを使っている場合には同じ読み込みを防げるので、トラブルがなくなります。

またオプション一つでヘッダーやフッターの位置を切り替えられるので、読み込み速度の対策にも効果的です。

wordpressではjqueryが元々と入っていて、予約語のように設定されています。また依存関係を指定すれば、勝手に必要なjsをロードしてくれます。

  wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '3.3.5' );

jquery以外のjsですが、wp-includes/script-loader.php内の$scripts->add(..)で下記のようにずらっと設定されています。
もし、どのようなスクリプトが予約語として登録されているかを参考にしてください。

  // jQuery
	$scripts->add( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4' );
	$scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4' );
	$scripts->add( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );

	// full jQuery UI
	$scripts->add( 'jquery-ui-core', "/wp-includes/js/jquery/ui/core$dev_suffix.js", array('jquery'), '1.11.4', 1 );
	$scripts->add( 'jquery-effects-core', "/wp-includes/js/jquery/ui/effect$dev_suffix.js", array('jquery'), '1.11.4', 1 );

	$scripts->add( 'jquery-effects-blind', "/wp-includes/js/jquery/ui/effect-blind$dev_suffix.js", array('jquery-effects-core'), '1.11.4', 1 );
  ....

一方cssですが必ず用意するstyle.cssは下記のように指定方法を簡略化できます。

  wp_enqueue_style( 'main-style', get_stylesheet_uri() );

また、単体記事ページと他のページで読み込むcssを別のファイルに分離してデザインを切り分けたい時には、下記のようにfunctions.phpに記入する事で制御できるようになります。

function my_enqueue_script() {
    if (is_single()) {
        // 単体記事の時のデザイン
        wp_enqueue_style( 'single-style', get_template_directory_uri() . '/sample-single.css');
    } else {
        // その他のデザイン
        wp_enqueue_style( 'others-style', get_template_directory_uri() . '/sample-others.css');
    }
    wp_enqueue_script( 'sample-js', get_template_directory_uri() . '/sample.js');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_script' );

これはheader.phpに直接phpのif文を書いて指定する事もでできるのですが、テンプレートとプログラムはある程度分離しておいた方がメンテナンス性は良くなります。

まとめ

WordPressではたくさんの個人や企業がプラグインを作り、それを気軽に入れる事ができる仕組みになっています。このwp_enqueue関数もそのような工夫の一つです。是非使っていきましょう。

技術情報