« jQueryの使い方 - jQueryUIを利用してみる。#jQuery | トップページ | wordpressでjQuery uiを利用してみる-その(2) »

2011年6月27日 (月)

wordpressでjQuery uiを利用してみる-その(1)

前回の記事に引き続いて「jQuery ui」をとりあげます。
仕事でwordpressを使う機会が増えてきたので、wordpressでの実装方法を考えてみます。

今回はwordpressのコメント欄にjQuery UIのタブ機能をつけてみたいと思います。

Comment

Wordpress_writecomment

このような感じでコメントを見る部分とトラックバック、コメント記入欄にタブでわけてみます。

ダウンロードページより本体をダウンロードします。

ダウンロード方法
Jquery_ui

リソースは Core Widget Tabs の3つとなります。これらにチェックを入れ、ダウンロードします。

使用しているバージョン
jquery-uiの最新バージョンは1.8.13
wordpressの最新バージョンは3.1.3

必要なリソース
jquery.js
jquery-ui-1.8.13.custom.min.js
jquery.ui.setting.tabs.js
jquery.ui.tabs.css

jsフォルダにあるjquery-ui-1.8.13.custom.min.jsにはjquery.ui.core.js,jquery.ui.widget.js,jquery.ui.tabs.jsが全て入っています。

wordpressでjQueryを使う場合はwordpress側で予め準備してあるファイルを利用できます。

jquery.ui.tabs.cssはdevelopment-bundle>themes>baseにあります。

jquery.ui.setting.tabs.js 拡張性を考えて設定ファイルを新しく制作します。

テーマファイル内のjsフォルダにjquery-ui-1.8.13.custom.min.jsとjquery.ui.setting.tabs.jsを
cssフォルダにjquery.ui.tabs.cssをアップロードします。

wordpress側での準備
functions.phpに読み込みの設定を記述します。

wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui',get_bloginfo('template_url').'/js/jquery-ui-1.8.13.custom.min.js');
wp_enqueue_script('tabs-setting',get_bloginfo('template_url').'/js/jquery.ui.setting.tabs.js');
wp_enqueue_style('jquery-ui',get_bloginfo('template_url').'/css/jquery.ui.tabs.css');

<?php wp_head(); ?>へ出力されます。

htmlの記述例
基本構造
<div id="tabs">
 <ul>
  <li><a href="#tabs-1">comment</a></li>
  <li><a href="#tabs-2">trackback</a></li>
  <li><a href="#tabs-3">write comment</a></li>
 </ul>
 <div id="tabs-1">
  コメントスペース
 </div>
 <div id="tabs-2">
  トラックバックURL
 </div>
 <div id="tabs-3">
  コメントを書くスペース
 </div>
</div>

jquery.ui.setting.tabs.jsを制作する
txtファイルに次の項目を書いてjquery.ui.setting.tabs.jsという名前に変えて保存します。

jQuery(function(){
jQuery('#comment_tabs').tabs();
jQuery('#comment_tabs').tabs({selected:0});
});

wordpressでjQueryを利用する場合は、$をjQueryに書き換えます。


次回はwordpressのcomment.phpへ記述する方法を解説します。

|

« jQueryの使い方 - jQueryUIを利用してみる。#jQuery | トップページ | wordpressでjQuery uiを利用してみる-その(2) »

jQueryの使い方」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/40556640

この記事へのトラックバック一覧です: wordpressでjQuery uiを利用してみる-その(1):

« jQueryの使い方 - jQueryUIを利用してみる。#jQuery | トップページ | wordpressでjQuery uiを利用してみる-その(2) »