MENU

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

マンニメバナー画像

趣味の1つ漫画アニメについて書いています。
鬼滅のレビューはコメント600件以上きました。

カゲオ
サイト管理人
当ブログはWordPressが今より楽しく、便利になるをテーマに分かりやすい解説記事を心がけています。
サブブログ|デスク環境構築サイト運営中⇒見てみる

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

当ページのリンクには広告が含まれています。
WordPressコメント欄カスタマイズ

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

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

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

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

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

デフォルトデザイン

WordPressデフォルトコメント欄

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

カスタマイズ後

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

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

目次

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

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

WordPressコメント欄の基本設定

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

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

WordPressコメント欄名前とメールアドレス入力必須マーク

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

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

ディスカッション

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

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

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

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

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

WordPressディスカッション設定コメント投稿者が Cookie を保存できるようにする、Cookie オプトイン用チェックボックスを表示します

ディスカッション

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

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

functions.php編集

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

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

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

WordPressコメント欄メールアドレスが公開されることはありません。
//コメント欄メールアドレスが公開〜テキスト削除
add_filter('comment_form_defaults', 'commentform_toptext_delete');
 function commentform_toptext_delete( $form_text ){
   $form_text['comment_notes_before'] = '';
    return $form_text;
}

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

WordPressコメント欄タイトルと送信ボタン
//コメント欄タイトルと送信ボタンの文言変更
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ソフトを使い、親テーマのcomments.phpファイルをダウンロードします。
FTPソフトの使い方は以下で解説しています。

FTPソフトcomments.phpファイルアップロード

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

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行目:送信ボタン内の文言

SWELLコメントフォームのテキスト編集

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPressコメント欄複数フォーム削除

複数のフォームを消す場合は、以下のようにまとめてしまっても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行目ですべてのフォームを削除しています。
必要な項目のコードを消してください

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

WordPressコメントフォームの位置変更
// コメント入力欄を一番下へ 
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のデフォルトコメントフォームは、なぜか一番上にあります。
ただ見なれたフォームの並び順は、名前→メールアドレス→内容ですよね。
順序にに違和感のある方は変更しましょう。

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

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ディスカッション設定コメントの投稿者の名前とメールアドレスの入力を必須にする

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;
}
WordPressコメント欄名前だけフォーム

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

エラーの挙動

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

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

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

WordPressコメント欄デフォルト表記

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

WordPressコメント欄カスタム表記
/* 項目すべてに必須を指定 */
#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;
}

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

WordPressコメント欄返信ボタンデフォルトデザイン

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

WordPressコメント欄返信ボタンカスタマイズ
/* 返信ボタン */
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のコメント返信は相手に通知がいかないため、このようにしています。

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

WordPressコメント欄デフォルト送信ボタン

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

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

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

入力欄をカスタマイズ

SWELLデフォルトコメント欄

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

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

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

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

WordPressコメントエリアのカラー変更
/* コメントエリアSANGO用 */
div#comments {
   background: #000;
   color: #fff;
}

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

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

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;
}
SWELLコメントエリアサブタイトル変更

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

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

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

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

WordPressコメントフォームの全部ありデザイン

コメント欄を一番下に表示、各文言を指定、名前のみ必須、あとは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; 
}

をお使いの方は、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;
}

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

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

WordPressコメントフォームサイト欄を削除したデザイン

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

コードをみる
//コメント欄の上部テキスト削除・タイトルと送信ボタンの文言変更
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;
}

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

WordPressコメントフォーム名前とコメント欄だけのデザイン

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

コードをみる
//コメント欄の上部テキスト削除・タイトルと送信ボタンの文言変更
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;
}

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

WordPressコメントフォームだけのデザイン

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

コードをみる
//コメント欄の上部テキスト削除・タイトルと送信ボタンの文言変更
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コメント欄カスタマイズ

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

シェアしていただけると励みになります
  • URLをコピーしました!

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

この記事へのコメント数 (1件)

コメントフォーム

※日本語が含まれない内容は投稿できません。

目次