今日は、WordpressにjQuery UI を導入した際の覚書です。
＜ポイント＞
・WordpressでjQuery UIを使うには、便利なプラグインがある。
・プラグインを使わず、jQuary UIでレイアウトするには、多少の工夫が必要だった。
１．Wordpressで便利なjQueryプラグイン「WP UI」
Wordpressでアコーデオンやタブを使おうと思えば、「WP UI」が便利です。設定項目も豊富ですし、コンテンツの下部に、「前」「次」のリンクも設定できるスグレモノです。
このプラグインはとても便利ですが、デフォルトではCSSを三つ読み込むため、ヘッド部分が多少もっさりしてしまうように感じてしまいました。
ｊQuery UI を使って自分で設定してみる
そこで、ｊQuery UI を使ってみることにしました。jQuery UI を使った装飾については、小粋空間さんのページを参考にしました。
jQuery UI Tabsを使ってタブを実装する – 小粋空間さんの解説ページ
大変分かりやすく、これだけ見れば、絶対動きそうなものなのですが、Wordpress3.3.1では、タブが表れません。
試行錯誤の結果、表示できるようになりました。
３．問題点と解決
コンポーネントをダウンロードした際、jQueryのバージョンが違ったのが気になったのですが、小粋空間さんの記事でもjQueryは外部から引っ張っていらっしゃったので、問題ないと思っていました。ところが、やっぱりこれがネックだったみたいです。
で、どうして表示させたかと言いますと、../wp-includes/js/jquery/ の中にある jQuery.jsを上書きしました。
コンポーネントに入っていたファイルネームはリネームしています。
コンポーネントに入っていたjQueryのバージョンは、1.72。Wordpressのは1.71。で、1.72に上書きしてソースを見てみると、ｊQueryは1.71と書いてある。。。
気にしません。動いているので。。。
Wordpress使ってるのにわざわざｊQueryからUIを引っ張ってくることもないとは思うのですが、同様の症状で苦戦していらっしゃる方の参考になれば幸いです。