[超訂正] WordPressのテーマをjQuery初心者がカスタマイズしてみる

 前回と同様、「WordPressのテーマをjQuery初心者がカスタマイズしてみる | Naokix.net」に対する訂正エントリーです。前回の話題なら、「あまりよろしくないけど、なんとか動作はするよね」で済むのですが、今回の話は下手すると WordPress が動作しなくなる場合もあるので、非常にマズイです。本当にスミマセン。

WordPress に標準でパッケージされている jQuery を動かしてみる

 訂正をする前に、やらかしたエントリーで少し触れましたが、WordPress に標準でパッケージされている jQuery の動かし方がわかったのでまとめておきます。すげー簡単だった。テーマの function.php に次のソースを追記するだけです。

前回、正しい JavaScript の読み込み方を述べましたが、そこでも使った wp_enqueue_script 関数を使います。第2引数のスクリプトの URL を省略していますが、これは WordPress がデフォルトで「jquery」という識別子を登録しているためです。

 実際には、使っているテーマやインストールしたプラグインが内部 jQuery を呼び出していることが多いため、この記述がなくても使えることが多いようです。HTML ソースをメモ帳などで確認し、jQuery を呼び出していないようなら function.php に追記すればよいでしょう。

 この標準でパッケージされている jQuery は、WordPress サイドの配慮により、他の JavaScript ライブラリとのコンフリクト回避のための独自仕様になっているため、普通に jQuery 用のソースを書いても動作してくれません。次のようにします。

 実際に動作させて見ましょう。テーマは「Twenty Fifteen」を使いました。

20150808_1

「最近の投稿」の文字色を赤くしてみます。

文字コードを Shift-JIS、改行コードを LF ONLY とし、Twenty Fifteen のフォルダの下に「test.js」として保存します。

20150808_2

 次に JavaScript ファイルを WordPress に読み込ませます。Twenty Fifteen の HTML ソースを確認してもらうとわかるのですが、このテーマは最初から jQuery を読み込んでくれているので、「wp_enqueue_script(‘jquery’);」を省略することができます。テーマや導入するプラグインによっては必要になるので、注意してください。

 function.php をメモ帳などで開き、次のソースを追記します。

読み込ませる JavaScript は jQuery と依存関係にあるため、第3引数を「array(‘jquery’)」としました。これで自作 JavaScript の前に WordPress 内の jQuery を読み込んでくれます。

 ページの更新ボタンを押せば、

20150808_3

動作確認の完了です。

ちなみに、

のように、無名関数でラップしてもいけるよ、と説明している Web サイトがあり、

で試してみたのですが、うまく動作しませんでした。なんか、書き方がよくないみたいです。作法がわかり次第、エントリーを書き直したいと思います。

以前のエントリーのなにがいけなかったのか

 まずは、以前のやらかしたエントリーの手順に従って、jQuery を動作させて見ます。Twenty Fifteen フォルダ以下に「jquery-1.11.3.min.js」を置き、

20150808_4

「test.js」を次のような普通のコードに書き換え、

function.php への追記を以下のように書き換えます。

動くことは動きますのよ。

20150808_5

ここでページの HTML ソースをメモ帳で確認すると、

20150808_6

jQuery を2度読み込んでいることがわかります。jQuery は比較的重いライブラリなので、重複して読み込んでいるとなれば、当然表示速度的によろしくありません。

 Web ページによっては「WordPress 内の jQuery を読み込ませなければいいんだよ」と wp_deregister_script 関数を使って次のようにしたりします。

 ここで、表示速度アップのために Web ページのスクロールに応じて画像データを遅延読込させる「Lazy Load」プラグインを導入していると、次のようになります。

20150808_7

いやん。画像が表示されません。

 「Lazy Load」プラグインのソースコードを確認していないので想像になりますが、「Lazy Load」プラグインは WordPress 内の jQuery を利用して画像を表示しているということなのでしょう。うまく動作しないプラグインやテーマがこれ以外にもでてくる可能性は高いです。

まとめ

 ローカルにインストールしたテスト環境で jQuery の動作を確認するだけなら以前のエントリーのやり方で問題ないでしょうが、これを今動いている WordPress に適用するのはあまりにリスキーだと思います。当ブログの結論としては、「テーマを jQuery でカスタマイズする場合は、WordPress が標準で用意している jQuery を使うべし」となりました。ソースの記述が少しばかり面倒になりますが、こればかりはしょうがない。

 お詫び申し上げるとともに、訪問してくれた皆様も十分ご注意ください。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP