y.o.designers-works

WordPressでCSSとJavaScriptを正しく読み込ませる方法

CSSやJavaScriptを読み込ませるときはヘッダーやフッターに読み込ませる事が一般的ですね。
ですが、WordPressではfunctions.phpにアクションフックと関数の記述をして読み込む方法があります。
今回紹介する「wp_enqueue_style」関数「wp_enqueue_script」関数を使用すると、 読み込みの重複を回避、かつ依存関係も考慮しながらファイルを読み込ませることができます。

wp_enqueue_script

functions.phpに記述

  <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
  

設定できるパラメータ

引数名 概要 デフォルト値
$handle スクリプトの識別名 none
$src スクリプトのURL false
$deps 依存するスクリプト array()
$ver スクリプトのバージョン false
$in_footer スクリプトの読み込み位置(trueで/body前、falseで/head前) false

使用例

    function my_script() {
    wp_enqueue_script( 'example', get_template_directory_uri() . '/js/example.js', array('jQuery'), '1.0.0', true );
    }
    add_action( 'wp_enqueue_scripts', 'my_script' );
    

上記の例ですとハンドル名が「example」で、現在使用しているテーマ内の「js」ディレクトリの「example.js」というファイルを「jQuery」というハンドル名のファイルの後に読み込み、バージョンを「1.0.0」とし、</body>の前に読み込みます。

「$handle」に設定する名前は自由ですが、使用できない物がいくつかあります。 利用頻度の高いものでは「jQuery」や「common」などが使用できません。

wp_enqueue_style

functions.phpに記述

  <?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
  

設定できるパラメータ

引数名 概要 デフォルト値
$handle スタイルシートの識別名 none
$src スタイルシートのURL false
$deps 依存するスクリプト array()
$ver スタイルシートのバージョン false
$media スタイルシートのメディア指定 all

使用例

    function my_style() {
    
    wp_enqueue_style( 'my_style', get_template_directory_uri() . '/css/style.css' );
    }
    
    add_action( 'wp_enqueue_scripts', 'my_style' );
    

上記の例ですとハンドル名が「my_style」で、現在使用しているテーマ内の「css」ディレクトリの「style.css」というファイルを読み込みます。

ひとつのアクションフックからスクリプトとスタイルを読み込む

  function my_scripts() {
  wp_enqueue_style( 'my_style', get_template_directory_uri() . '/css/style.css' );
  wp_enqueue_script( 'example', get_template_directory_uri() . '/js/example.js', array('jQuery'), '1.0.0', true );
  }
  add_action( 'wp_enqueue_scripts', 'my_scripts' );
  

まとめ

パラメータのバージョン番号は必須ではありませんが、指定をしないと現在使用しているWordPressのバージョンが表示されてしまいます。
セキュリティ面の事を考えるとバージョンが表記されるのは良くないので、何かしら指定をしたほうが良いと思いました。

スポンサーリンク

他にオススメな記事