前回と同様、「WordPressのテーマをjQuery初心者がカスタマイズしてみる | Naokix.net」に対する訂正エントリーです。前回の話題なら、「あまりよろしくないけど、なんとか動作はするよね」で済むのですが、今回の話は下手すると WordPress が動作しなくなる場合もあるので、非常にマズイです。本当にスミマセン。
WordPress に標準でパッケージされている jQuery を動かしてみる
訂正をする前に、やらかしたエントリーで少し触れましたが、WordPress に標準でパッケージされている jQuery の動かし方がわかったのでまとめておきます。すげー簡単だった。テーマの function.php に次のソースを追記するだけです。
1 2 3 4 | function load_jquery(){ wp_enqueue_script('jquery'); } add_action('init', 'load_jquery'); |
前回、正しい JavaScript の読み込み方を述べましたが、そこでも使った wp_enqueue_script 関数を使います。第２引数のスクリプトの URL を省略していますが、これは WordPress がデフォルトで「jquery」という識別子を登録しているためです。
実際には、使っているテーマやインストールしたプラグインが内部 jQuery を呼び出していることが多いため、この記述がなくても使えることが多いようです。HTML ソースをメモ帳などで確認し、jQuery を呼び出していないようなら function.php に追記すればよいでしょう。
この標準でパッケージされている jQuery は、WordPress サイドの配慮により、他の JavaScript ライブラリとのコンフリクト回避のための独自仕様になっているため、普通に jQuery 用のソースを書いても動作してくれません。次のようにします。
1 2 3 4 5 | jQuery(document).ready(function($){ （ここにいつものソースを書く） }); |
実際に動作させて見ましょう。テーマは「Twenty Fifteen」を使いました。
「最近の投稿」の文字色を赤くしてみます。
1 2 3 | jQuery(document).ready(function($) { $(".widget_recent_entries ul li a").css("color", "red"); }); |
文字コードを Shift-JIS、改行コードを LF ONLY とし、Twenty Fifteen のフォルダの下に「test.js」として保存します。
次に JavaScript ファイルを WordPress に読み込ませます。Twenty Fifteen の HTML ソースを確認してもらうとわかるのですが、このテーマは最初から jQuery を読み込んでくれているので、「wp_enqueue_script(‘jquery’);」を省略することができます。テーマや導入するプラグインによっては必要になるので、注意してください。
function.php をメモ帳などで開き、次のソースを追記します。
1 2 3 4 | function test() { wp_enqueue_script('myscript', get_template_directory_uri().'/test.js', array('jquery'), false, false); } add_action('wp_enqueue_scripts', 'test'); |
読み込ませる JavaScript は jQuery と依存関係にあるため、第３引数を「array(‘jquery’)」としました。これで自作 JavaScript の前に WordPress 内の jQuery を読み込んでくれます。
ページの更新ボタンを押せば、
動作確認の完了です。
ちなみに、
1 2 3 4 5 | (function($){ （ここにいつものソースを書く） })(jQuery); |
のように、無名関数でラップしてもいけるよ、と説明している Web サイトがあり、
1 2 3 | (function($){ $(".widget_recent_entries ul li a").css("color", "red"); })(jQuery); |
で試してみたのですが、うまく動作しませんでした。なんか、書き方がよくないみたいです。作法がわかり次第、エントリーを書き直したいと思います。
以前のエントリーのなにがいけなかったのか
まずは、以前のやらかしたエントリーの手順に従って、jQuery を動作させて見ます。Twenty Fifteen フォルダ以下に「jquery-1.11.3.min.js」を置き、
「test.js」を次のような普通のコードに書き換え、
1 2 3 | $(function(){ $(".widget_recent_entries ul li a").css("color", "red"); }); |
function.php への追記を以下のように書き換えます。
1 2 3 4 5 | function test() { wp_enqueue_script('myjquery', get_template_directory_uri().'/jquery-1.11.3.min.js', array(), false, false); wp_enqueue_script('myscript', get_template_directory_uri().'/test.js', array('myjquery'), false, false); } add_action('wp_enqueue_scripts', 'test'); |
動くことは動きますのよ。
ここでページの HTML ソースをメモ帳で確認すると、
jQuery を２度読み込んでいることがわかります。jQuery は比較的重いライブラリなので、重複して読み込んでいるとなれば、当然表示速度的によろしくありません。
Web ページによっては「WordPress 内の jQuery を読み込ませなければいいんだよ」と wp_deregister_script 関数を使って次のようにしたりします。
1 2 3 4 5 6 | function test() { wp_deregister_script('jquery'); wp_enqueue_script('myjquery', get_template_directory_uri().'/jquery-1.11.3.min.js', array(), false, false); wp_enqueue_script('myscript', get_template_directory_uri().'/test.js', array('myjquery'), false, false); } add_action('wp_enqueue_scripts', 'test'); |
ここで、表示速度アップのために Web ページのスクロールに応じて画像データを遅延読込させる「Lazy Load」プラグインを導入していると、次のようになります。
いやん。画像が表示されません。
「Lazy Load」プラグインのソースコードを確認していないので想像になりますが、「Lazy Load」プラグインは WordPress 内の jQuery を利用して画像を表示しているということなのでしょう。うまく動作しないプラグインやテーマがこれ以外にもでてくる可能性は高いです。
まとめ
ローカルにインストールしたテスト環境で jQuery の動作を確認するだけなら以前のエントリーのやり方で問題ないでしょうが、これを今動いている WordPress に適用するのはあまりにリスキーだと思います。当ブログの結論としては、「テーマを jQuery でカスタマイズする場合は、WordPress が標準で用意している jQuery を使うべし」となりました。ソースの記述が少しばかり面倒になりますが、こればかりはしょうがない。
お詫び申し上げるとともに、訪問してくれた皆様も十分ご注意ください。
Comment