jQuery Tipsyを使いたかったので…

『脚注を付けたいな』
そう思ってWordPressのプラグインで検索をしたらいくつか出てきたので、見てみました。
でも、脚注を記述するのに『番号』を入れなければ行けないものが多く、それはそれで脚注が多くなるとある意味めんどくさそうなので、ひとまず断念した。
では『脚注は断念?』というわけではないが、javascriptでなんかそれっぽいことをするのはないかな?とググって見たら、いろいろなjavascriptプラグインを紹介してくださっているskuare.net – JavaScript / Movable Type / etc.さんにナンバリングされた脚注を簡単に作成できるJavaScript「jQuery Footnotes」というjavascriptプラグインを発見してくれました。
jQueryはWordPressに標準同梱されているのでjQueryのプラグインは実は使いやすい。
これは良いものを発見!
…って、思ったんですけど、脚注を表示するためのエリアを別途用意してあげないといけないっぽいので、どうしたモンか…で、ひとまず保留。
なぜ?って?
まだWordPressの事が判っていないのでプラグインを作る手法のイメージがわかないからですw
んー…と思いながらついでだからと他のプラグインを見ているときにFacebook風のツールチップを実現するJavaScript「tipsy」に目が留まりました。
Facebookというのが判らなかったので紹介ページを見てみたら、
おおっ!なんかかっちょえーぞ
って思いました。しかも、おいらが書くものなんて、どうせ駄文だし、脚注だってしょーもないものしかないに決まってる。んじゃ、ツールチップ風のものでもオッケーじゃねーのか?
とか言うことで、これをなんとかプラグイン化してショートコードを記述するだけで使えるようにしてみたい…という意欲に駆られましたw
ソーシャルネットワーキングMixiのWordPressコミュニティで、「PHPによるWordPressカスタマイズブック」発売 – The blog of H.Fujimotoをご本人様(おそらく)が返信がてら紹介されていたのをみて、買って読みました。へー、すごいんだなWordPress。
最初は、それを見てあれやこれやって、どうせならと機能を詰め込みを模索していたのですがそもそも、基本動作すら実現できるのかどうか判らないのだから素直に、tipsyプラグインをロードして、ショートコードで使えるようにするだけにしよう!うん、それがいい(*^^)v
で、ショートコードってのが、いまいちピンと来なかったので、いろいろとプラグインを使わせていただいている『をかもと』さんのサイトにWordPress ShortCode Plugin Builder : dogmap.jpというエントリーがあって、試しに紹介されているYouTubeのリンクを作成するショートコードプラグインをそのまま作らせてもらって、ソースを勉強させてもらいました。
なんか、便利そうで効率的そうなクラス定義が沢山書いてあったのですが、そこは素人のおいらが理解できるはずもなくorz残念ながら[tegaki]宝の持ち腐れ[/tegaki]ですが、いつかきっと使えるようになる!…というはかない希望を元に、WordPress ShortCode Plugin Builderで作らせていただいたYouTubeのリンクを作成するショートコードプラグインをベースに作らせていただきました。
前述の[jqtools plugin=”ttips” title=”Facebook風のツールチップを実現するJavaScript「tipsy」-http://www.skuare.net/test/jtipsy.html”]tipsyプラグインの紹介ページ[/jqtools]によると、id属性じゃないと動作しない?tipsyプラグインのサンプルファイルにもidでしか記述していない。そうなの?id属性じゃないと駄目なの?でも、[jqtools plugin=”ttips” title=”id 属性は要素に一意の識別子を割り当てるものである-http://www.tohoho-web.com/html/attr/class.htm | class=class – クラスの適用”]id属性はユニーク[/jqtools]じゃなきゃいけないんじゃなかったっけ?
…と言うところで悩んでしまいました。
class属性じゃだめなの?
で、試してみたら「おー、動いた\(^O^)/」
んじゃ、これ、使えるなー
でも、ショートコードを使うんだから、オプションとか使いたいな。
んじゃ、オプションごとのスクリプトコードを用意してそれで実行すればいいかな?
あんまりHTMLコードを汚したくなかったから、外部ファイルでロードしてあげればいいかな…なんて思っていたんですが、それだと、ロードが終わっても実行できないんですよね。安易でしたorz
仕方がないのでページのロードが終わったらスクリプトを実行するようにスクリプトコードをHEAD領域に書き出すことにしました。
はあ…。
なんとかやっと、とりあえず使えるところまでたどり着きました。
奥が深いですね…。
でも、とってもすばらしいjavascriptプラグインは世の中に沢山ありますから、WordPressで使えるようになると、楽しそうですね。