さて今回はWordPressでjQueryなどのJavaScriptライブラリを利用する方法をまとめていきたいと思います。
そのために使用するWordPress関数が
wp_enqueue_script()
です。
以前スタイルシートを反映させるためのこんな記事を書きました。
ほぼやり方は同じですのでスタイルシートと一緒にやるのがいいかも知れません。
なおwp_enqueue_scripts()というものも登場しますがwp_enqueue_script()とは別物ですので注意してください。
CDNとは
CDNとは「Content Delivery Network」の略で、ざっくりかんたんに言うとネット上にあるデータを取得して使うシステムのようなものです。
今回の場合はjQueryというJavaScriptライブラリのデータをネット上から持ってきてサイトに反映させるといったイメージです。
wp_enqueue_script()の説明
WordPress Codexを確認してみましょう。
wp_enqueue_styleと似た使い方です。
パラメータ
wp_enqueue_script()は次のように記載します。
wp_enqueue_script(ハンドル名、URL、依存関係、バージョン、読み込み位置)
『ハンドル名』というのはJavaScriptファイルのシステム上の名前です。出力されるHTMLにこのハンドル名に入力したidが付与されます。
『URL』にはJavaScriptファイルののURLを記述します。
『依存関係』というのは、このJavaScriptより前に呼び出すJavaScriptがある場合にハンドル名を配列で指定します。
『バージョン』はJavaScriptファイルのバージョンのことです。バージョン番号があるファイルを読み込む場合は入力します。ない場合は「”」と入力しておきましょう。
『読み込み位置』はJavaScriptファイルの読み込み位置のことで、フッター部分で読み込むかどうかを指定します。
<script>タグを</body>の前で出力させたいなら「true」と入力します。
jQueryを使うにはwp_enqueue_script()は2行必要
function.phpfunction javascript() {
wp_enqueue_script( ‘jquery-js’, ‘https://code.jquery.com/jquery-3.5.1.min.js’, [], ”, true );
wp_enqueue_script( ‘script’, get_theme_file_uri(‘/scripts/script.js’), [‘jquery-js’], ”, true );
}
add_action( ‘wp_enqueue_scripts’, ‘javascript’);
このようにwp_enqueue_scriptは2行書く必要があります。
1行目でjQueryのライブラリをCDN経由で読み込み、
2行目でテーマフォルダ内にあるJavaScriptファイルを読み込んでいます。
「add_action」あたりのアクションフックについてはスタイルシートを読み込む手順の記事を参考にしてみてください。
1行目のjQueryライブラリの読み込み
wp_enqueue_script( ‘jquery-js’, ‘https://code.jquery.com/jquery-3.5.1.min.js’, [], ”, true );
一行目のこの部分についてはまずハンドル名を「jquery-js」としています。
‘https://code.jquery.com/jquery-3.5.1.min.js’についてはjQueryの公式ページからコピペしてきます。
リンク先にはjQueryの各バージョンでuncompressed、minifiedなど種類があります。
uncompressedが通常バージョン、minifiedが無駄を省いた圧縮版のようです。
今回は圧縮版の方を使用しています。
最新版の「minified」をクリックすると上記のようなURLが書かれた部分があるのでコピペしましょう。
2行目のJavaScriptファイルの読み込み
wp_enqueue_script( ‘script’, get_theme_file_uri( ‘/scripts/script.js’), [‘jquery-js’], ”, true );
まずハンドル名を「script」とつけてからテーマフォルダのファイル名をフルパスで返すget_theme_file_uri()でファイルのパスを取得しています。
事前にJavaScriptのファイルをテーマフォルダ内に作っておく必要がありますので注意しましょう。
今回の場合はテーマフォルダ内の「scripts」というフォルダに「script.js」というファイルを作ってあります。
そして第3引数には先に1行目のjQueryライブラリを先に読み込ませる必要があるので1行目に書いたハンドル名である「jquery-js」を入力して先に読み込ませます。
jQueryを入力してみよう
jQueryとJavaScriptの読み込みするための手順が一応済んだということで、早速ちゃんと反映しているか試してみましょう。
WordPress管理画面の「外観」→「テーマエディタ」に作成しておいたJavaScriptを記述するためのファイル(この例の場合はscript.js)があると思いますのでそこに試しにjQueryを記入してみましょう。
script.js$(function(){
$(‘h1’).css(‘color’, ‘red’);
});
今回はjQueryからCSSをいじってHTMLのh1タグの文字色を赤くするというもので試してみます。
これでh1でマークアップしている部分の色が赤く変わっていれば、jQueryがちゃんと反映しています。
まとめ
WordPressではこういったファイルの読み込みがなかなか複雑で大変です。
私は下記の本の併用し、またググりながら頑張っています。。。
コメント