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

今回はWordPressのコメント欄のカスタマイズをしてみようと思います。WordPressのコメント欄には「名前」「メールアドレス」「ウェブサイト」を記入する欄がありますよね、実際にはこんな表示になります。

これは好みによりますが、「ウェブサイト」の記入欄とかいらなくね？と思う人もいると思います。私の場合は「メールアドレス」「ウェブサイト」の記入欄を撤去して、「名前」と「コメント」だけでコメント投稿できるように設定しています。

もしもへ

Amazonや楽天のアフィリエイトの併用は「もしもアフィリエイト経由」がおすすめの理由

Amazonアソシエイトと楽天アフィリエイトを併用するなら「もしもアフィリエイト...

affiliate150.com

2022.06.12

必要な項目を考えておく

まずはコメント欄に必要な項目を考えてみましょう。私のように「名前」と「コメント」だけにしているとコメントされやすい環境になりますが、「スパムコメント」や「いたずらコメント」とか増えそうですよね。

コメントしてもらいやすい環境を優先するかどうかというのが意見の分かれ目になると思います。とりあえずコメント欄をカスタマイズする前にこの部分はよく考えておくべきと思います。

設定で必須項目を確認しておく

メールアドレスの入力を必須にするかどうかはWordPressの管理画面から設定できます。先にこれも確認しておきましょう。WordPressの管理画面から「設定」⇒「ディスカッション」と進んで下さい。

ここに「名前とメールアドレスの入力を必須にする」という項目がありますので、必須にする場合はここにチェックを入れます。また、後ほどメールアドレスの記入欄を撤去したいという方はこの項目にチェックを入れないようにしておきます。

一応基本的な設定に関しては別記事でも紹介していますので、参考に。
⇒WordPressのディスカッション設定を解説

コメント欄の項目をカスタマイズする方法

コメント欄の各項目を非表示もしくは削除する方法は２通りあります。

1. スタイルシート (style.css)で非表示にする。
2. 子テーマのcomments.phpを編集して削除する。

簡単なのは1番目のスタイルシートで非表示にする方法ですが、「見せたくない物を隠す」という感じがするので個人的には好きではありません。2番目のcomments.phpを編集する方法の場合はやや手間がかかりますが、細かいテキストの部分等の変更も自分でできるので私はこの方法をしています。

スタイルシートで各項目を非表示にする場合

さて、設定ができたらコメント欄をカスタマイズをしていきますが、今回は幾つかサンプルを紹介しますので、最後まで読んでからカスタマイズしてみて下さい。まずは先ほど紹介した1番目のスタイルシートでこの項目を隠す（非表示）にする方法です。これは子テーマのスタイルシートにこのように記述してください。

/* コメント欄の項目を非表示 */
.comment-form-email {display: none;}
.comment-form-url {display: none;}
.form-allowed-tags {display: none;}

• メールアドレス非表示。
• ウェブサイト非表示。
• コメント下のタグを非表示。

これで各項目を非表示にする事ができます。これがスタイルシートを使った場合です。

子テーマの「comments.php」を使って編集する場合

スタイルシートではなくファイルを書き換えてカスタマイズする場合は「comments.php」を使いますので、子テーマにこのファイルを追加しておいて下さいね。

追加できたら子テーマの「comments.php」を開いてみて下さい。一番下の方に次の記述があります。

<?php comment_form(); ?>

この1行の記述がコメント欄を表示させるコードです。この部分を「削除」して同じ場所に次のコードを入れます（この部分を削除しておかないとコメント欄が２つ表示されます）。

<?php
$comments_args = array(
    'fields' => array(
        'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
        'email'  => '',
        'url'    => '',
    ),
    'title_reply'          => 'コメントをどうぞ',
    'comment_notes_before' => '',
    'comment_notes_after'  => '<p class="form-allowed-tags">内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。</p>',
    'label_submit'         => 'コメントを送信する',
);
 
comment_form($comments_args);
?>

これでメールアドレスとウェブサイトの表示が消えます。途中の「コメントをどうぞ」等の表示もここで変更する事ができます。そしてコメント下の「次のHTMLタグと属性が使えます」という部分もテキストに変更してみました。ログアウトして表示を確かめてみます。

メールアドレス記入欄は残したい場合

メールアドレス入力欄は残したいという方は先ほどと同じ要領です。

<?php comment_form(); ?>

先ほど同様この記述を削除して同じ場所に次のコードを入れます。

<?php
$comments_args = array(
    'fields' => array(
        'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
        'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
        'url'    => '',
    ),
    'title_reply'          => 'コメントをどうぞ',
    'comment_notes_before' => '<p class="comment-notes">メールアドレスが公開されることはありません。 * が付いている欄は必須項目です</p>',
    'comment_notes_after'  => '<p class="form-allowed-tags">内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。</p>',
    'label_submit'         => 'コメントを送信する',
);
 
comment_form($comments_args);
?>

とこのように記述する事でウェブサイトの記入欄を消し、コメント下の「次のHTMLタグと属性が使えます」という部分も別のテキストにしてみました。

またコメント欄内の「コメントをどうぞ」や「メールアドレスが公開される事はありません」等の記述もここで変更してみてもいいと思います。以上がコメント欄のカスタマイズです。

参考にさせて頂いたサイト様

今回コメント欄のカスタマイズするに当たり「NxWorld」様のサイトの記事「コメントフォームをカスタマイズする方法」を参考にさせて頂きました。ありがとうございます。参考サイトの方がもっと細かく詳しく書かれてますのでそちらも参考にしてみて下さいね。

それでは次回はメタ情報のカスタマイズを紹介していきます。