WordPress コメントをスレッド対応にする

WordPress 2.7より前のバージョンのテーマを使っている場合はディスカッション設定で「コメントをN階層までのスレッド (入れ子) 形式にする」にチェックを入れても何も変わらないのです。それはcomments.phpが対応していないからです。僕はテーマを変えたくなかったので自分でcomments.phpをアップグレードしました。僕みたいにテーマを変えたくないけどコメントをスレッド形式にしたい方がいるかと思いますので僕がやったことを簡単に説明します。

これはすべてcdharrison.comで紹介されているものを使っています。

まずは現在のcomments.phpをバックアップします。次にcomments.phpを以下のものに上書きします。

< ?php
/**
* @package WordPress
* @subpackage cdharrison
*/

// Do not delete these lines
if (!empty($_SERVER['SCRIPT_FILENAME']) &amp;amp;amp;&amp;amp;amp; 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');

if ( post_password_required() ) { ?>
<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
< ?php
return;
}
?>

<!-- You can start editing here. -->

< ?php if ( have_comments() ) : ?>
<h3 id="comments" class="comment-title">< ?php comments_number(__('No Comments'), __('1 Comment'), __('% Comments')); ?></h3>

<ol class="commentlist">
< ?php wp_list_comments(); ?>
</ol>
<div class="navigation">
<div class="alignleft">< ?php previous_comments_link() ?></div>
<div class="alignright">< ?php next_comments_link() ?></div>
</div>
< ?php else : // this is displayed if there are no comments so far ?>

< ?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->

< ?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments">Comments are closed.</p>

< ?php endif; ?>
< ?php endif; ?>

< ?php if ('open' == $post->comment_status) : ?>

<div id="respond">

<h3>< ?php comment_form_title( 'コメントをどうぞ', '%s に返信する' ); ?></h3>

<div class="cancel-comment-reply">
<small>< ?php cancel_comment_reply_link(); ?></small>
</div>

< ?php if ( get_option('comment_registration') &amp;amp;amp;&amp;amp;amp; !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=< ?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
< ?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

< ?php if ( $user_ID ) : ?>

<p><a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">< ?php echo $user_identity; ?></a>としてログイン中(<a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">ログアウト</a>)</p>

< ?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?/>" size="22" tabindex="1" < ?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small>お名前 < ?php if ($req) _e('(required)'); ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?/>" size="22" tabindex="2" < ?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small>メール (公開されません) < ?php if ($req) _e('(required)'); ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?/>" size="22" tabindex="3" />
<label for="url"><small>ホームページ</small></label></p>

< ?php endif; ?>

<p class="comment-tag">
次のタグは有効です: < ?php echo allowed_tags(); ?><br />
<br />

</p><p><textarea name="comment" id="comment" cols="80%" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="コメントを送信する" />
< ?php comment_id_fields(); ?>
</p>
< ?php do_action('comment_form', $post->ID); ?>

</form>
</div>

< ?php endif; // If registration required and not logged in ?>

< ?php endif; // if you delete this the sky will fall on your head ?>

次にstyle.cssに次のコードを一番最後に追加します。

ol.commentlist { list-style:none; margin:0; 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 10px; padding:5px 7px 5px 57px; position:relative; }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { }
ol.commentlist li div.comment-author { padding:0 170px 0 0; }
ol.commentlist li div.vcard { font:bold 14px/1.4 helvetica,arial,sans-serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url { color:#c00; text-decoration:none; }
ol.commentlist li div.vcard cite.fn a.url:hover { color:#000; }
ol.commentlist li div.vcard img.avatar { border:5px solid #d5d5d5; left:7px; position:absolute; top:7px; }
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { font:bold 10px/1.4 helvetica,arial,sans-serif; position:absolute; right:10px; text-align:right; top:5px; }
ol.commentlist li div.comment-meta a { color:#333; text-decoration:none; }
ol.commentlist li div.comment-meta a:hover { color:#000; }
ol.commentlist li p { font:normal 12px/1.4 helvetica,arial,sans-serif; margin:0 0 1em; }
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 div.reply { background:#999; border:1px solid #666; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; color:#fff; font:bold 9px/1 helvetica,arial,sans-serif; padding:5px 10px;  text-align:center; width:36px; }
ol.commentlist li div.reply:hover { background:#c30; border:1px solid #c00; }
ol.commentlist li div.reply a { color:#fff; text-decoration:none; text-transform:uppercase; }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li { }
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-3 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-4 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }
ol.commentlist li.parent { }
ol.commentlist li.pingback { }
ol.commentlist li.pingback.parent { }
ol.commentlist li.pingback div.vcard { padding:0 170px 0 0; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

そうするとコメントは次のようになります。
wp-comment-style-1

僕が使っているcssは次の通りです。

ol.commentlist { list-style:none; margin:0; 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 10px; padding:5px 7px 5px 57px; position:relative; }
ol.commentlist li.alt { }

ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin { }
ol.commentlist li.comment { list-style: none; }
ol.commentlist li div.comment-author { padding:0 170px 0 0; }
ol.commentlist li div.vcard { font:bold 0.9em helvetica,arial,sans-serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url { color:#000; text-decoration:underline; }
ol.commentlist li div.vcard cite.fn a.url:hover { color:#000; text-decoration:none; }
ol.commentlist li div.vcard img.avatar { border:2px solid #d5d5d5; left:7px; position:absolute; top:7px; }
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { font:bold 0.9em helvetica,arial,sans-serif; position:absolute; right:10px; text-align:right; top:5px; }
ol.commentlist li div.comment-meta a { color:#333; text-decoration:none; }
ol.commentlist li div.comment-meta a:hover { color:#000; }
ol.commentlist li p { font:normal 0.9em helvetica,arial,sans-serif; margin:0 0 1em; margin-top: 1.5em; }
ol.commentlist li ul { font:normal 0.9em helvetica,arial,sans-serif; list-style:square; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li div.reply { text-align:right; color:#000;}
ol.commentlist li div.reply:hover { }
ol.commentlist li div.reply a { }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li { }
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor { }
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-3 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-4 { margin:0 0 .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }
ol.commentlist li.parent { }
ol.commentlist li.pingback { }
ol.commentlist li.pingback.parent { }
ol.commentlist li.pingback div.vcard { padding:0 170px 0 0; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}
ol.commentlist li.bypostauthor { background: #ffffee; }

p.comment-tag {
font-size: 0.8em;
font-family: Verdana, Tahoma, sans-serif;
color: #888888;
margin: 0;
padding: 0;
}
h3.comment-title, h3.respond {
font-size: 0.9em;
font-weight: normal;
color: #008ba4;
letter-spacing: 2px;
margin: 20px 0 15px 0;
}

これを元に微調整できるかと思います。

-----------------------

関連するかもしれない記事:
  • WordPress 2.7でコメントとトラックバックを分ける方法

  • トレンドマイクロ・オンラインショップ

    トラックバック

    1. Hinemosu
    2. mono-stock» Blog Archive » wordpressでオリジナルアバターを実現

    7 Comments

    1. casey より:

      このコードを使うとコメントがこのように表示されます。

    2. てすと より:

      テストさせていただきます。

    コメントをどうぞ

    次のタグは有効です: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
    Smilies: :) :D ;) 全部表示 »