« wordpressでjQuery uiを利用してみる-その(1) | トップページ | wordpressでjQuery uiを利用してみる-その(3) »

2011年7月 4日 (月)

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

Comment

wordpressでjQuery uiを利用してみる-その(1)からの続きになります。

今回はwordpressのcomments.phpへの記述方法を解説していきます。

comments.phpへの記述例
<div id="comment_tabs">
 <div class="comment_navi">
  <ul>
   <li><a href="#tabs-1">comment<?php comments_number('','','[%]'); ?></a></li>
   <li><a href="#tabs-2">trackback url</a></li>
   <li><a href="#tabs-3">write comment</a></li>
  </ul>
  <br clear="all">
 </div>
 <div id="tabs-1">
<?php if ( have_comments() ) : ?>
<?php if($comments):foreach($comments as $comment): ?>
  <div class="commentbody">
   <?php comment_text() ?>
  </div>
<?php endforeach;endif; ?>
<?php else: ?>
 <p>no comment</p>
<?php endif; ?>
 </div>
 <div id="tabs-2">
  <ul id="trackbackurl">
   <li>trackback URL</li>
   <li><input type="text" size="60" value="<?php trackback_url(); ?>" onfocus="this.select()" readonly></li>
  </ul>
 </div>
 <div id="tabs-3">
  <?php comment_form(array('comment_notes_after'=>'')); ?>
 </div>
</div>

なるべく簡単な表記になるようにシンプルな形で書いてあります。

条件分岐にて、コメントがあり/なしの時に表示される文章を変更しています。
<?php if ( have_comments() ) : ?>
<?php if($comments):foreach($comments as $comment): ?>
// コメントがあるときに表示
<?php endforeach;endif; ?>
<?php else: ?>
// コメントがないときに表示
<?php endif; ?>

コメントがないときに表示される文章は以下の「no comment」を書き直す事で変更できます。
<?php else: ?>
 <p>no comment</p>

コメントとトラックバックの数を表示
<?php comments_number('','','[%]'); ?>

トラックバックURLを表示
<?php trackback_url(); ?>

コメントフォームを表示
使えるタグを表示させない設定にしてあります。
<?php comment_form(array('comment_notes_after'=>'')); ?>


cssの記述
#comment_tabs { margin:20px 0 5px; padding:0 10px 10px; border:#DDD 1px solid; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
#tabs-1,
#tabs-2,
#tabs-3 { padding:5px; }
#respond { font-size:80%; }
.commentbody,
#trackbackurl input,
#commentform p input,
#commentform p textarea { padding:5px; border:#DDD 1px solid; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
.commentbody { margin:6px 0; }
.commentbody p,
#trackbackurl li,
#commentform p { padding:2px 0; clear:both; }
#commentform p label { width:120px; float:left; }
.form-submit input { margin-left:120px; cursor:pointer; }
.ui-tabs .ui-tabs-hide li a:hover { color:#F36; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { color:#666; cursor:default; }
.ui-tabs .ui-tabs-nav li {
margin:0 4px; padding:4px 12px; border:#DDD 1px solid;
border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; }

次回「wordpressでjQuery uiを利用してみる-その(3)」にてcss部分の解説をします。

|

« wordpressでjQuery uiを利用してみる-その(1) | トップページ | wordpressでjQuery uiを利用してみる-その(3) »

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

コメント

コメントを書く



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


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



トラックバック

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

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

« wordpressでjQuery uiを利用してみる-その(1) | トップページ | wordpressでjQuery uiを利用してみる-その(3) »