コメント頂いたので、記事にして
みます。このブログで実装してい
るような、コメントとトラバをタブ
で分けるカスタマイズ法。方法は
多数あると思いますので参考
程度にして頂ければと思います。
内容は、コメントとトラバをプラグインを使わずに分ける方法と、それをjQueryを使ってタブ分けする方法です。
コメントとトラバを分ける
まず、コメントとトラバを分けます。既にWordPress: コメントとトラックバックを分けるのにプラグインは不要という記事がありますので、コチラもご参照くださいね。この点は全く同じ内容です。
STEP.1
お使いのテーマファイル内にあるcomments.phpのバックアップを取ってからファイル開いて以下のコードを探します。
<?php foreach ($comments as $comment) : ?> |
このコードがコメントやトラバを表示するコードになります。
STEP.2
STEP.1のコードのすぐ下に以下のコードを追加します。
<?php $comment_type = get_comment_type(); ?><?php if($comment_type == 'comment') { ?> |
STEP.3
追加したら今度は以下のコードを探します。
<?php endforeach; ?> |
<?php foreach ($comments as $comment) : ?>の下の方だと思います。
STEP.4
コードが見つかったら<?php endforeach; ?>のすぐ上に以下のコードを追加します。
<?php } else { $trackback = true; } ?> |
これで、コメントとトラバを分けることが出来ます。
タブ分けする
次に、これをjQueryでタブ分けします。使用するjQueryプラグインはお好みで良いと思いますが、ここではこのブログを例にします。僕はcss happy lifeさんのよくある質問っぽいののjQueryを使ったサンプルを利用させて頂きました。
jQueryのパスをheader.phpに入れる
まずjQueryを使えるようにします。
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/qaTab.js"></script> |
jsファイルは「js」というフォルダ内に入れていますのでこのようにしていますが、別のファイル名なら変更してくださいね。あと、cssファイルの追加もお忘れなく・・
タブで分ける
再度comments.phpを開き、先程入れたjQueryが動くようにコードを追加します。
<?php if ($comments) : ?><ul class="tabMenu"><li id="qa05"><a href="#qa05_area" title="頂いたコメント">頂いたコメント</a></li><li id="qa06"><a href="#qa06_area" title="トラックバック">トラックバック</a></li><li id="qa07"><a href="#qa07_area" title="お読み下さい">お読み下さい</a></li></ul> |
ここがタブの部分になります。qa05のタブの「頂いたコメント」をクリックすると、<dl id=”qa05_area”>の中身が表示される、という仕組みです。
それぞれのタブ内に表示させるコンテンツを追加します。
「頂いたコメント」の中身：
<dl id="qa05_area"> <ol class="commentlist"><?php wp_list_comments('type=comment&callback=mytheme_comment'); ?> <?php foreach ($comments as $comment) : ?><?php $comment_type = get_comment_type(); ?><?php if($comment_type == 'comment') { ?><?php $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : ''; ?> <?php } else { $trackback = true; } ?><?php endforeach; ?> </ol></dl><?php if ($trackback == true) { ?>[php]ここにはコメントだけ表示されるようにします。<h5>「トラックバック」の中身：</h5>[php]<dl id="qa06_area"><ol><?php foreach ($comments as $comment) : ?><?php $comment_type = get_comment_type(); ?><?php if($comment_type != 'comment') { ?><li><?php comment_author_link() ?></li><?php } ?><?php endforeach; ?></ol><?php } ?> <?php else : // this is displayed if there are no comments so far ?> <?php if ('open' == $post->comment_status) : ?> <?php else : // comments are closed ?> <p class="nocomments">Comments are closed.</p> <?php endif; ?><?php endif; ?></dl> |
ここはトラバを表示。
「お読み下さい」の中身は特に必要ないので省きますが、何か入れるなら以下のdlの中にお好きなコンテンツを追加してください
<dl id="qa07_area">なんか好きなコンテンツ</dl> |
以上の手順で実装出来ると思います。（※コピペじゃ無理ですが）なんかいらないコードありそうだけど消すのが怖い。
