« 「しんぼる」見てきた | トップページ | 引越しに伴うひかり導入で無線LANルーターをもらう »

2009年10月 2日 (金曜日)

jQuery使用のWordPressのプラグイン作成ではまった話

 WordpPressのプラグインを作る。久々に触るのでいろいろ忘れてたことも多いというのもあったけど、もともとほとんど知識がないので、検索しまくりでなんとかする。はまったのは、jQueryをロードする方法だ。

 最初はテンプレートに直接scriptタグを書いていた。公式サイトからダウンロードしたjsファイルをプラグインディレクトリに放り込んで、それを指定するという方法。しかし、WordPress自体にjQueryが組み込まれている、というので、それを使うほうがスマートだろう。そんな感じで試行錯誤が始まる。

 「wp_enqueue_script」というアクションフックを使えばカンタンに、そして依存関係とかバージョンをうまいことやってくれるというので、それを使用することに。

 しかし、どうもプラグインがうまく動かない。プラグインは「the_content」をフックして、記事本文に処理を加えるというもの。処理というのは、別途用意した自前のJavaScriptを動作させるためのscriptタグを挿入するというものだ。

 テンプレートに、プラグインディレクトリに配したjQueryをロードするように書いた場合は動く。それを外して「wp_enqueue_script('jquery')」とすると、動かない。次はテンプレートでロードする先を「wp-includes/js/jquery/jquery.js」(WordPressのパッケージに収録されているもの)にするとやっぱり動かない。

 どの場合でも、出力されたHTMLファイルを見ると、ちゃんとscriptタグでロードはされている。それでも自前のスクリプトは動作しない。

 もしかして、WordPres収録のものと、公式サイトで配布されているファイルが違うのだろうか?
 中身を見てもバージョンはいっしょである。

 さらに、見る。どうも、WordPress収録のものは最後に1行多い。「jQuery.noConflict();」という行だ。それで検索。「jquery noconflict」で検索すると、「jQueryと他のライブラリを同時に使用する方法」が見つかる。

 なるほど。WordPress収録のやつは「他のライブラリと同時に使用するには、jQuery による $ 関数の上書きを元に戻す jQuery.noConflict() メソッドを実行」(上記リンク先より引用)しているというわけだ。
 というわけで自前のスクリプトで「$」としている部分を「jQuery」に変更。

 これで何の問題もなく動くようになった。
 たどり着くまでに4時間以上かかってしまった。プラグイン作成もjQueryを触るのもまったくのはじめて。WordPressカスタマイズについては、テンプレートタグをいじったことがある程度では、カンの働きようもないのだ。

基本からしっかりわかる WordPress 2.7 カスタマイズブック (Web Designing BOOKS) まあ、WordPressで構築されたブログじゃなくって、ココログみたいなところで言っていてもしょうがない気もするけど。とりあえず、勉強メモ。
 デザイン関係じゃなくって、こういうのが解説された書籍とかがあるともっと楽にできたかも。いや、jQueryの書籍のほうが先か。

 それから。WordPressを触ってると、ココログも同じことができたらなあ、とか思ってしまう。移転、という方法もあるんだろうけど、既存のバックリンクが無駄になるのももったいない。ココログがパーマネントリダイレクト(だっけ?)をしてくれればいいんだろうけど、そんなことしてくれるわけないしなあ。商売だし。というグチ。


|

« 「しんぼる」見てきた | トップページ | 引越しに伴うひかり導入で無線LANルーターをもらう »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/46371191

この記事へのトラックバック一覧です: jQuery使用のWordPressのプラグイン作成ではまった話:

« 「しんぼる」見てきた | トップページ | 引越しに伴うひかり導入で無線LANルーターをもらう »