5月 18th, 2012|ブログ|

 今日は、WordpressにjQuery UI を導入した際の覚書です。

<ポイント>
・WordpressでjQuery UIを使うには、便利なプラグインがある。
・プラグインを使わず、jQuary UIでレイアウトするには、多少の工夫が必要だった。

1.Wordpressで便利なjQueryプラグイン「WP UI」

 Wordpressでアコーデオンやタブを使おうと思えば、「WP UI」が便利です。設定項目も豊富ですし、コンテンツの下部に、「前」「次」のリンクも設定できるスグレモノです。

 WP UI 作者のサイト

 このプラグインはとても便利ですが、デフォルトではCSSを三つ読み込むため、ヘッド部分が多少もっさりしてしまうように感じてしまいました。

jQuery UI を使って自分で設定してみる

 そこで、jQuery UI を使ってみることにしました。jQuery UI を使った装飾については、小粋空間さんのページを参考にしました。

jQuery UI Tabsを使ってタブを実装する – 小粋空間さんの解説ページ

 大変分かりやすく、これだけ見れば、絶対動きそうなものなのですが、Wordpress3.3.1では、タブが表れません。
 試行錯誤の結果、表示できるようになりました。

3.問題点と解決

 コンポーネントをダウンロードした際、jQueryのバージョンが違ったのが気になったのですが、小粋空間さんの記事でもjQueryは外部から引っ張っていらっしゃったので、問題ないと思っていました。ところが、やっぱりこれがネックだったみたいです。

 で、どうして表示させたかと言いますと、../wp-includes/js/jquery/ の中にある jQuery.jsを上書きしました。
 コンポーネントに入っていたファイルネームはリネームしています。

 コンポーネントに入っていたjQueryのバージョンは、1.72。Wordpressのは1.71。で、1.72に上書きしてソースを見てみると、jQueryは1.71と書いてある。。。

 気にしません。動いているので。。。

 Wordpress使ってるのにわざわざjQueryからUIを引っ張ってくることもないとは思うのですが、同様の症状で苦戦していらっしゃる方の参考になれば幸いです。

最後までお読み頂いてありがとうございます。
 一生懸命書いたオリジナルの文章なのでコピーはしないでくださいね。IPアドレスとコピーされた場所を特定できるシステムになっています。(さらに詳しく)