jQuery UI アコーディオンパネルの組み込み

jQuery UIを使った折りたたみパネル(accordion)をWordPressに組み込んでみた。以前にjavascriptを使った折りたたみ方法を紹介したが、jQueryプラグインの一種であるjQuery UIにはいろいろな機能がライブラリとして揃っているので試してみた。結果は、javascriptでプログラミングしなくてよい分、楽に実現できるところがよい。

<jQuery UIの組込み>

1.jQuery UIの入手

jQuery UIは次のダウンロードページより入手する。 http://jqueryui.com/download/

2.jQuery UIモジュールの配置

ダウンロードしたモジュールは解凍して、WordPressがインストールされているフォルダーにコピーした。(CSSやJSはWordPressから指定して呼び出すのでドメイン内のどこに配置してもよい)

ファイル 概要 コピー先のファイル
jquery-ui.css テーマを表すスタイルシート テンプレートフォルダーに名前を変えてjquery-ui.css
imagesフォルダー 使用する画像ファイル jquery-ui.cssが入っているフォルダーにimagesフォルダーを入れる。
jquery-ui.min.js JQuery UIのスクリプト テンプレート/jsフォルダーに名前を変えてjquery-ui.min.js
jquery-ui-X.X.Xの個別機能min.js JQuery UIの個別スクリプト テンプレート/jsフォルダーに入れる