Home > >

WordPress、vicuna CMSテーマのコメント欄をスレッド表示に対応させた

2009年04月18日 (土) [Read Comment17個のコメント] [1,645 views] tweebuzz icon Hatena icon
この記事を読むのに必要な時間の目安: 10分ぐらい →→ あとで読む

WordPress逆引きデザイン事典[2.X対応]

WordPressバージョン2.7から提供された「コメント欄のスレッド表示」に対応したよ。自分用のまとめとして作業内容をメモっておきます。とても長いので気合いを入れて読んでください。

実際のコメント表示や返信機能を確かめたかったら、この記事のコメント欄を使っていただいて構いませんよ。

コメント欄のスレッド表示対応について

WordPress本体の設定としては、管理画面の「設定」→「ディスカッション」にある「コメントを×階層までのスレッド (入れ子) 形式にする」にチェックを入れるだけ。

ただしテーマ側でも階層表示への対応が必要で、うちで使ってるvicuna CMSを対応させるのは大変な作業でした。

修正作業では『WordPress コメントをスレッド対応にする : 独断と偏見の何でもレビュー』を参考にさせてもらいました。併せてご一読いただけると理解が深まると思います。

実際の作業内容はこんな感じです。

順に説明していきます。

表示対応１、comments.phpの編集

comments.phpで、実際の表示処理を行っている箇所を書き換えます。これまでのコメント表示処理部には長々と記述があったかも知れませんが、その記述はコールバック関数 'custom_comments' に移動します。

書き換えるべき内容としては、olリスト内でwp_list_comments関数を呼び出し、wp_list_comments関数では引数としてコールバック関数名 'custom_comments' を渡します。

具体的な記述例は下記を参考にしてください。

>> Open PlainTxt Window
PHP:
  1. <ol class="commentlist">
  2. <?php wp_list_comments('type=comment&callback=custom_comments');?>
  3. </ol>

表示対応２、functions.phpの編集

上述したcomments.phpから呼び出ししている 'custom_comments'関数を、functions.php内に新規追加します。このコールバック関数内で、実際の表示処理を定義します。

表示処理部の記述は、default テーマや、先述した『WordPress コメントをスレッド対応にする : 独断と偏見の何でもレビュー』を参考にし、自分流のコメント表示を作成しました。

現在では以下の内容をfunctions.phpの最後に記述しています。
『WordPress のコメントスレッド表示に対応。 - kappadow.jp』でご指摘を受け、一部内容を修正しました。修正版を適用することにより、「返信」をクリックするとコメント直下にコメント欄が移動します。[2009/7/9修正]

>> Open PlainTxt Window
PHP:
  1. <?php function custom_comments($comment, $args, $depth) {
  2.     $GLOBALS['comment'] = $comment;
  3.     ?>
  4.         <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
  5.         <div id="comment-<?php comment_ID() ?>">
  6.             <span class="commentImg"><?php echo get_avatar( $comment, 40 ); ?><br /><?php comment_author_link() ?></span>
  7.             <span class="commentdata"><?php comment_date(__('Y/m/d(D) G:i', 'vicuna')) ?></span>
  8.             <?php comment_text() ?>
  9.             <div class="commentmetadata">
  10.                 <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'reply_text' => '<img src="edit-comment-orange.gif" title="Reply Comment" alt="Reply" width="14" height="14" />このコメントに返信する(Reply Comment)', 'before' => '', 'after' => '') ) ); ?>
  11.                 <?php edit_comment_link(__('Edit', 'vicuna'), '<span class="admin"> | ', ''); ?>
  12.             </div>
  13.     </div>
  14.     <?php
  15.     }
  16. ?>

表示対応３、CSSデザインの変更

CSSを使ってデザインとしての表示内容を定義します。これは『WordPress コメントをスレッド対応にする | Casey's Critical Thinking』で見かけた形式がカッコ良かったので、こちらをパクって自分用に書き換えました。

まだちょっと煮詰まってないんだけど、現在はこんな感じのを使ってます。

>> Open PlainTxt Window
CSS:
  1. ol.commentlist { list-style:none; margin:1em 2em; padding:0; text-indent:0; }
  2. ol.commentlist li { border:1px solid #d5d5d5; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; height:1%; margin:0 0 5px; padding:5px 7px 10px 20px; position:relative; display: block; clear: both; }
  3. ol.commentlist li p { font:normal 12px/1.4 helvetica,arial,sans-serif; margin:0 0 1em; text-indent:0; }
  4. ol.commentlist li ul { font:normal 12px/1.4 helvetica,arial,sans-serif; list-style:square; margin:0 0 1em; padding:0; text-indent:0; }
  5. ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
  6. ol.commentlist li .commentImg { float: left; text-indent: 0em ; margin-right: 1em; }

入力対応１、comments.phpの編集

コメント入力部でcancel_comment_reply_link関数と、comment_id_fields関数を呼び出します。

cancel_comment_reply_link関数はその名の通り、コメント返信をキャンセルするリンクを表示してくれます。comment_id_fields関数は、コメント入力時の隠しフィールドとして返信元のIDを埋め込んでくれるそうです。

実際の定義はこんな感じで、コメント入力部の最初でcancel_comment_reply_link関数呼び出し、form終了タグの直前でcomment_id_fields関数を呼び出しています。

>> Open PlainTxt Window
PHP:
  1. <h2 id="postcomment"><?php comment_form_title( 'コメントをどうぞ', '%s のコメントに返信する' ); ?></h2>
  2. <p><?php cancel_comment_reply_link(); ?></p>
  3. （中略）
  4. <?php comment_id_fields(); ?>
  5. </form>

入力対応２、header.phpの編集

header.php内のwp_head関数呼び出し前に、wp_enqueue_script関数経由で「wp-includes/js/comment-reply.js」の呼び出し行を追加します。

とそれっぽく書きましたが、comment-reply.jsで何が行われるのか、まだ良く分かっていません...default テーマにも記述があるから何か意味があるんだろうけど、イマイチ効果が分からない。今のところオマジナイとして書いていますが、もしかすると必要ないのかも知れません。
このJavaScriptにより、「返信」時に該当コメントの下にコメント記入欄が移動するようになります。[2009/7/9修正]

>> Open PlainTxt Window
PHP:
  1. <?php   if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
  2. <?php wp_head(); ?>

参考リンク：WordPress コメントをスレッド対応にする : 独断と偏見の何でもレビュー
参考リンク：WordPress コメントをスレッド対応にする | Casey's Critical Thinking
Related Posts with Thumbnails

現在のコメント: 17 個RSS icon


  1. KOBAYASHI Hideto     2009/04/17(金) 15:36
    WordPress

    WordPressバージョン2.7から提供された「コメント欄のスレッド表示」に対応したよ。自分用のまとめとして作業内容をメモっておきます。とても長いので気合いを入れて読んでください。
    実際のコメント表示や [...] http://tinyurl.com/cc3s3j

    Replyこのコメントに返信する(Reply Comment)

  2. hide10     2009/04/18(土) 0:19
    JAPAN Windows Mozilla Firefox

    コメント表示のテスト用ですよ

    Replyこのコメントに返信する(Reply Comment)

  3. Casey     2009/04/18(土) 10:06
    JAPAN Windows Mozilla Firefox

    トラックバックありがとうございます。＾＾

    Replyこのコメントに返信する(Reply Comment)

    • hide10       2009/04/18(土) 10:10
      JAPAN Windows Mozilla Firefox

      わざわざご来訪いただきありがとうございます :-)
      Caseyさんの記事を参考にさせてもらったお陰で、何とかスレッド表示に対応できました。ありがとうございます！

      Replyこのコメントに返信する(Reply Comment)

  4. Makoto     2009/04/19(日) 11:44
    JAPAN Ubuntu Linux Mozilla Firefox

    アバターを追加してみるテスト

    Replyこのコメントに返信する(Reply Comment)

  5. kerberos     2009/07/10(金) 8:48
    JAPAN Windows Sleipnir

    はじめまして。
    突然のコメント＆トラックバックで申し訳ありません。
    そして、指摘というつもりはなかったのですが、記事の内容でご不快にさせたかもしれません。
    申し訳ありませんでした。
    hide10様のエントリは見やすくて大変参考になりました。
    遅くなってしまいましたが、ありがとうございました。
    ずっとやりたかったのですが、結構難しそうなのでなかなか手を出せずにいたのです。

    Replyこのコメントに返信する(Reply Comment)

    • hide10       2009/07/10(金) 8:55
      JAPAN Windows Mozilla Firefox

      コメントありがとうございます :wink:
      不快だなんてとんでもない！誤りを指摘していただいた上に、わざわざお越し頂いてコメントまで頂けてとても嬉しく思っています :)

      実はブログにお邪魔して不具合の指摘に対するお礼コメントを書いたんですが、コメント書き込みエラーが出て弾かれてしまったんですよ :cry: それもあり、お礼が遅れてしまいました。

      お陰様でJavaScriptの意味が分かり、コメント欄が移動するようになりました。重ねてお礼申し上げます(^^

      Replyこのコメントに返信する(Reply Comment)

      • kerberos         2009/07/10(金) 9:21
        JAPAN Windows Sleipnir

        ありがとうございます！ :oops:

        >コメント書き込みエラーが出て弾かれてしまったんですよ
        せっかく来ていただいて、コメントまでいただいたのに失礼なことになってしまって申し訳ありませんm(_ _;)m
        書き込みエラーについてはまた調べて今後このようなことがないように努力いたします。
        よろしければまたお越しくださいませー（最近あまり更新できていませんが…）

        Replyこのコメントに返信する(Reply Comment)

        • hide10           2009/07/10(金) 9:38
          JAPAN Windows Mozilla Firefox

          重ねてのコメントありがとうございます :wink:
          ブログのRSSを読んでいたら、AdSenseの解析が消えない記事があってビックリ。ずいぶん前にググって、その記事に辿りついてました！
          これも何かのご縁だと思いますので、RSS購読させていただきます。よろしくです～


  6. Sorai     2010/03/24(水) 7:36
    WordPress

    WordPress、vicuna CMSテーマのコメント欄をスレッド表示に対応させた – Hinemosu
    http://www.hide10.com/?p=12154

    Replyこのコメントに返信する(Reply Comment)

  7. yoshida     2010/05/01(土) 16:21
    JAPAN Windows Mozilla Firefox

    参考になりました
    ありがとう :)

    Replyこのコメントに返信する(Reply Comment)

コメントをどうぞ







メールアドレスが未記入だったり、一度もコメントしたことのないメールアドレスの場合、管理者に承認されるまでコメントが表示されません。
アバターをオリジナル画像に変更したい場合は、Gravatarサービスに登録してください。

現在のトラックバック数 : 3 回

pingback from くだらないページ - コメントのスレッド化 09-06-19 (金) 1:54

[...] ココの記事を参考にして、Vicunaテーマのコメントのスレッド化に挑戦してみました。 [...]

trackback from kappadow.jp 09-07-09 (木) 21:21

WordPress のコメントスレッド表示に対応。

一応、ul でテンプレを書き直してはみたものの、なんとなくデザインが気に入らない…

trackback from funnyfamily 10-06-27 (日) 1:55

wp-vicuna　コメント返信スレッド対応 覚書

参考サイト Hinemos さんところの WordPress、vicuna CMSテーマのコメント欄をスレッド表示に対応させた というページ。 WP.vicunaさんのテーマも、今年リニューアルされているのだけど、コメン…

トラックバックアドレス

Trackback URL for this entry

Home > > WordPress、vicuna CMSテーマのコメント欄をスレッド表示に対応させた

このページの先頭へ戻る