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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

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

カスタマイズといっても、この方法だと3回ほどコピペすれば良いだけなので簡単にできるかと思います。

photo by Eivind Sætre

スポンサーリンク
レクタングル(大)広告

カスタマイズ前

カスタマイズ前はデフォルトのこんな感じです。

コメント欄カスタマイズ前

comments.phpの編集

まずは、コメント欄のテンプレートであるcomments.phpの中身をすべて削除して以下を貼り付けます。

wp_list_comments()は、コメントの出力をカスタマイズする関数です。

引数に「’callback=mytheme_comment’」というようにコールバック関数を指定することでコメント表示をカスタマイズします。

functions.phpの編集

そのコールバック関数は、functions.phpに以下のように書きます。

このコールバック関数で、Wordpressデフォルトのコメント表示をカスタマイズします。

style.cssでスタイルの設定

あとは、style.cssなどからコメント欄のスタイルを設定するだけです。

細かなところは、それぞれ使用しているテーマに応じて調整する必要はあると思います。

カスタマイズ後

カスタマイズ後は以下のようになりました。

コメント欄のカスタマイズ後

とてもシンプルな表示になります。

画像も不要な場合は、スタイルシートで非表示(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の関数に以下のようなコードを追加する必要があります。

    以下のページなどが参考になります。
    コメントリストのカスタマイズ: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に以下のように書いて、消してしまってもいいかもしれません。

  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/
    を、わいひらさんのコードと組み合わせたところ希望どおりの形になりました。
    ありがとうございます!