WordPress Logo WordPress CSSやJavaScriptファイルの読み込み

更新日:2019年02月08日

作成日:2019年01月18日

wp_enqueue_style

この関数は、指定した CSS スタイルシートを登録して出力用のキューに入れます。この関数を呼び出す際は、wp_enqueue_scripts と言うアクションフックを使います。

キューに入れたスタイルシートは wp_head() wp_enqueue_scripts と言うアクションフックを実行するタイミングで出力されます。

正確には、 wp_head() は do_action( 'wp_head' ) で wp_head アクションを実行し、wp_head アクションに wp_enqueue_scripts は登録されています。(関連ページ:アクションフック

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

パラメータ
$handle
(文字列)
(必須)スタイルシートを識別するためのハンドル名を指定。
$src
(文字列|真偽値)
スタイルシートの URLを指定。(初期値: 空文字列)
$deps
(配列)
依存するスタイルシートのハンドル名を配列で指定(指定されたスタイルシートは先に読み込まれます)。依存関係がない場合は空の配列「array()」を指定。
$ver
(文字列|真偽値)
スタイルシートのバージョン番号を指定する文字列を指定。ファイル名の末尾にクエリパラメータとして追加されます。(初期値: false)
$media
(文字列|真偽値)
スタイルシートのメディアを指定。(初期値: 'all')
戻り値
なし

<アクションフック wp_enqueue_scripts の記述>

この関数を呼び出すには functions.php に以下のように記述します。add_my_styles 部分(1行目と4行目)には任意の関数名を指定します。

function add_my_styles() {
  wp_enqueue_style( $handle, $src, $deps, $ver, $media);
}
add_action( 'wp_enqueue_scripts', 'add_my_styles' );

以下はテーマ内の style.css を「ハンドル名」を 'my-template-style' として get_stylesheet_uri() を使って読み込む例。

get_stylesheet_uri() は、現在有効化されているテーマで使われているスタイルシートの URI(ファイル名を含む)を返す関数です。

function my_template_css() {
  wp_enqueue_style( 'my-template-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_template_css' );

以下はテーマ内の 「css」フォルダにある style.css を「ハンドル名」を 'my-style' として get_theme_file_uri() を使って読み込む例。

function my_styles() {
  wp_enqueue_style('my-style', get_theme_file_uri('/css/style.css'));
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

更新時にキャッシュをクリア(filemtime)

引数 $ver(バージョン番号)に filemtime() を使ってファイルの更新日時を付与すれば、ファイルを更新するたびにクエリパラメータが変更されるので、ブラウザキャッシュが更新されるようになります。

filemtime() の引数は、ファイルへのパスを指定するので、get_theme_file_path() を使って指定することができます。

function my_styles() {	
  wp_enqueue_style(
    'my-style',
    get_theme_file_uri( '/css/style.css' ),
    array(),  //依存関係がない場合
    filemtime( get_theme_file_path( '/css/style.css' ) )
  );
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

以下は、/css/main.css と Font-Awesome5(CDN 経由) を読み込む例です。

function add_my_styles() {	
  wp_enqueue_style(
    'my-fa5',
    '//use.fontawesome.com/releases/v5.6.3/css/all.css',
    array(),
    '5.6.3'
  );
  wp_enqueue_style(
    'my-main-style',
    get_theme_file_uri( '/css/main.css' ),
    array(),
    filemtime( get_theme_file_path( '/css/main.css' ) )
  );
}
add_action( 'wp_enqueue_scripts', 'add_my_styles' );

wp_enqueue_script

WordPress が生成するページに JavaScript をリンクします(指定したスクリプトを登録し出力用のキューに入れます)。この関数を呼び出す際は、wp_enqueue_scripts と言うアクションフックを使います。

キューに入れたスクリプトは wp_head() または wp_footer()wp_enqueue_scripts と言うアクションフックを実行するタイミングで出力されます。

パラメータ
$handle
(文字列)
(必須)スクリプトを識別するためのハンドル名を指定。WordPress にデフォルトで登録されているスクリプトのハンドル名は「Default Scripts Included and Registered by WordPress」に掲載されています。
$src
(文字列|真偽値)
スクリプトの URLを指定。(初期値: 空文字列)
$deps
(配列)
依存するスクリプトのハンドル名を配列で指定(指定されたスクリプトは先に読み込まれます)。依存関係がない場合は空の配列「array()」を指定。
$ver
(文字列|真偽値)
スクリプトのバージョン番号を指定する文字列を指定。ファイル名の末尾にクエリパラメータとして追加されます。(初期値: false)
$in_footer
(真偽値)
通常スクリプトは <head> に配置されますが、true の場合 </body> 終了タグの前に配置されます。(初期値: false)テーマ内の適切な位置に wp_footer() テンプレートタグが含まれていることが必須です。
戻り値
なし

<アクションフック wp_enqueue_scripts の記述>

この関数を呼び出すには functions.php に以下のように記述します。add_my_scripts 部分(1行目と4行目)には任意の関数名を指定します。

function add_my_scripts() {
  wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', 'add_my_scripts' );

以下は、テーマフォルダ内「js」フォルダにある「base.js」と言う JavaScript ファイルを読み込む例です。この JavaScript は jQuery を使って記述しているので、依存するファイルとして(WordPress に同梱されている)jQuery を指定しています。

  • 'base-script':任意のハンドル名
  • get_theme_file_uri( '/js/base.js' ) :読み込む JavaScript ファイル
  • array( 'jquery' ):依存ファイル(WordPress に同梱されている jQuery「ハンドル名:jquery」)
  • '20190123':バージョン(ファイル名の末尾に追加される)
  • false: <head> 内で読み込み
function add_my_scripts() {
  wp_enqueue_script( 
    'base-script', 
    get_theme_file_uri( '/js/base.js' ), 
    array( 'jquery' ), 
    '20190123', 
    false
  );
}
add_action('wp_enqueue_scripts', 'add_my_scripts');

上記の場合、以下のように <head> 内で出力されます。(1行目と2行目は WordPress に同梱されている jQuery の出力)

<script type='text/javascript' src='http://xxxx.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://xxxx.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='http://xxxx.com/wp-content/themes/my-theme/js/base.js?ver=20190123'></script>

特定の jQuery を使用

WordPress では、デフォルトで jQuery が「jquery」と言うハンドル名で wp_register_script() で既に登録されています。WordPress に同梱されている jQuery ではなく、特定の jQuery を使用する場合は、以下のように wp_deregister_script() で登録を解除してから wp_enqueue_script() で登録及び出力用のキューに入れます。

また、以下では、引数 $ver(バージョン番号:16行目)に filemtime() を使ってファイルの更新日時を付与して、ファイルが更新するたびにクエリパラメータが変更されてブラウザキャッシュが更新されるようにしています。

function add_my_scripts() {	
  //WordPress 本体の jQuery を登録解除
  wp_deregister_script( 'jquery');  
  //jQuery を CDN から読み込む
  wp_enqueue_script( 'jquery', 
    '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', 
    array(), 
    '3.3.1', 
    true //</body> 終了タグの前で読み込み
  );
  //base.js の読み込み
  wp_enqueue_script( 
    'base-script', 
    get_theme_file_uri( '/js/base.js' ), 
    array( 'jquery' ), //依存ファイルは上記の jquery
    filemtime( get_theme_file_path( '/js/base.js' ) ), 
    true
  );
}
add_action('wp_enqueue_scripts', 'add_my_scripts');

上記の場合、5番目の引数($in_footer)に true をしているので </body> 終了タグの前で出力されます。

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://xxxx.com/wp-content/themes/hotel/js/base.js?ver=1548570031'></script>

JavaScript と CSS をまとめて読み込む

wp_enqueue_script() と wp_enqueue_style() はアクションフック(wp_enqueue_scripts)を使ってまとめて読み込むことができます。

function add_my_files() {	
  //WordPress 本体の jQuery を登録解除
  wp_deregister_script( 'jquery');  
  //jQuery を CDN から読み込む
  wp_enqueue_script( 'jquery', 
    '//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', 
    array(), 
    '3.3.1', 
    true 
  );
  wp_enqueue_script( 
    'base-script', 
    get_theme_file_uri( '/js/base.js' ), 
    array( 'jquery' ), 
    filemtime( get_theme_file_path( '/js/base.js' ) ), 
    true
  );
  //スタイルシートの読み込み
  wp_enqueue_style(
    'my-style',
    get_theme_file_uri( '/css/style.css' ),
    array(),
    filemtime( get_theme_file_path( '/css/style.css' ) )
  );
}
add_action('wp_enqueue_scripts', 'add_my_files');