【WordPress】functions.phpでスタイルシートとjsファイルを読み込む

親テーマのfunctions.phpで、スタイルシート(cssファイル)とjsファイルを読み込んで有効化させる方法。

スタイルシートを読み込む

WordPressの親テーマでスタイルシートを<head>～<head>タグ内で読み込むには、wp_enqueue_style()をアクションフックであるwp_enqueue_scriptsにフックさせる。

ますは、wp_enqueue_style()の書き方。

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

パラメータの解説

$handle
ハンドル名。任意の文字列で良い。

$src
読み込みたいcssファイルまでのパス。

$deps
このスタイルシートより前に読み込まれる必要があるスタイルシートのハンドル配列。依存関係がない場合は空の配列を指定するか、記述しない。

$ver
スタイルシートのバージョン番号を指定する文字列。記述は任意で良い。

$media
スタイルシートが定義されているメディアを指定する文字列。記述は任意で良い。

使用例

親テーマのスタイルシートをwp_enqueue_scriptsにフックし読み込む場合の記述例。

function snk_enqueue_style() {
  wp_enqueue_style(
　　　'reset-style',
　　　get_template_directory_uri() . '/css/sanitize.css');
  wp_enqueue_style(
　　　'main-css',
　　　get_template_directory_uri() . '/style.css');
  wp_enqueue_style(
　　　'layout-style',
　　　get_template_directory_uri() . '/css/layout-before-endbody.css');
add_action('wp_enqueue_scripts', 'snk_enqueue_style');

コードの解説

  1. 親テーマのfunctions.phpにsnk_enqueue_style()という関数を準備する
  2. 読み込むスタイルシートの数だけ、wp_enqueue_style()を準備する
  3. snk_enqueue_style()の第一引数に、スタイルシートの目的に沿ったハンドル名を指定する
  4. snk_enqueue_style()の第二引数に、読み込むスタイルシートまでのパスを記述する
    このとき、スタイルシートまでのパスは、親テーマのスタイルシートであれば、get_template_directory_uri()を使用する
  5. 設定完了したsnk_enqueue_style()を、wp_enqueue_scriptsにフックする

jsファイルを読み込む

WordPressの親テーマでjsファイルを<head>～<head>タグ内で読み込むには、wp_enqueue_script()をアクションフックであるwp_enqueue_scriptsにフックさせる。

wp_enqueue_script()の第五引数をtrueにすれば、</body>終了タグの前に配置することもできる。

ますは、wp_enqueue_script()の書き方。

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

パラメータの解説

$handle
ハンドル名。任意の文字列で良い。

$src
読み込みたいjsファイルまでのパス。

$deps
このスクリプトより前に読み込まれる必要があるスクリプトのハンドル配列。依存関係がない場合は空の配列を指定する。

$ver
スクリプトのバージョン番号を指定する文字列。

  • バージョンが指定されていない場合は false に設定され、WordPress は自動的に現在の WordPress のバージョン数と同じバージョン番号を追加する。
  • null に設定した場合はバージョン番号は追加されない。

$in_footer
スクリプトは通常 HTML ドキュメントの<head>に置かれるが、もしこのパラメータがtrue の場合 wp_footer()（終了タグの前）で読み込める。

使用例

親テーマ配下のスクリプトをwp_enqueue_scriptsにフックし読み込む場合の記述例。

function snk_enqueue_scripts() {
  wp_enqueue_script(
　　'main-script', 
　　get_template_directory_uri() . '/js/layout-before-endbody.js',
　　array(),
　　false,
　　true);
}
add_action('wp_enqueue_scripts', 'snk_enqueue_scripts');

コードの解説

  1. 親テーマのfunctions.phpにsnk_enqueue_scripts()という関数を準備する
  2. 読み込むスクリプトの数だけ、wp_enqueue_script()を準備する
  3. wp_enqueue_script()の第一引数に、スクリプトの目的に沿ったハンドル名を指定する
  4. wp_enqueue_script()の第二引数に、読み込むスクリプトまでのパスを記述する
    このとき、スクリプトまでのパスは、親テーマのスタイルシートであれば、get_template_directory_uri()を使用する
  5. wp_enqueue_script()の第三引数に、依存関係を指定する。特に指定がなければarray()とする
  6. wp_enqueue_script()の第四引数に、任意のバージョンを指定する。特に指定がなければfalseとする
  7. wp_enqueue_script()の第五引数に、スクリプトの読み込み位置を指定する。
    wp_head()で読み込む→falseと指定
    wp_footer()で読み込む→trueと指定
  8. 設定完了したsnk_enqueue_style()を、wp_enqueue_scriptsにフックする

注意点

関数のwp_enqueue_script()とアクションフックのwp_enqueue_scriptsは、文末のsの有無の違いしかないため、入力ミスに注意する。

まとめ

スタイルシートとjsファイルをfunctions.phpで読み込む時は、

  • スタイルシートであればsnk_enqueue_style()
  • jsファイルであればwp_enqueue_script()

をアクションフックwp_enqueue_scriptsにフックさせる。

Related Tags