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

2024年9月16日

当ページのリンクには広告が含まれています。

当記事では、WordPressのコメント欄カスタマイズ方法を解説しました。

コメント欄もコンテンツの評価対象になるため、質の高いものはSEOに効果的です。
例えば私が管理している漫画サイトのこちらの記事では、600件以上のコメントが届きました。

コメント欄が盛り上がると、自分の知見とは違う考察や意見、盲点だった質問などが来ます。
そうなると記事の質は自然と上がりますし、リライトのヒントをもらえたりするんですよね。

ただWordPressのデフォルトコメント欄は少し味気ないし、入力のハードルが高いです。
そこでもう少し書き込みしやすいように工夫してみました。

おそらくコメント欄でやりたいカスタマイズは、網羅していると思いますので、目次から気になる部分をつまんでください。

参考サイト

comment_form() – Function | Developer.WordPress.org

デフォルトデザイン

こちらは以前使っていたテーマSANGOのコメント欄です。

カスタマイズ後

見た目はこのようなイメージになります。
文言やカラーは自由に変更可能。
そのほか、用途に応じてフォームの削除、名前だけ必須にする方法も解説しています。

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

サイトをみてみる

WordPressコメント欄の基本設定

基本設定とは、WordPressの管理画面から選択する項目です。
カスタマイズをする前に押さえておきましょう。

名前とメールアドレスの入力を任意にする

デフォルトでは、名前とメールアドレスの入力は必須項目となっています。
任意入力にしたい場合は、ディスカッション設定から行いましょう。

WordPressディスカッション設定コメントの投稿者の名前とメールアドレスの入力を必須にする

①ディスカッション
↓
他のコメント設定の一番上
②「コメントの投稿者の名前とメールアドレスの入力を必須にする」
のチェックを外してください。

例えば、必須の状態（チェックをした）で、このあと解説するメールアドレス入力欄を削除したりすると、エラーとなり、コメントが送信できなくなります。
ご希望のフォームに合わせて、選択してください。

次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。を非表示にする

WordPressコメント欄次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する

この表示が不要な方は、以下のチェックを外してください。

①ディスカッション
↓
他のコメント設定の上から4番目
②「コメント投稿者が Cookie を保存できるようにする、Cookie オプトイン用チェックボックスを表示します」のチェックを外しましょう。

その他のコメント設定はこちらで解説

WordPressディスカッション設定のおすすめ｜コメントの詳細

コメント欄のfunctions.phpカスタマイズ

外観→テーマファイルエディタ→functions.phpの一番上に必要なコードをコピペしましょう。
文言を変更する際、functions.phpの中でやるとエラーが出ることがありますので、一旦メモ帳などに貼り付けて、そこで直したものを使ってください。

現在はコードにエラーがあると、保存できなくなっていますので、以前のように必要以上にバグの心配をする必要はありません。
エラーが出たら、シングルクォーテーション(”)カンマ(,)カッコ()セミコロン(;)などが抜けていないか確認してください。

メールアドレスが公開されることはありません。を削除したい

//コメント欄メールアドレスが公開〜テキスト削除
add_filter('comment_form_defaults', 'commentform_toptext_delete');
 function commentform_toptext_delete( $form_text ){
   $form_text['comment_notes_before'] = '';
    return $form_text;
}

タイトル・送信ボタンの文言を変更する

//コメント欄タイトルと送信ボタンの文言変更
add_filter('comment_form_defaults', 'commentform_title_btn_rewrite');
 function commentform_title_btn_rewrite( $form_change ){
   $form_change['title_reply'] = 'コメントお待ちしています';
   $form_change['label_submit'] = '送信する';
	 return $form_change;
}

4〜5行目の文言はお好きなものに変更してください。

上記3つは同じフックを使っていますので、まとめて記述するなら以下のようになります。

//コメント欄の上部テキスト削除・タイトルと送信ボタンの文言変更
add_filter('comment_form_defaults', 'commentform_toptext_title_btn_change');
 function commentform_toptext_title_btn_change( $form_change ){
   $form_change['comment_notes_before'] = '';
   $form_change['title_reply'] = 'コメントお待ちしています';
   $form_change['label_submit'] = '送信する';
	 return $form_change;
}

SWELLの場合は「タイトル」と「送信ボタン」は別の方法で変更する必要あり

当サイトテーマSWELLでは、上記カスタムだと上手くいきません。
それぞれの変更方法を解説します。

タイトルの文言変更

タイトルは、テーマのカスタマイザーから行いましょう。
カスタマイザー→投稿・固定ページ→記事下エリア→コメントエリアの設定
コメントエリアのタイトルをお好きな文言に変更してください。

送信ボタン（サブタイトル・コメント件数含む）の文言変更

こちらは上級者向けの設定です。
よくわからなければやめておきましょう。

FTPソフトを使い、親テーマのcomments.phpファイルをダウンロードします。
FTPソフトの使い方は以下で解説しています。

あわせて読みたい

Cyberduckの使い方｜WordPressの子テーマを分かりやすく解説

ダウンロードしたcomments.phpファイルを子テーマへアップロードします。

WordPressの管理画面からテーマファイルエディターをクリック。
comments.phpを開く。
デフォルトのコードをすべて削除し、以下のコードをコピペします。

<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<section id="comments" class="l-articleBottom__section -comment">
<h2 class="l-articleBottom__title c-secTitle"><?=esc_html( \SWELL_FUNC::get_setting( 'comments_title' ) )?></h2>
 <div class="p-commentArea">
 <?php if ( have_comments() ) : ?>
  <h3 class="p-commentArea__title -for-list">
  <i class="icon-bubbles"></i> この記事へのコメント数
  <span>（<?php comments_number( '0', '1', '%' ); ?>件）</span>
  </h3>
   <ul class="c-commentList">
   <?php wp_list_comments('avatar_size=48'); ?>
   </ul>
<?php endif; ?>
   <?php if ( get_comment_pages_count() > 1 ) : ?>
   <div class="c-pagination p-commentArea__pager">
   <?php paginate_comments_links( [
    'prev_text' => '‹',
    'next_text' => '›',
    'mid_size'  => 0,
]); ?>
</div>
<?php endif; ?>
<?php
//コメントフォーム呼び出し
comment_form( [
	'title_reply' => 'コメントフォーム',
	'label_submit' => '上記の内容で送信する',
	'comment_notes_before' => '',
	'comment_notes_after'  => '',
	'title_reply_before' => '<h3 class="p-commentArea__title -for-write"><i class="icon-pen"></i> ', 
	'title_reply_after' => '</h3>', 
			] );
		?>
	</div>
</section>

7行目：コメント件数（コメントがない場合は非表示）
26行目：コメント欄のサブタイトル（CSSを使った変更方法も後述しています）
27行目：送信ボタン内の文言

→詳細はこちら

名前フォームだけ削除したい

//コメント欄の名前フォームを削除
add_filter( 'comment_form_default_fields', 'commentform_author_delete' );
 function commentform_author_delete($form_delete) { 
   unset($form_delete['author']); 
    return $form_delete; 
}

名前だけを削除したい場合はあまりなさそうですが、一応非表示にできます。

メールフォームだけ削除したい

//コメント欄のメールフォームを削除
add_filter( 'comment_form_default_fields', 'commentform_email_delete' );
 function commentform_email_delete($form_delete) { 
   unset($form_delete['email']); 
    return $form_delete; 
}

コメントだけを効率的に集めるなら、メールフォームは削除しましょう。
ユーザーがコメントをする際、最大の障壁になるのはメールアドレスの入力です。
次のサイトフォームと合わせて削除すると良いでしょう。

サイトフォームだけを削除したい

//コメント欄のサイトフォームを削除
add_filter( 'comment_form_default_fields', 'commentform_url_delete' );
 function commentform_url_delete($form_delete) { 
   unset($form_delete['url']); 
    return $form_delete; 
}

当サイトのようにWebノウハウ系だと、サイトを見てほしいと希望されることもあるため、あったほうが良い場合もあります。
通常のブログであれば、不要だと思いますので消しておきましょう。

コメントフォームだけを削除したい

//コメント欄のコメントフォームを削除
add_filter( 'comment_form_fields', 'commentform_commentfield_delete' );
 function commentform_commentfield_delete($form_delete) { 
   unset($form_delete['comment']); 
    return $form_delete; 
}

本末転倒ですが、一応コメントフォームも消せます。

入力欄をまとめて消したい

複数のフォームを消す場合は、以下のようにまとめてしまってもOKです。

//コメント欄の複数フォームを削除
add_filter( 'comment_form_fields', 'comment_form_delete' );
 function comment_form_delete($delete_form) {
  unset($delete_form['author']);//名前のフォーム削除
  unset($delete_form['email']);//メールのフォーム削除
  unset($delete_form['url']);//サイトのフォーム削除
  unset($delete_form['comment']);//コメントのフォーム削除
    return $delete_form;
}

4〜7行目ですべてのフォームを削除しています。
必要な項目のコードを消してください。

コメントフォームを一番下にしたい

// コメント入力欄を一番下へ 
add_filter( 'comment_form_fields', 'commentform_bottom' );
 function commentform_bottom( $form_position ) { 
  $comment = $form_position['comment']; 
  unset( $form_position['comment'] );
  $form_position['comment'] = $comment;
   return $form_position; 
}

WordPressのデフォルトコメントフォームは、なぜか一番上にあります。
ただ見なれたフォームの並び順は、名前→メールアドレス→内容ですよね。
順序にに違和感のある方は変更しましょう。

名前・メール・サイト・コメントの文言を変更する

//名前、メール、サイト、コメントの文言を変更する
add_filter('comment_form_fields', 'comment_form_rewrite');
 function comment_form_rewrite( $form_change) {
  $default = array('名前','メール','サイト','コメント',);
  $overwrite = array('お名前（ニックネーム可）','メールアドレス','サイトURL','コメント入力欄');
  $form_change = str_ireplace( $default, $overwrite, $form_change );
    return $form_change;
}

デフォルトの文言は一言一句、正確に入力してください。
5行目でそれぞれお好きな文言に変更できます。
例えば、サイトフォームを削除した場合でもエラーになるわけではないため、サイトに対する記述はこのままで問題ありません。

名前の入力のみ必須にする

WordPressのデフォルト仕様では、名前とメールアドレスの両方を必須にすることしかできません。
上記のチェックを外したうえで、以下を追記すると名前のみ必須にできます。
文言はご自由に設定してください。

// コメント入力欄の名前入力のみ必須にする
add_filter( 'preprocess_comment', 'comment_name_error', 1);
 function comment_name_error( $comment_name )  {
  if (""==trim( $comment_name['comment_author'] ) )
   wp_die('名前は必須項目です');
    return $comment_name;
}

こうすることで、名前とコメントフォームだけにしても、名前に入力がないとエラーが出ます。

エラーの挙動

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

それでは、ここからはデザインを整えていきます。
すべてコピペで使えます。

任意と必須をラベルっぽくする

デフォルトは、必須に※マーク、任意はなにも表示がないため、少しわかりにくいですよね。
ラベルっぽくすると以下のようになります。

/* 項目すべてに必須を指定 */
#commentform label::before {
  position: relative;
  content: "必須";
  font-size: 13px;
  background: #f62d2d;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  bottom: 2px;
  margin-right: 5px;
  font-weight:bold;
}

/* サイトだけ任意に変更 */
#commentform .comment-form-url label::before {
  content: "任意";
  background: #3891f5;
}

/* デフォルトの※マークを非表示 */
.required{
  display:none;
}

サンプルでは、サイトフォームのみ任意にしています。
名前やメールアドレスも任意にする場合は.comment-form-urlを以下に変更しましょう。

/* 名前 */
.comment-form-author
/* メール */
.comment-form-email

/* メールとサイトを任意にするなら以下のように書きます */
#commentform .comment-form-email label::before,#commentform .comment-form-url label::before {
  content: "任意";
  background: #3891f5;
}

返信ボタンのカスタマイズ

テーマによりますが、SANGOやSWELLのデフォルトはこのようになっています。
ボタンのカラーや大きさ、文言を変更してみました。

/* 返信ボタン */
a.comment-reply-link {
  display: block;
  width: 100%;
  font-size: 0;
  background: #000;
  text-align: center;
  padding: 3px;
}

/* ボタン内テキスト */
a.comment-reply-link::before {
  content: "コメントフォームへ";
  font-size: 15px;
  vertical-align: middle;
}

WordPressのコメント返信は相手に通知がいかないため、このようにしています。

送信ボタンのカスタマイズ

送信ボタンもテーマにより、若干違いますね。
文言はこちらで変更できますので、ボタンのデザインだけ調整してみました。

コメント送信ボタンカスタム

/* コメント送信ボタン */
#comments .submit{
  background:#000!important;
  width: 100%;
  padding: 1em;
  font-weight:bold;
  margin-top:15px;
}
/* コメント送信ボタンマウスホバー時 */
#comments .submit:hover {
  opacity:.7;
}

横幅を広げて、マウスホバー時の挙動を指定しています。

入力欄をカスタマイズ

例えば、当サイトテーマSWELLのデフォルトはこんな感じです。
入力欄もテーマにより違いがあります。

/* コメント入力欄のカスタム */
#comments input,#comments textarea {
  background: #000 !important;
  color: #fff;
  border: 0;
  padding: 10px;
}

背景色・文字色・枠線・内側余白あたりを調整できれば、希望のフォームになるかと思います。

コメントエリアのカラー変更

/* コメントエリアSANGO用 */
div#comments {
   background: #000;
   color: #fff;
}

/* コメントエリアSWELL用 */
.p-commentArea {
   background: #000;
   color: #fff;
}

ここはテーマによりclass名が異なりますので、SANGOとSWELL以外の方は、ご自身でお調べください。
変更する場合は、送信ボタンカラーとバランスを取りましょう。

SWELL独自コメントサブタイトルの変更方法

当サイトテーマSWELLには、コメントタイトルのすぐ下にサブタイトルが設定されています。
消しちゃっても良いですし、文言を変更したければ以下のコードで可能です。
記事前半で解説したcomments.phpファイルを使った方法が難しければ、こちらを参考にしてください。

/* コメント欄のサブタイトルを削除 */
h3.p-commentArea__title {
   display: none;
}


/* コメント欄のサブタイトルを変更 */
h3.p-commentArea__title {
   font-size: 0;
   margin-bottom: 20px;
}
h3.p-commentArea__title::before {
    font-family: 'FontAwesome';
    content: "\f044";
    position: relative;
    bottom: 10px;
}
h3.p-commentArea__title::after {
   font-size: 16px;
   content: "コメントお待ちしています";
   position: relative;
   bottom: 10px;
   right:5px;
}

コメント欄のおすすめテンプレート4選

ここでは、4つのテンプレートを作成しました。
functions.phpとstyle.cssにそれぞれコードをコピペすれば、画像と同じコメント欄が完成します。

各カラーはサイトに合わせて調整してください。

すべての入力欄を残したフォーム

コメント欄を一番下に表示、各文言を指定、名前のみ必須、あとはCSSでデザインを整えただけのフォームです。
デフォルトのままカスタマイズしたい方におすすめです。

コードをみる

//コメント欄の上部テキスト削除・タイトルと送信ボタンの文言変更
add_filter('comment_form_defaults', 'commentform_toptext_title_btn_change');
 function commentform_toptext_title_btn_change( $form_change ){
   $form_change['comment_notes_before'] = '';
   $form_change['title_reply'] = '記事への質問はこちらからお願いします';
   $form_change['label_submit'] = '上記の内容で送信する';
	 return $form_change;
}

//名前、メール、サイト、コメントの文言を変更する
add_filter('comment_form_fields', 'comment_form_rewrite');
 function comment_form_rewrite( $form_change) {
  $default = array('名前','メール','サイト','コメント',);
  $overwrite = array('お名前（ニックネーム可）','メールアドレス','サイトURL','コメント入力欄');
  $form_change = str_ireplace( $default, $overwrite, $form_change );
    return $form_change;
}

// コメント入力欄の名前入力のみ必須にする
add_filter( 'preprocess_comment', 'comment_name_error', 1);
 function comment_name_error( $comment_name )  {
  if (""===trim( $comment_name['comment_author'] ) )
   wp_die('名前は必須項目です');
    return $comment_name;
}

// コメント入力欄を一番下へ 
add_filter( 'comment_form_fields', 'commentform_bottom' );
 function commentform_bottom( $form_position ) { 
  $comment = $form_position['comment']; 
  unset( $form_position['comment'] );
  $form_position['comment'] = $comment;
   return $form_position; 
}

SWELLをお使いの方は、5行目のコードでコメントタイトルを変更できません。
→SWELLのコメントタイトル変更方法から行ってください。

/* 項目すべてに必須を指定 */
#commentform label::before {
  position: relative;
  content: "必須";
  font-size: 13px;
  background: #f62d2d;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  bottom: 2px;
  margin-right: 5px;
  font-weight:bold;
}

/* メールアドレスとサイトを任意に変更 */
#commentform .comment-form-email label::before,#commentform .comment-form-url label::before {
  content: "任意";
  background: #3891f5;
}

/* デフォルトの※マークを非表示 */
.required{
  display:none;
}

/* 返信ボタン */
a.comment-reply-link {
  display: block;
  width: 100%;
  font-size: 0;
  background: #000;
  text-align: center;
  padding: 3px;
}

/* 返信ボタン内テキスト */
a.comment-reply-link::before {
  content: "コメントフォームへ";
  font-size: 15px;
  vertical-align: middle;
}

/* コメント送信ボタン */
#comments .submit{
  background:#000!important;
  width: 100%;
  padding: 1em;
  font-weight:bold;
  margin-top:15px;
}
/* コメント送信ボタンマウスホバー時 */
#comments .submit:hover {
  opacity:.7;
}

/* コメント入力欄のカスタム */
#comments input,#comments textarea {
  background: #dadada!important;
  border:0;
  padding: 10px;
}

/* コメント */を参考に各自調整してください。

サイトの入力欄だけ削除したフォーム

ユーザーと連絡を取るつもりなら、メールフォームはあっても良いですね。
また、あえてメールフォームを必須にすることで、気軽にコメントできないようスクリーニングの役割も担います。
特に理由がなければ、このパターンがおすすめです。

コードをみる

//コメント欄の上部テキスト削除・タイトルと送信ボタンの文言変更
add_filter('comment_form_defaults', 'commentform_toptext_title_btn_change');
 function commentform_toptext_title_btn_change( $form_change ){
   $form_change['comment_notes_before'] = '';
   $form_change['title_reply'] = '記事への質問はこちらからお願いします';
   $form_change['label_submit'] = '上記の内容で送信する';
	 return $form_change;
}

//名前、メール、コメントの文言を変更する
add_filter('comment_form_fields', 'comment_form_rewrite');
 function comment_form_rewrite( $form_change) {
  $default = array('名前','メール','コメント',);
  $overwrite = array('お名前（ニックネーム可）','メールアドレス','コメント入力欄');
  $form_change = str_ireplace( $default, $overwrite, $form_change );
    return $form_change;
}

//コメント欄のサイトフォームを削除
add_filter( 'comment_form_default_fields', 'commentform_url_delete' );
 function commentform_url_delete($form_delete) { 
   unset($form_delete['url']); 
    return $form_delete; 
}

// コメント入力欄の名前入力のみ必須にする
add_filter( 'preprocess_comment', 'comment_name_error', 1);
 function comment_name_error( $comment_name )  {
  if (""===trim( $comment_name['comment_author'] ) )
   wp_die('名前は必須項目です');
    return $comment_name;
}

// コメント入力欄を一番下へ 
add_filter( 'comment_form_fields', 'commentform_bottom' );
 function commentform_bottom( $form_position ) { 
  $comment = $form_position['comment']; 
  unset( $form_position['comment'] );
  $form_position['comment'] = $comment;
   return $form_position; 
}

/* 項目すべてに必須を指定 */
#commentform label::before {
  position: relative;
  content: "必須";
  font-size: 13px;
  background: #f62d2d;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  bottom: 2px;
  margin-right: 5px;
  font-weight:bold;
}

/* メールアドレスだけ任意に変更 */
#commentform .comment-form-email label::before {
  content: "任意";
  background: #3891f5;
}

/* デフォルトの※マークを非表示 */
.required{
  display:none;
}

/* 返信ボタン */
a.comment-reply-link {
  display: block;
  width: 100%;
  font-size: 0;
  background: #000;
  text-align: center;
  padding: 3px;
}

/* ボタン内テキスト */
a.comment-reply-link::before {
  content: "コメントフォームへ";
  font-size: 15px;
  vertical-align: middle;
}

/* コメント送信ボタン */
#comments .submit{
  background:#000!important;
  width: 100%;
  padding: 1em;
  font-weight:bold;
  margin-top:15px;
}
/* コメント送信ボタンマウスホバー時 */
#comments .submit:hover {
  opacity:.7;
}

/* コメント入力欄のカスタム */
#comments input,#comments textarea {
  background: #dadada!important;
  border:0;
  padding: 10px;
}

名前とコメント欄だけのフォーム

例えば、エンタメ系サイトなど、とにかくユーザーの意見を書き込んでほしい場合はこちらがおすすめです。
その際は、名前ではなく「ニックネームやハンドルネーム」等に文言を変更しておけば、コメントに対する心理的ハードルが下がるでしょう。

コードをみる

//コメント欄の上部テキスト削除・タイトルと送信ボタンの文言変更
add_filter('comment_form_defaults', 'commentform_toptext_title_btn_change');
 function commentform_toptext_title_btn_change( $form_change ){
   $form_change['comment_notes_before'] = '';
   $form_change['title_reply'] = '記事への質問はこちらからお願いします';
   $form_change['label_submit'] = '上記の内容で送信する';
	 return $form_change;
}

//名前、コメントの文言を変更する
add_filter('comment_form_fields', 'comment_form_rewrite');
 function comment_form_rewrite( $form_change ) {
  $default = array('名前','コメント',);
  $overwrite = array('お名前（ニックネーム可）','コメント入力欄');
  $form_change = str_ireplace( $default, $overwrite, $form_change );
    return $form_change;
}

//コメント欄の複数フォームを削除
add_filter( 'comment_form_fields', 'comment_form_delete' );
 function comment_form_delete($delete_form) {
  unset($delete_form['email']);//メールのフォーム削除
  unset($delete_form['url']);//サイトのフォーム削除
    return $delete_form;
}

// コメント入力欄の名前入力のみ必須にする
add_filter( 'preprocess_comment', 'comment_name_error', 1);
 function comment_name_error( $comment_name )  {
  if (""===trim( $comment_name['comment_author'] ) )
   wp_die('名前は必須項目です');
    return $comment_name;
}

// コメント入力欄を一番下へ 
add_filter( 'comment_form_fields', 'commentform_bottom' );
 function commentform_bottom( $form_position ) { 
  $comment = $form_position['comment']; 
  unset( $form_position['comment'] );
  $form_position['comment'] = $comment;
   return $form_position; 
}

/* 項目すべてに必須を指定 */
#commentform label::before {
  position: relative;
  content: "必須";
  font-size: 13px;
  background: #f62d2d;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  bottom: 2px;
  margin-right: 5px;
  font-weight:bold;
}

/* デフォルトの※マークを非表示 */
.required{
  display:none;
}

/* 返信ボタン */
a.comment-reply-link {
  display: block;
  width: 100%;
  font-size: 0;
  background: #000;
  text-align: center;
  padding: 3px;
}

/* ボタン内テキスト */
a.comment-reply-link::before {
  content: "コメントフォームへ";
  font-size: 15px;
  vertical-align: middle;
}

/* コメント送信ボタン */
#comments .submit{
  background:#000!important;
  width: 100%;
  padding: 1em;
  font-weight:bold;
  margin-top:15px;
}
/* コメント送信ボタンマウスホバー時 */
#comments .submit:hover {
  opacity:.7;
}

/* コメント入力欄のカスタム */
#comments input,#comments textarea {
  background: #dadada!important;
  border:0;
  padding: 10px;
}

コメント欄だけのフォーム

ニュースサイトや掲示板など、ユーザーのコメントを主体にコンテンツを作り上げるなら、コメントだけ書き込めるようにするのもありですね。
ただし、コメントの質が悪くなることはある程度覚悟しましょう。

コードをみる

//コメント欄の上部テキスト削除・タイトルと送信ボタンの文言変更
add_filter('comment_form_defaults', 'commentform_toptext_title_btn_change');
 function commentform_toptext_title_btn_change( $form_change ){
   $form_change['comment_notes_before'] = '';
   $form_change['title_reply'] = '記事への質問はこちらからお願いします';
   $form_change['label_submit'] = '上記の内容で送信する';
	 return $form_change;
}

///コメントの文言を変更する
add_filter('comment_form_fields', 'comment_form_rewrite');
 function comment_form_rewrite( $form_change ) {
  $form_change = str_ireplace( 'コメント', 'コメント入力欄', $form_change);
    return $form_change ;
}

//コメント欄の複数フォームを削除
add_filter( 'comment_form_fields', 'comment_form_delete' );
 function comment_form_delete($delete_form) {
  unset($delete_form['author']);//名前のフォーム削除
  unset($delete_form['email']);//メールのフォーム削除
  unset($delete_form['url']);//サイトのフォーム削除
    return $delete_form;
}

/* コメント欄に必須を指定 */
#commentform label::before {
  position: relative;
  content: "必須";
  font-size: 13px;
  background: #f62d2d;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  bottom: 2px;
  margin-right: 5px;
  font-weight:bold;
}

/* デフォルトの※マークを非表示 */
.required{
  display:none;
}

/* 返信ボタン */
a.comment-reply-link {
  display: block;
  width: 100%;
  font-size: 0;
  background: #000;
  text-align: center;
  padding: 3px;
}

/* ボタン内テキスト */
a.comment-reply-link::before {
  content: "コメントフォームへ";
  font-size: 15px;
  vertical-align: middle;
}

/* コメント送信ボタン */
#comments .submit{
  background:#000!important;
  width: 100%;
  padding: 1em;
  font-weight:bold;
  margin-top:15px;
}
/* コメント送信ボタンマウスホバー時 */
#comments .submit:hover {
  opacity:.7;
}

/* コメント入力欄のカスタム */
#comments input,#comments textarea {
  background: #dadada!important;
  border:0;
  padding: 10px;
}

WordPressのコメント条件設定

WordPress初期設定の1つ、ディスカッションは、コメントに関する設定を細かく指定できます。

以下で詳しく解説しているので、よかったら参考にしてください。

あわせて読みたい

WordPressディスカッション設定のおすすめ｜コメントの詳細

コメント欄を拡張できるおすすめプラグイン

コメント返信をメールで通知

コメントを返信しても、デフォルトだと通知されません。
以下のプラグインを導入すると、入力されたメールアドレス宛てに通知できるようになります。

あわせて読みたい

WordPressのコメント返信を通知できる｜Comment Reply Emailの使い方デフォルトのWordPressは、コメントを返信しても相手に通知されません。しかしプラグインを使うことで、メールで通知できるようになります。ただし、コメント欄にメー…

スパム対策

スパムコメント対策も自分でする必要があります。
以下のプラグインは日本企業が開発したもので、設定もわかりやすく、おすすめです。

あわせて読みたい

Throws SPAM Awayの設定と使い方｜スパムコメント対策 WordPressの標準機能にコメントのスパム対策はありません。コメント欄を解放している場合、アクセスが増えてくると海外のスパムコメントが頻繁に届きます。そこでおす…

結論：WordPressのコメント欄はカスタマイズした方が良い

以上、WordPressのコメント欄カスタマイズ方法を解説しました。

コメント欄はサイトのターゲットによって、使い分ければ良いかと思います。

ぜひ、自分だけのコメント欄にカスタムしてみてください。

この記事が気に入ったら
フォローしてね！

Follow @kagenodesk

シェアしていただけると励みになります

URLをコピーしました！

記事への質問等はこちらからどうぞ

この記事へのコメント数（1件）

わいより:

2024年2月3日 00:12

助かります

返信

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

WordPressコメント欄の基本設定

名前とメールアドレスの入力を任意にする

次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。を非表示にする

コメント欄のfunctions.phpカスタマイズ

メールアドレスが公開されることはありません。を削除したい

タイトル・送信ボタンの文言を変更する

SWELLの場合は「タイトル」と「送信ボタン」は別の方法で変更する必要あり

タイトルの文言変更

送信ボタン（サブタイトル・コメント件数含む）の文言変更

名前フォームだけ削除したい

メールフォームだけ削除したい

サイトフォームだけを削除したい

コメントフォームだけを削除したい

入力欄をまとめて消したい

コメントフォームを一番下にしたい

名前・メール・サイト・コメントの文言を変更する

名前の入力のみ必須にする

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

任意と必須をラベルっぽくする

返信ボタンのカスタマイズ

送信ボタンのカスタマイズ

入力欄をカスタマイズ

コメントエリアのカラー変更

SWELL独自コメントサブタイトルの変更方法

コメント欄のおすすめテンプレート4選

すべての入力欄を残したフォーム

サイトの入力欄だけ削除したフォーム

名前とコメント欄だけのフォーム

コメント欄だけのフォーム

WordPressのコメント条件設定

コメント欄を拡張できるおすすめプラグイン

コメント返信をメールで通知

スパム対策

結論：WordPressのコメント欄はカスタマイズした方が良い

記事への質問等はこちらからどうぞ

この記事へのコメント数 （1件）

コメントフォーム コメントをキャンセル

この記事へのコメント数（1件）

コメントフォームコメントをキャンセル