【WordPress】jQueryの使い方（準備編）
jQueryを利用する場合、通常はjQueryを読み込んでおく必要がありますが、WordPressは標準でjQueryを読み込んであるので読み込みはする必要がありません。
自前で用意したjsファイルを読み込むだけでOKです。
WordPressでjsファイルを読み込む方法ですが、自分で<script>タグで読み込むのは推奨されません。
wp_enqueue_script()関数を使ってjsファイルを読み込みます。
以下はjsフォルダの中にあるmain.jsというファイルを読み込むコードです。
Contents
ソースコード
function mytheme_enqueue()
{
date_default_timezone_set("Asia/Tokyo");
$update_date = date('YmdHi', filemtime(__DIR__ . '/js/main.js'));
date_default_timezone_set(‘UTC’);
wp_enqueue_script(
'mytheme_script',
get_theme_file_uri() . '/js/main.js',
array( 'jquery' ),
$update_date,
false
);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue');
解説
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
| パラメータ名 | 要否 | 初期値 | 説明 |
|---|---|---|---|
| $handle | 必須 | なし | ハンドル名。他と重複しない名前をつける |
| $src | オプション | false | スクリプトのURL |
| $deps | オプション | array() | このスクリプトの前に読み込まれる必要のあるスクリプトのハンドル名 |
| $ver | オプション | false | バージョン名 |
| $in_footer | オプション | false | 記述位置の指定 |
$handleパラメータでは他と識別できる名前をつけます。
いわゆるID的なものですね。
わかりやすいものにしましょう。
$srcパラメータで読み込むファイルを指定します。
get_theme_file_uri()関数でディレクトリのURLを取得し、ファイルまでのパスを記述します。
$depsパラメータではこのファイルが依存するスクリプトのハンドル名を記述します。
今回読み込むファイルはjQueryを利用したものなのでjQueryに依存しています。
なので、jQueryの後で読み込まれるように、array(‘jQuery’)と記述します。
$verパラメータではこの読み込むファイルのバージョンを記述します。
ブラウザのキャッシュが残っていると古いファイルが利用され問題が発生してしまうことがあります。
それを防ぐ目的のものです。
こちらに記述されたバージョンがクエリパラメータとしてURLに付与されます。
ここではファイルの更新日時をバージョン情報として記述しています。
ファイルの更新日を取得するにはfilemtime()関数を使います。
更新日はUNIXタイムスタンプで返されます。
1970年1月1日午前0時0分0秒からの経過秒数ですね。
これをdate()関数で年月日時分の表示に変換しています。
__DIR__はマジック定数という定義済みの定数で、この定数が呼び出されたファイルがあるディレクトリのフルパスを返します。
これにファイルまでのパスを結合してfilemtime()で更新日を取得しています。
なお、filemtime()で取得する日付はデフォルトではUTCで取得されるため時差が生じます。
これを解消するために、date_default_timezone_set()関数を利用します。
これはタイムゾーンを変更する関数です。
date_default_timezone_set(“Asia/Tokyo”)とすることでタイムスタンプが日本時間に変更されます。
使用後は他に影響を与えないために、date_default_timezone_set(‘UTC’)としてUTC時間にタイムゾーンを戻しています。
これでjs/main.js?ver=201908071634というように更新日がクエリパラメータとして付与されました。
main.jsファイルを更新するごとにこの数値が変わるため、キャッシュが残って古いファイルが使われることを防げます。
ちなみに【WordPress】自動で定期的に処理をさせよう！wp-cronの使い方の方の時間の設定も、この方法でも時差に対応できます。
$in_footerでスクリプトを読み込む位置を指定します。
初期値はfalseで、<head>の中に配置されます。
trueにすると</body>の直前に置かれます。
jQueryの処理内容によっては内だと動作しないものもあるので、ここで正しい位置で読み込むようにしましょう。
これらがスクリプトファイルを読み込む関数で、これをwp_enqueue_scriptsにフックします。
これでjsファイルを読み込むことができました。
終わりに
今回は準備編ということでここまでです。
それではよいWordPressライフを！
参考
