[WordPress]独自テーマにコメント欄を表示させる方法[初心者向け] 公開：2019.09.22 更新：2019.09.22
こんにちは、木彫り猫です。
さあ、いよいよ我がサイトにもコメ欄を表示させる時が来た……..！
ということでさっそく調べてやっていきます。今回は （https://webdesign.practice.jp/wordpress-theme16-comments-php ）様と（ https://fantastech.net/wordpress-comment-form-cookie-checkbox#outline-2 ）様の記事を参考にさせていただきました。
目次
必要なファイル
今回は、個別投稿へのコメント受付なので[single.php]に追記をしていきます。ですが、実際のところ[single.php]への追記はテンプレートタグだけで済ませ、細かい機能などは別途の[comments.php]に記載する場合が多いようなので、私もそちらの方法でやっていきます。
[single.php]への追記はコメントを表示させたい位置に以下のコードをコピペでOK。もちろんdiv要素のclassも変えても構いません。
<div class="comment-fill">
<?php comments_template(); ?>
</div>さて、本題の[comments.php]ですが実例を表すとこのサイトのやつがこんな感じ↓
<div id="comment_area">
<?php $args = array(
'title_reply' => 'コメント',
'label_submit' => 'コメントを送信する',
'comment_notes_before' => '<p class="commentNotesBefore"></p>',
'comment_notes_after' => '<p class="commentNotesAfter">内容をご確認の上、送信してください。</p>',
'fields' => array(
'author' => '<p class="comment-form-author">' .
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' placeholder="ニックネームを入力..." /></p>',
'url' => '',
),
'comment_field' => '<p class="comment-form-comment">' . '<textarea id="comment" name="comment" cols="50" rows="6" placeholder="コメントを入力..." /></textarea></p>',
);
comment_form( $args ); ?>
<?php if(have_comments()): ?>
<ol class="commets-list">
<?php wp_list_comments('avatar_size=48'); ?>
</ol>
<?php endif; ?>
</div>…….申し訳ないです。ほとんど （https://webdesign.practice.jp/wordpress-theme16-comments-php ） 様のコピペでございます。とはいえ、必要な部分はちゃんと変えたから許してくれ…….。
でも、コピペでもなんとかなる理由はちゃんとあります。それはWordPressが勝手に手伝ってくれるということです。
例をあげると、下の画像の赤い下線でチェックボックスがある文。これはcookieを使用する機能ですから、初心者だとちょっと厳しいものがありますが、この文はWordPressが出力させている文になります。
なお、私がCSSでいじったのは送信ボタンだけですので、デフォルトでこれだけの整ったコメントスペースが出てくることにもなります。
要するに、「コメント欄、意外と簡単に表示できますよ？」ってことです。……上から目線ですいません、はい。
コメントスペースの改造
ここからは、コードと実際に出力されたエリアを見比べながら、対応する箇所を軽く解説していこうと思います。
初心者だから憶測なのは許して…….
はい、番号ごとに分けてみました。これをコードファイルの各行に当てはめると…..。
このようになります。⑤は先ほど言ったようにWordPress側の出力なので書いてありません。
構造としては、コメント欄を構成する要素を配列arrayでリストデータ的な感じにしているやつですね。ちなみに改造前はいろんなところに挟んであった[$aria_req]は、その情報を必須入力にするかどうかの関数みたいな感じらしいです。
配列途中にある[url=> ～]の一文ですが、もともとのWordPressでのデフォルトのコメント欄の必須情報は[名前]と[email]と[URL]の三つのところを、URLパラメータに何も入力せず[返す(return)]ことによって無効化している….らしいです。
ん？そうなると俺もemailパラメータには空白を入力して返してやることが正解だったのだろうか……。まあいいか。
email入力を不要にする
このサイトの場合はemail入力は不要にしました。
手法として、配列の中にemailパラメータを含めないのに加えて少しやることがあったので追記します。
やることとは、ずばりWordPressの設定です！
なんだよWordPress内の設定で出来ちゃうのかよ…..って思った半日だった。
赤下線の文のチェックボックスを外せばOKです。
まとめ
以上、簡素ではありますが我がブログに念願のコメ欄を設置することに成功しました…….！やったー！（スパムは来るなよ……）
意外とデフォルトでもそれなりの形を成してくれるので、ぜひ皆さんもやってみてください！
それでは！
