jQueryなどのJavaScriptライブラリをCDN経由で読み込む方法【WordPress】|ためになるWordPressブログ

WordPress

さて今回は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.php

function 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ではこういったファイルの読み込みがなかなか複雑で大変です。

私は下記の本の併用し、またググりながら頑張っています。。。

コメント

タイトルとURLをコピーしました