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フォルダーに入れる |