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

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

コメント欄-1

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

スポンサーリンク

必要な項目を考えておく

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

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

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

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

コメント欄-2

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

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

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

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

  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行の記述がコメント欄を表示させるコードです。この部分を「削除」して同じ場所に次のコードを入れます(この部分を削除しておかないとコメント欄が2つ表示されます)。

<?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タグと属性が使えます」という部分もテキストに変更してみました。ログアウトして表示を確かめてみます。

コメント欄-3

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

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

<?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タグと属性が使えます」という部分も別のテキストにしてみました。

コメント欄-4

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

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

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

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

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

WordPressコメント欄のカスタマイズ”に75件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. kita

    >しげぞう様

    ご返答ありがとうございます。こちらも無事解決致しました。
    いろいろとありがとうございます。

  2. しげぞう 投稿作成者

    kita様

    返信ありがとうございます。各コメントの下の「返信」のボタンですが、スタイルシートの次の記述を入れて非表示にすればOKと思います。

    .reply {
        display: none;
    }

    これで一度試して貰えますか?

  3. kita

    >しげぞう様

    ご回答ありがとうございます。ご教授してくださったコードを変更・追加したところ無事反映されました。助かりました。

    ここで、また質問があります。すいません。
    各コメントの下に「返信 ↓」というボタンがありますが、これを削除したいと思っています。調べても有力な情報が見当たらなかったので、またご教授頂ければと思います。よろしくお願い致します。

  4. しげぞう 投稿作成者

    kita様

    コメントありがとうございます。まず、コメント欄の上部の部分はコメントタイトルという事になってますので、スタイルシートで調整が可能です。

    .comments-title {
        font-size: 14px;
    }

    文字の大きさはお好みで調整して下さい。

    それから「「○○○○○○」への13件のフィードバック」という文言を変更する場合には子テーマのcomments.phpを編集します。comments.phpの次の部分を探して下さい。

    <h2 class="comments-title">
    			<?php
    				printf( _n( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'twentytwelve' ),
    					number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
    			?>
    		</h2>

    この部分を削除して次のように書き換えます。

    <h2 class="comments-title">
    			<?php
    				printf( _n( '“%2$s”に1件のコメントがあります。', '“%2$s”に%1$s件のコメントがあります。', get_comments_number(), 'twentytwelve' ),
    					number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
    			?>
    		</h2>

    張替えたら保存でOKです。これ翻訳する関数が入っていて本当は翻訳の関数の部分は外しても良いと思うのですが、あまり詳しくないので、必要な部分だけ書き換えてます。表示には問題はありません。

  5. kita

    いつも参考にさせていただいております。
    1つ質問があるんですが、まず、コメント欄の上部に「「○○○○○○」への13件のフィードバック」と表示されます。これが太文字でなんか見づらいです。細文字にするにはどうすればいいでしょうか?。しげぞう様のこちらのサイトは「“○○○○○”に68件のコメントがあります。」となっていますが、こちらの変更の仕方もご教授していただければと思います。よろしくお願い致します。

  6. りた

    しげぞう様

    りたと申します。しげぞう様のご教授により、無事修正することができました!いつも、ありがとうございます。

    余談ですが、最近はPV数だけでなく、グーグルアドセンス以外のアフィリエイトも軌道に乗り始めました。これまた、しげぞう様のお陰様です。本当にありがとうございます。m(_ _)m

    今後も拙い質問をするかと思いますが、ご容赦下さい。今後共、宜しくお願い致します。

  7. しげぞう 投稿作成者

    りた様

    コメントありがとうございます。コメント欄ですが、これはWordPressの設定⇒「ディスカッション」設定で、「1ページあたり●●件のコメントを含む~」という項目があります。この項目の最後の部分を「【新しい】コメントを各ページのトップに表示する」に変更すればOKかと思います。

    一度設定を変更して確認してみてください。もしそれでも反映されない場合には再度コメント頂けると助かります。

  8. りた

    しげぞう様

    ご無沙汰しております。りたと申します。

    本日はコメント欄に関するカスタマイズについて、ご質問したく、ご連絡差し上げました。現在、コメントが過去から新しいものに向けて、上から順に並んでいる状況です。この状況を逆【古い方を下に、新しいコメントを上】にしたいのですが、どのようにプログラムを変更したら、良いのでしょうか?

    ご教授して頂けたら幸いです。何卒、宜しくお願い致します。

  9. りた

    しげぞう様
    りたと申します。

    お忙しい中、アドバイス誠にありがとうございます。無事、解決することができました!

    原因は2つありました。1つは、前回コメント一覧の位置調整を質問した際、コードの切り取り場所が誤っていたことです。また、固定ページで「コメントを許可する」にチェックをしていませんでした。

    バグを見つける際、親テーマに戻ることの大切さに気づきました。(研究では実践しているのに、お恥ずかしい限りです)また、コードを書き換えるときは、バックアップをとります。

    いつも、本当にありがとうございます。今後共、宜しくお願い致しますm(_ _)m

  10. しげぞう 投稿作成者

    りた様

    コメントありがとうございます。コメント欄のカスタマイズに関してですが、パッと思いつく事が2つありますので、試して見てください。

    1.comments.phpの記述ミス

    一度子テーマの「comments.php」を全部コピーしてメモ帳などに貼り付けておきます。後で元に戻せるようにバックアップの意味です。

    それで、親テーマTwenty Twelveの「commnets.php」をそのままコピーして子テーマに張替えをします。つまり一度親テーマの「comments.php」に戻すという事です。これでコメント欄は初期化されるはずなので一度これで確認して下さい。それでも表示されれば原因は子テーマの「comments.php」にあるという事が分かります。

    また、それでも改善されない場合にはここが原因ではないという事になると思うので、最初にメモ帳に保存した「comments.php」の記述に戻してもOKです。

    2.「single.php」を確認

    1番目の方法で「commnets.php」に問題がない場合には「single.php」でコメント欄を呼び出していない可能性もあります。

    これも一度子テーマではなく、先に親テーマの「single.php」を確認してみると次のような記述があると思います。

    <?php comments_template( '', true ); ?>

    これが「comments.php」を呼び出す部分になると思いますので、この記述が子テーマの「single.php」にもあるか確認してみてください。

    また、コメントを呼び出す部分に余計な条件分岐などを追加していないかも確認してみてください。

  11. りた

    しげぞう様

    ご無沙汰しております。りたと申します。

    本日はコメント欄に関するカスタマイズについて、ご質問したく、ご連絡差し上げました。

    先々月辺りにコメントのカスタマイズをしたのですが、いざ見てみると、トップページのみコメント欄があり、他のページには一切コメント欄がない状況にあります。

    どのように修正すべきかわからず、しげぞう様のアドバイスをご教授したいです。

    お忙しい中大変申し訳ございませんが、何卒宜しくお願い致します。

  12. Kita

    >しげぞう様

    ありがとうございます。ご教授頂いた通りにコードを入れ替えたところ、うまく記入欄が上に来ました。これで、一応一安心です。(;^ω^)笑
     最後まで本当にありがとうございました。

  13. しげぞう 投稿作成者

    Kita様

    返信ありがとうございます。確認しましたが、???は解消されているようで良かったです。先にバックアップをとって失敗しても元に戻せるようにしておいて下さい。

    コメント記入欄の順番ですが、「comments.php」の次の部分を探します。

    <ol class="commentlist">

    この記述から下の部分がコメント表示の部分です。つまりこの記述よりも上に記入欄を持ってくれば良いという事になります。

    記入欄ですが、初期状態であれば次の部分があると思いますので、これを切り取って先ほどのコードの上に貼り付ければOKです。

    <?php
    		/* If there are no comments and comments are closed, let's leave a note.
    		 * But we only want the note on posts and pages that had comments in the first place.
    		 */
    		if ( ! comments_open() && get_comments_number() ) : ?>
    		<p class="nocomments"><?php _e( 'Comments are closed.' , 'twentytwelve' ); ?></p>
    		<?php endif; ?>
    
    	<?php endif; // have_comments() ?>
    
    	<?php comment_form(); ?>