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

WordPress

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’ を渡します。

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

1
2
3
<ol class="commentlist">
< ?php wp_list_comments('type=comment&callback=custom_comments');?>
</ol>

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< ?php function custom_comments($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment;
    ?>
        <li <?php comment_class(); ?> id="li-comment-< ?php comment_ID() ?>">
        <div id="comment-<?php comment_ID() ?>">
            <span class="commentImg">< ?php echo get_avatar( $comment, 40 ); ?><br />< ?php comment_author_link() ?></span>
            <span class="commentdata">< ?php comment_date(__('Y/m/d(D) G:i', 'vicuna')) ?></span>
            < ?php comment_text() ?>
            <div class="commentmetadata">
                < ?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' => '') ) ); ?>
                < ?php edit_comment_link(__('Edit', 'vicuna'), '<span class="admin"> | ', ''); ?>
            </div>
    </div>
    < ?php
    }
?>

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

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

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

1
2
3
4
5
6
ol.commentlist { list-style:none; margin:1em 2em; padding:0; text-indent:0; }
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; }
ol.commentlist li p { font:normal 12px/1.4 helvetica,arial,sans-serif; margin:0 0 1em; text-indent:0; }
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; }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
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関数を呼び出しています。

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

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

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

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

1
2
< ?php   if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
< ?php wp_head(); ?>