先日、スレッド掲示板のようなシンプルなコメント欄を作成してみたのでメモがてら紹介です。
カスタマイズといっても、この方法だと3回ほどコピペすれば良いだけなので簡単にできるかと思います。
photo by Eivind Sætre
スポンサーリンク
目次
カスタマイズ前
カスタマイズ前はデフォルトのこんな感じです。
comments.phpの編集
まずは、コメント欄のテンプレートであるcomments.phpの中身をすべて削除して以下を貼り付けます。
<div id="comments-thread">
<?php
if(have_comments()):
?>
<h3 id="resp">『<?php the_title(); ?>』へのコメント</h3>
<ol class="commets-list">
<?php wp_list_comments('callback=mytheme_comment'); //コメントの出力をカスタマイズする?>
</ol>
<?php
endif;
$args=array('title_reply' => 'コメントをどうぞ',
'lavel_submit' => ('Submit Comment'),
);
comment_form($args);
?>
</div>
<!-- END div#comments-thread -->wp_list_comments()は、コメントの出力をカスタマイズする関数です。
引数に「’callback=mytheme_comment’」というようにコールバック関数を指定することでコメント表示をカスタマイズします。
functions.phpの編集
そのコールバック関数は、functions.phpに以下のように書きます。
//コメントリスト表示用カスタマイズコード
function mytheme_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>">
<div class="comment-listCon">
<div class="comment-info">
<?php echo get_avatar( $comment, 48 );//アバター画像 ?>
<?php printf(__('名前:<cite class="fn comment-author">%s<span class="admin"></span></a></cite> :'), get_comment_author_link()); //投稿者の設定 ?>
<span class="comment-datetime">投稿日：<?php printf(__('%1$s at %2$s'), get_comment_date('Y/m/d(D)'), get_comment_time('H:i:s')); //投稿日の設定 ?></span>
<span class="comment-id">
ID：<?php //IDっぽい文字列の表示（あくまでIDっぽいものです。）
$ip01 = get_comment_author_IP(); //書き込んだユーザーのIPアドレスを取得
$ip02 = get_comment_date(jn); //今日の日付
$ip03 = ip2long($ip01); //IPアドレスの数値化
$ip04 = ($ip02) * ($ip03); //ip02とip03を掛け合わせる
echo mb_substr(base64_encode($ip04), 2, 9); //base64でエンコード、頭から9文字まで出力
?>
</span>
<span class="comment-edit"><?php edit_comment_link(__('Edit'),' ',''); //編集リンク ?></span>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.') ?></em>
<?php endif; ?>
<div class="comment-text"></div>
<?php comment_text(); //コメント本文 ?>
<?php //返信機能は不要なので削除 ?>
</div>
</div>
<?php
}このコールバック関数で、Wordpressデフォルトのコメント表示をカスタマイズします。
style.cssでスタイルの設定
あとは、style.cssなどからコメント欄のスタイルを設定するだけです。
#comments-thread .comment-id,
#comments-thread .form-allowed-tags{
display:none;
}
#comments-thread .comment-author{
font-weight:bold;
}
#comments-thread img.avatar {
float:right;
margin-right:0;
margin-left:10px;
}
#commentform label{
display:block;;
}
#commentform input{
margin-bottom:0px;
}
#commentform input,
#commentform textarea{
background-color:#fff;
border:1px solid #aaa;
}細かなところは、それぞれ使用しているテーマに応じて調整する必要はあると思います。
カスタマイズ後
カスタマイズ後は以下のようになりました。
とてもシンプルな表示になります。
画像も不要な場合は、スタイルシートで非表示（display:none;）にすればOKです。
まとめ
書いてある中身がどのような処理をしているかとか関係なく、とりあえず動作させたいだけなら、以下の3手順でスレッド表示させることができます。
- comments.phpの削除＆コピペ
- functions.phpへのコピペ追記
- style.cssへのコピペ追記
「とりあえず、返信機能とか不要で、上から下へ読むだけのシンプルなコメント欄が欲しい」なんて場合は、結構読みやすいコメント欄になると思います。
はじめまして。
シンプルな掲示板を作る上で非常参考になる記事だと思い、こちらの記事を参考にさせて頂きながら、WordPressの「コメント」機能を使って掲示板を作成している者です。
こちらの記事では、デフォルトの「返信」の機能は省く感じで解説されていらっしゃいますが、「返信」を省かず、そのままにしておく為にはどのようにすれば良いのでしょうか？
お手数をお掛けしますが、ご教授頂けますと幸いです。