【WordPress】WPに同梱されているjQueryを投稿ページで使用する

 

 

 

概要

 

ウィキペディアによるとJqueryは次のように説明されています。
 

jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる[2]。公式サイトのキャッチコピーはロゴの下に「write less, do more」(意味:少ない記述でもっと多くのことをする)と表記されている。Jquery - Wikipedia

 
一言でいうとJqueryとは複雑なJavascriptを記述することなく、簡単なコードでJavascriptを実行できる、ライブラリってことですね。WordPressでは管理画面などでjQueryが使用されていますので、わざわざjQueryを読み込むためのコードを追加する必要はありません。
 

 

 

環境

 
IDCFクラウド環境

  • サーバー (仮想マシン・ハードウェア専有マシン)
    S1 プラン メモリ1G

  • ボリューム(ディスク)
    基本 15GB

  • オブジェクトストレージサービス
    50GB

  • WordPressは仮想マシンKUSANAGI環境で使用

 
 

 

WP同梱のjQueryを使用する方法

 

WordPressではjQueryのほかにもprototype.jsなどのJavaScript ライブラリが使用されているため、WordpressのjQueryには他のライブラリと競合しないように.noConflict() コマンドが追加されています。

 

そのため、jQueryで慣用的に使用されている$関数が使用できなくなっています。

 

 

一番簡単な解決策は、「$」を「jQuery」にすべて変えてしまうことです。

 

しかし、過去のjQueryコードを使用したい場合や$関数をそのまま使用したいといった場合は、jQuery関数でカプセル化する方法があります。

 

jQuery(document).ready( function( $ ) {
  //ここに$関数を使用したjQueryコードを書く
});

 
(document).readyは省略できるので、下記のコードを追加するだけでOKです。

 

jQuery( function( $ ) {
  //ここに$関数を使用したjQueryコードを書く
});

 

 
あと、組み込まれているjQueryを、「wp_deregister_script(‘jquery’)」コマンドで削除したのち、外部のjQueryを読み込むと$関数が使用できます。しかし、jQueryプラグインを読み込む場合は、推奨されるバージョンのjQueryを読み込むことがあるかもしれませんが、わざわざjQueryを読み込み直す必要はないですね。
 

 

jQueryのバージョンを表示するスクリプト

 

この投稿ページにjQueryでバージョンを表示するスクリプトを書いてバージョンを表示させてみました。

 

下のボタンをクリックするとバージョンが表示されます。

 

 

 

<div><script type="text/javascript">

jQuery(function($){
    //idで指定されたタグでイベントが発生した場合
    $('#btn_getversion').on('click', function() {
        window.alert('jQuery バージョンは'+$.fn.jquery+'です');
    });
})
</script></div>

 

 

ちなみに、ページが表示された直後に処理をする場合は、次のようになります。

 

<div><script type="text/javascript">

jQuery(function($){
    //idで指定されたタグでイベントが発生した場合
    $('window').on('load', function() {
        window.alert('jQuery バージョンは'+$.fn.jquery+'です');
    });
})
</script></div>

 

 

 

まとめ

 

Jqueryは、異なるブラウザ間でJavascriptの挙動の差異を吸収してくれます。

ネイティブのjavascriptを記述するのもよいですが、すでに実装済みのjQueryを使えばブラウザ間で違う動きに悩まされることも少なくなり複雑なコードも見やすくなります。

ただ、自分好みのjQueryプラグインを利用する場合やプラグインに合うバージョンのjQueryに差し替えたりする場合は、テーマをすこし編集する必要があるようです。そのあたりもまた記事にしていきたいと思います。

 

 

 

 

関連記事

 

 

 

参考