WordPressのコメント欄を自在にカスタマイズ!各項目を非表示にしたり、コメント欄の文言を変更する方法のまとめ。

WordPressのコメント欄の各項目を非表示にしたり、コメント欄の文言をそれぞれ変更する方法をまとめました。

コメント時に入力してもらう項目ですが、メールアドレスやサイトの入力欄など入力項目が多いと閲覧者はコメントしづらくなります。

また「メールアドレスが公開されることはありません。」などの補足はコメントをする際に少し不安になります。

不要な入力項目や補足を削除し、文言も変更するとコメント率が上がります。

Wordpressコメント欄カスタマイズ_eyecatch

基本的にfunctions.phpで対応しました。一部CSSを使った方法もご紹介。

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

この記事では以下のカスタマイズ方法を記述しています。
デザインのカスタマイズについては記載しておりません。

【非表示にする方法】
・「名前」「メール」「サイト」の項目
・次回のコメントで使用するため~
・メールアドレスが公開されることはありません。
【文言を変更する方法】
・コメント欄のタイトル、送信ボタン
・「名前」「メール」「サイト」の項目
・コメント内容の上部に表示されるコメント

各項目ごとに使用するコードをそれぞれ書きました。
ページの最後にまとめたコードを記載しております。

テーマによってはテーマの設定でカスタムできる場合があります。まずご確認を!

各入力欄を非表示にする

・コメント欄の「名前」「メール」「サイト」を非表示にする方法です。

Wordpressコメント欄カスタマイズ_001

名前とメールアドレスの入力欄を削除する際には注意があります。

Wordpressコメント欄カスタマイズ_002

入力項目を消していてもエラーが出るので注意。

WordPressの設定で名前とメールアドレスの入力を必須にしている場合、空欄のまま送信を押すとエラーが出てしまうのでまずこちらを無効にします。

Wordpressコメント欄カスタマイズ_003

ディスカッション > 他のコメント設定

管理画面からディスカッションに進みます。
「コメントの投稿者の名前とメールアドレスの入力を必須にする」のチェックを外しておきましょう。

functions.phpに記述するコード

以下のコード(どちらでもOK)をfunctions.phpに記述します。

コードその1

function commentform_remove($args) {
//名前の入力欄
$args['author'] = '';
//メールの入力欄
$args['email'] = '';
//サイトの入力欄
$args['url'] = '';
    return $args;
}
add_filter('comment_form_default_fields', 'commentform_remove');

comment_form_default_fieldsというフックを使い、各項目の配列を設定して渡すことでfunctions.phpにて各項目を操作できます。

消したい項目を空にするとその入力項目を非表示に出来ます。

コードその2

unset関数を使って各配列の要素を削除する方法でもOKです。

function commentform_remove($args) {
unset($args['author']);
unset($args['email']);
unset($args['url']);
    return $args;
}
add_filter('comment_form_default_fields', 'commentform_remove');

やっていることは同じです。一つ目のコードの方が動作が軽いかな?

cssのdisplay:noneなどを使って消すこともできますが、ページ上に存在するものを見えなくするだけなのであまり良くないと思います。

Wordpressコメント欄カスタマイズ_004項目を削除するとこんな感じにコメント本文のみの入力欄になります。

コメント欄の必須項目とCookieの設定

・「*が付いている欄は必須項目です」
・「次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。」
を非表示にする方法です。

Wordpressコメント欄カスタマイズ_005

これはWordpressの設定で簡単に行うことができます。

Wordpressコメント欄カスタマイズ_006

ディスカッション > 他のコメント設定

画像を参考に赤枠のところのチェックを外すとOKです。かんたん。

Wordpressコメント欄カスタマイズ_007こんな感じになります。

「メールアドレスが公開されることはありません」を非表示にする

・「メールアドレスが公開されることはありません。」
・「次のHTMLタグと属性が使えます…」
を非表示にする方法です。

Wordpressコメント欄カスタマイズ_008

functions.phpに記述するコード

function commentform_remove_text( $args ){
    //「メールアドレスが公開されることはありません」を削除
    $args['comment_notes_before'] = '';
    //「HTMLタグと属性が使えます…」を削除
    $args['comment_notes_after'] = '';
    return $args;
}
add_filter('comment_form_defaults', 'commentform_remove_text');

comment_form_defaultsというフックを使います。
入力欄を削除するのに使ったフックには_fieldsが付いていましたが違います。

・「comment_form_default_fields」
「fields」配列のauthor、email、url、cookiesなどの要素を操作可能。
・「comment_form_default」
全てのコメントフィールドを操作可能。
二次元配列の記述でfields要素も操作できる。

comment_notes_beforeとcomment_notes_afterという配列でコメント本文入力欄の前後にあるテキストを設定できます。

コメント欄のタイトルと送信ボタンの文字を変更する

・「コメントする」や「コメントを残す」などの文字を変更する方法。
・「コメント送信ボタン」の文字を変更する方法です。

Wordpressコメント欄カスタマイズ_009

functions.phpに記述するコード

function commentform_change_text( $args ){
//コメント欄のタイトル
    $args['title_reply'] = 'コメントほしいなぁ~…';
//送信ボタンのテキスト
    $args['label_submit'] = '送信するっ!!';
    return $args;
}
add_filter('comment_form_defaults', 'commentform_change_text');

title_replyに代入したテキストがコメント欄のタイトルになり、
label_submitに代入したテキストが送信ボタンの文字になります。

Wordpressコメント欄カスタマイズ_010こんな感じに変わります。

テーマによってtitle_replyでタイトル文字が変更されない事があります。
【関連記事】
WordPressでコメント欄のタイトル「コメントを残す」がtitle_replyを使っても変更されない場合。

コメント欄のタイトルを非表示にする

title_replyを空欄にすることでコメント欄上部のタイトルを非表示にできます。

Wordpressコメント欄カスタマイズ_011

functions.phpに記述するコード

function commentform_remove_title( $args ){
//コメント欄のタイトル
    $args['title_reply'] = '';
//タイトルを囲む開始タグ
    $args['title_reply_before'] = '';
//タイトルを囲む終了タグ
    $args['title_reply_after'] = '';
//送信ボタンのテキスト
    $args['label_submit'] = '送信するっ!!';
    return $args;
}
add_filter('comment_form_defaults', 'commentform_remove_title');

title_replyを空に設定するとタイトルの表示場所に変な空白が出来てしまいます。
そこでタイトルを囲む前後のHTMLタグも同時に削除します。

title_reply_beforeが開始タグ(<h2>~ほげほげ~)
title_reply_afterが終了タグ(~ほげほげ~</h2>)

という感じです。こちらも空欄にしておきましょう。

各入力欄の文字を変更する

・コメント欄の「名前」「メール」「サイト」の文字を変更する方法です。

Wordpressコメント欄カスタマイズ_012CSSを使って変更することも可能ですが、ここではfunctions.phpにプログラムを記述し、読み込み時にテキストを置換する方法で実装します。

CSSの疑似要素を使う方法では元のテキストを隠す必要があります。
ソース上には存在してしまう為、あまり良くないと思います。

functions.phpに記述するコード

・まず1項目のみ変更したい場合です。

Wordpressコメント欄カスタマイズ_013

文言を1つ変更したい場合のコード

//名前をニックネームに変更する
function commentform_change_name( $changed ) {
$changed = str_ireplace( '名前', 'ニックネーム', $changed );
    return $changed;
}
add_filter('comment_form_default_fields', 'commentform_change_name');
メールを変更:名前をメールに、ニックネームを変更後の文字にする。
サイトを変更:名前をサイトに、ニックネームを変更後の文字にする。

ただ単にテキストを置換しているだけなので、適宜変更することで文字を変更することが出来ます。
(comment_form_default_fieldsフックなのでコメント欄以外に影響なし。)

・続いて、3項目全て変更したい場合です。

Wordpressコメント欄カスタマイズ_014

入力欄の文言を全て変更したい場合のコード

//名前、メール、サイトをそれぞれ文字変更する
function commentform_change_titles( $changed ) {
$target = array('名前','メール','サイト',);
$replace = array('ニックネーム','mailアドレス','あなたのサイトURL');
$changed = str_ireplace( $target, $replace, $changed );
    return $changed;
}
add_filter('comment_form_default_fields', 'commentform_change_titles');

変更前のテキストと変更後のテキストを配列にまとめてみました。

コメント内容上部の文字を変更する

・コメント本文の上側にある「コメント」という文字を変更する方法です。

Wordpressコメント欄カスタマイズ_015「コメント」の文字についてはcomment_form_default_fieldsを使った方法ではうまく変更できませんでしたのでCSSで文言変更します。

style.cssに記述するコード

.comment-form-comment label{
    font-size: 0 !important;
}
.comment-form-comment label::before{
    font-size: 18px;
    content: "コメント内容";
}

「コメント」となっている部分にはcomment labelというクラスが当てられているので、こちらをまずfont-size:0で非表示にします。

あとは疑似要素を使って任意のテキストに変更します。
Wordpressコメント欄カスタマイズ_016こんな感じに変わります。

非表示にしたい場合は、display:none;を使用するとOKです。

・CSS使用時のクラス名の参考

他の項目でもクラス名を変えることで同様に文言変更ができます。

項目クラス名
コメント.comment-form-comment label
名前.comment-form-author label
メール.comment-form-email label
サイト.comment-form-url label

WordPressコメント欄カスタム用コード

・コメント欄関連のコードをまとめました。

入力項目やテキストの削除と変更

function my_comment_form_custom( $args ){
//名前の入力欄を削除する
    $args['fields']['author'] = '';
//メールの入力欄を削除する
    $args['fields']['email'] = '';
//サイトの入力欄を削除する
    $args['fields']['url'] = '';
//「次回のコメントで使用するため…」を削除
    $args['fields']['cookies'] = '';
//「メールアドレスが公開されることはありません」を削除
    $args['comment_notes_before'] = '';
//「HTMLタグと属性が使えます…」を削除
    $args['comment_notes_after'] = '';
//コメント欄のタイトル
    $args['title_reply'] = 'コメントはお気軽にをどうぞ!';
//コメント送信ボタン
    $args['label_submit'] = 'コメントを送信';
    return $args;
}
add_filter('comment_form_defaults', 'my_comment_form_custom');

「名前」「メール」「サイト」の文言を変更

//名前、メール、サイトをそれぞれ文字変更する
function commentform_change_titles( $changed ) {
$target = array('名前','メール','サイト',);
$replace = array('ニックネーム','mailアドレス','あなたのサイトURL');
$changed = str_ireplace( $target, $replace, $changed );
    return $changed;
}
add_filter('comment_form_default_fields', 'commentform_change_titles');

コメント本文上部の「コメント」の文言を変更

.comment-form-comment label{
    font-size: 0 !important;
}
.comment-form-comment label::before{
    font-size: 18px;
    content: "コメント内容";
}

以上の内容で大方コメント欄はカスタマイズできると思います。

まとめ

WordPressのコメント欄をカスタマイズする方法でした。
ほとんどfunctions.phpだけで対応できます。

コメント欄はシンプルなほどコメント率が上がりますが、入力項目が少ないほどスパムコメントが増える可能性がありますので注意は必要です。

-Wordpress
-,

© 2021 ソロ学