WordPressでシンプルなスレッド掲示板風コメント欄を作成するカスタマイズ方法

先日、スレッド掲示板のようなシンプルなコメント欄を作成してみたのでメモがてら紹介です。

カスタマイズといっても、この方法だと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手順でスレッド表示させることができます。

  1. comments.phpの削除&コピペ
  2. functions.phpへのコピペ追記
  3. style.cssへのコピペ追記

「とりあえず、返信機能とか不要で、上から下へ読むだけのシンプルなコメント欄が欲しい」なんて場合は、結構読みやすいコメント欄になると思います。

『WordPressでシンプルなスレッド掲示板風コメント欄を作成するカスタマイズ方法』へのコメント

  1. 名前:MomoTaro 投稿日:2015/01/21(水) 19:41:55 ID:50e866aa4

    はじめまして。

    シンプルな掲示板を作る上で非常参考になる記事だと思い、こちらの記事を参考にさせて頂きながら、WordPressの「コメント」機能を使って掲示板を作成している者です。

    こちらの記事では、デフォルトの「返信」の機能は省く感じで解説されていらっしゃいますが、「返信」を省かず、そのままにしておく為にはどのようにすれば良いのでしょうか?

    お手数をお掛けしますが、ご教授頂けますと幸いです。

  2. アバター画像 名前:わいひら 投稿日:2015/01/21(水) 20:10:48 ID:6b3287040

    MomoTaroさんはじめまして。

    某スレッド掲示板のような仕様にしたかったので、返信機能は表示しないようにしています。

    返信を表示させるには、functions.phpの関数に以下のようなコードを追加する必要があります。

     $depth, 'max_depth' => $args['max_depth']))) ?>

    以下のページなどが参考になります。
    コメントリストのカスタマイズ:WordPress | KH-WEBLOG
    comment_reply_link

    ※動作確認はしてないです。

  3. 名前:MomoTaro 投稿日:2015/01/21(水) 21:20:51 ID:50e866aa4

    わいひらさん、早速のご回答ありがとうございます!

    ご教授頂いたコードを追加したことにより、見事に「返信」ができました!

    ただ、自分の理想として、下記サイト内の掲示板のようなものを作りたいと考えておりまして…。(参考サイト:コストコ通 http://costcotuu.com/community/bbs23)

    このサイトの掲示板も、恐らくコメント機能を応用した掲示板のような気がするのですが、初心者にはなかなか上手くいきませんね…。

  4. アバター画像 名前:わいひら 投稿日:2015/01/21(水) 22:19:51 ID:6b3287040

    うまくいったようでよかったです!

    参考サイトのようには、スタイルシートをうまく設定すれば多分いけそうな気はします。

  5. 名前:来福 太郎 投稿日:2015/04/19(日) 09:28:06 ID:18804cfe3

    コメントを簡単に入力できる欄を作成したくてテスト入力しました。
    メールアドレス欄に入力しなくてもよいもの・ウエブサイトの入力を
    しなくてよいものを探していました。

  6. アバター画像 名前:わいひら 投稿日:2015/04/20(月) 13:02:42 ID:a354a5ba1

    メールアドレスと、ウェブサイト入力欄が不要なら、CSSに以下のように書いて、消してしまってもいいかもしれません。

    .comment-form-email,
    .comment-form-url {
        display: none;
    }
  7. 名前:yunosuke 投稿日:2015/05/18(月) 18:52:17 ID:118c7f015

    初めまして!
    このサイトを参考にさせていただき、オリジナルのコメントボックスをsingle.phpに取り付けることができました。
    ひとつ質問があります。
    現在、としてコメントに番号をつけているのですが、各記事「1」から始まってくれず、全投稿を通した数字になってしまうのです。
    記事Aにコメント「1」から「10」があるとすると、その次の投稿Bは「11」から始まってしまうという感じです。
    記事ごとにコメント番号を「1」から始めるにはどうすればいいでしょう? ご教示いただけると幸いです。

  8. 名前:yunosuke 投稿日:2015/05/18(月) 18:57:30 ID:118c7f015

    タグが消えてしまっておりました。

    × 現在、としてコメントに番号をつけているのですが、
    ○ 現在、<?php comment_ID(); ?>としてコメントに番号をつけているのですが、

    です(カッコ全角にしました)。
    よろしくお願い申し上げます。

  9. アバター画像 名前:わいひら 投稿日:2015/05/18(月) 19:46:07 ID:d37cde8d5

    WordPress単体ではそのような機能はないと思います。
    どうしても、機能を付ける場合は、通し番号を付ける以下のようなプラグインを利用する必要があるかもしれません。
    dage.jp ≫ コメントに対して連番を振る WordPress プラグイン
    WordPress ? Greg’s Threaded Comment Numbering ≪ WordPress Plugins

    古いバージョンのプラグインもありますが、今のWordpressで動作するかまではちょっとわからないです。

  10. 名前:yunosuke 投稿日:2015/05/18(月) 21:06:30 ID:a8a615cf9

    わいひら様

    ご回答いただきありがとうございます!
    検索しまくったところ、
    https://javelinadevil.wordpress.com/2012/11/23/wp_list_comments%E3%81%A7%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E9%96%A2%E6%95%B0%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E9%9A%9B%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AB%E9%80%A3%E7%95%AA/
    を、わいひらさんのコードと組み合わせたところ希望どおりの形になりました。
    ありがとうございます!

  11. 名前:himi 投稿日:2021/01/17(日) 03:45:32 ID:e40f36f98

    上述されたコードを使用したところ名前がサイトのヘッダー左上に表示されるようになりました。なぜでしょうか?

  12. アバター画像 名前:わいひら 投稿日:2021/02/02(火) 11:56:33 ID:355dc613a

    申し訳ないですが実際のサイトの状態を見てみないと、ちょっと何ともいえないかもしれません。