• かちびと.net

    WordPressのコメントとトラックバックをjQueryでタブ分けするカスタマイズ法のご紹介。コメントいただいたので書いて見ます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

WordPressのコメントとトラックバックをjQueryでタブ分けするカスタマイズ法

スポンサーリンク

コメント頂いたので、記事にして
みます。このブログで実装してい
るような、コメントとトラバをタブ
で分けるカスタマイズ法。方法は
多数あると思いますので参考
程度にして頂ければと思います。

内容は、コメントとトラバをプラグインを使わずに分ける方法と、それを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>

以上の手順で実装出来ると思います。(※コピペじゃ無理ですが)なんかいらないコードありそうだけど消すのが怖い。

URL :
TRB :

Comments & Trackbacks (5)

  1. シュガー

    とてもタメになる記事を書かれておられ、参考にさせて頂いています。
    他にも面白い記事がたくさんあるようですので、ゆっくり拝見させていただいています。

    ところで1点、質問させて下さい。
    index.phpに入れて動かした場合は、ご紹介されているコメントとトラックバックなどがタブにより切り替えができるのですが、そのソースでcomments.phpやsingle.phpに入れても、タブの切り替えが行われず、縦並びに全てが表示されてしまいます。

    最終的には、comments.phpで機能して欲しいので、色々と調べて試してみていますが、いずれも解決に至らず、困っております。
    もしよろしければご助言いただけると幸いです。よろしくお願いします。

    • シロ

      こんばんは、ご覧頂きありがとうございます:)

      index.phpに入れて動かした場合は、ご紹介されているコメントとトラックバックなどがタブにより切り替えができるのですが、そのソースでcomments.phpやsingle.phpに入れても、タブの切り替えが行われず、縦並びに全てが表示されてしまいます。

      最終的には、comments.phpで機能して欲しいので、色々と調べて試してみていますが、いずれも解決に至らず、困っております。

      なるほど・・テーマファイルを見ていないので何とも言えませんが、index.phpでは動作しているのでコードの記述に関しては問題ないはずです。single.phpで動かないのはライブラリのコンフリクト(衝突)によるものが考えられます。たとえば、単一記事ページだけprototype.jsを読み込む、という場合もあります。

      多くの場合はプラグインが関係しています。手順として

      1.まずはプラグインを停止してsingle.phpで当記事のタブが動作するか確認してください。
      2.タブが動作したらプラグインを1つ有効化して、single.phpでタブが動作するか確認します。
      3.動かなくなったらそのプラグインが動作に影響を与えています。

      ただ単に動かしたい、というのであればコンフリクトの回避をお試しください。以下が大変参考になりますよ!
      http://logic.stepserver.jp/memo.cgi/archive/499/

      上記を行えば解決するのではと思います。

      • シュガー

        ご丁寧に教えていただき感謝いたします。
        コンフリクトの回避をやってみたところちゃんと動いてくれました。
        Wordpressは詳しくないので、コンフリクトしているということを初めて知り、とても勉強になりました。
        今後の事と勉強を踏まえ、プラグインを停止する方法でも追求してみようと思います。
        本当に有難う御座いました。

        • シロ

          おお、動作しましたか!安心しました:D
          コンフリクトはJavascriptの問題なのでなにかお調べになるのでしたらJavascript関連で探されたほうが早く見つかると思います。

          ぜひ追求してみてください!新たな世界が広がるはずです!

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services