WordPressで最新のjQueryを使う場合の注意点

この記事が良ければ、ぜひシェアお願いします

前回の記事でWordPressには、もともとjQueryが同梱されているということをお話しました。また、jQuery向けのプラグインも多数含まれています。さらに、フロント部分や管理画面でも使われているので、どのプラグインがどこでどう動いているのかちょっと分かりづらい状態なんですよね。

また、現在のjQueryの最新版が1.7.1とバージョン差異があるので、WordPressに同梱されているjQueryを使おうとすると、利用したいと思っているjQueryプラグイン(WordPressプラグインではないです)が正常に動作しないという場合も起こります。また、jQueryのコード内の$ショートカットをそのまま使おうとすると、WordPress内のプラグインとコンフリクトを起こしてしまい、正常に動かなくなってしまう場合もあります。

この辺りの基礎知識部分については、かちびと.netさんで記載されているのでそちらをご参照頂ければと思います。

参考先 : WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 | かちびと.net

最新のjQueryをWordPressで使う方法

WordPress には、wp_enqueue_scriptという関数が用意されているので、jQuery等の他のJavaScriptライブラリを簡単に読み込ませることができます。しかし、先ほど書いたとおり、WordPressには標準でjQueryがデフォルトライブラリとして登録されているので、標準で同梱されているjQueryの登録を解除して、最新のjQueryをデフォルトライブラリとするように登録をしてあげなければいけません。

そのためには、【wp_deregister_script】と【wp_register_script】という関数を使います。意味を掲載しようと思ってCODEXを調べてみたら、英語版本家にもなかったので割愛させてもらいますw

また、ここではCDN(Contents Delivery Network)=外部置いたコンテンツを参照する方法を前提とさせて頂きます。自サイトに設置する場合には、jQueryのパスを置いた場所に変更してください。

変更方法としては、functions.phpに書く方法とheader.phpに書く2種類があります。また、管理画面では一部jQueryを使った機能が動かなくなるという自称があるらしいので、管理画面には適用しないのがよいようです。(header.phpに書く場合は、管理画面は関係なくなるので気にしなくてよいです)

【functions.phpの場合】

function load_cdn() {
    if ( !is_admin() ) {
        wp_deregister_script('jquery');
        wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js', array(), '1.6.1');
    }
}
add_action('init', 'load_cdn');

【header.phpの場合(最上部に記述)】

<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js', array(), '1.6.1');
?>

dogma.jpさんの記事をめっちゃ参考にさせてもらいましたので、ここにてお礼申し上げます。

参考元 : WordPress 同梱の jQuery 以外を使う方法 | dogma.jp

WordPressでjQueryを使うにあたって思ったこと

「WordPressでも気兼ねなくjQuery使えるようになったぞ~」と思って、jQueryの基礎からミニコード/プラグインなど調べてみたのですが、jQuery自体はもともと『prototype.jsのコードがまだ冗長だと思った』からという理由で開発されたんですね(笑)確かに見てみると、jQueryのコード自体は非常にスッキリしている。なんかJavascriptっぽい気がしないんですよね。さらに、コメントが盛りだくさんなので、コメントを見ないとどんな関数なのかが分かりづらいような気がしました。

それに比べると、prototype.jsの方がJavascriptっぽくコメントもなく潔い感じがしたので、Javascriptを使ってサイトを拡張させたい場合には良い気がしました。

また、jQueryのプラグインもたくさんあって、「おーこんな便利なプラグインがあるんだ!」なんて興奮しちゃったのですが、「それなら、WordPress向けにカスタマイズされたjQuery系のWordPressプラグインもあるんじゃないか?」と海外サイトを色々見ていたら、思った通りありましたw まだ使ってないので、日本語で動作するのを確認してからご紹介したいとは思いますが、今の個人的な思いとしては『jQuery系の表現をしたいならWordPressプラグインを使っちゃえ』と思いました。

CSSフレームワークも、jQueryを含むものの場合はWordPress上では避けた方が良い気がしています。ただ、別にjQueryが悪いというわけではなく、相性の問題だと思っています。普通にプログラムを組んだ場合だと、ViewとしてCSSフレームワークやjQueryプラグインを組み合わせるのが最強な気もしていますのでw

今回こちらのサイトの参考にさせてもらいましたので、記載させて頂きます。ありがとうございました。

参考記事 : WordPressに自分で好きなjQueryプラグインを入れる | ウェブ、ショウジン
WordPressでjQueryプラグインを自由に使う注意 | WeBridge

2012/03/06追記

WordPressのパッケージ内に同梱されているjQueryファイルをよくよく見てみると、WordPress3.3.1だとjQuery1.7.1同梱になっていたのですね。。。とんだしたケアレスミスでした。WordPress3.3.1を利用していれば、jQueryは最新版になっているようです。

wordpresswp-includesjsjqueryjquery.js

/*! jQuery v1.7.1 jquery.com | jquery.org/license */
スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク