【WordPress使い方】コメント欄のフォームを思うがままにカスタマイズする方法

WordPressサイトのコメント欄のフォームをカスタマイズしたい！

どうも、Linです。雲を睨んでみました。

WordPressサイトを運営していると、時々、

コメント欄をカスタマイズしたくなる瞬間があるかと思います。

ぼく自身、いくつかのWordPressのサイトを運営しているのですが、最近開設したサイトのコメント欄が妙にダサい。

見る限り、次の4つの問題点が浮かび上がってきたのです。

英語になっているところがある
フォームが多すぎ
文言がうざい
ラベルがシンプルすぎる

今日はせっかくなので、これらすべての問題を解消できる方法をメモしておこうと思います。

WordPressのコメント欄が英語になっている場合の対処法

英語圏で生まれたWordPressのテーマを使っていると、

コメント欄のメッセージが英語になっている場合があります。

そんな場合、いじればいいのが、

comments.php

というファイル。

このphpファイルから、修正したい英語の文言を探してみてください。

ぼくの場合、

LEAVE A REPLY

という文言を修正したかったので、comments.php内で探してみました。

すると、

いましたいました！

<?php comment_form( array(
		'title_reply' => '<span>' . esc_html__( 'Leave a Reply', 'poseidon' ) . '</span>',
		'comment_notes_after' => '',
		)
	); ?>

この「Leave a Reply」という記述が原因で永遠に英語表記のままになっていたので、こちらを日本語に変更。

「コメントする」

にでもしておきましょうか。

<?php comment_form( array(
		'title_reply' => '<span>' . esc_html__( 'コメントする', 'poseidon' ) . '</span>',
		'comment_notes_after' => '',
		)
	); ?>

すると、こんな感じで英語表記を消し去れます。

WordPressのうざい文言を削除する方法

続いて、WordPressのコメントフォームから、

メールアドレスが公開されることはありません

という文言を削除しましょう。

この文言があるおかげで、コメントしづらさが30倍ぐらいに跳ね上がってる気がします。

functions.phpに、下記のコードを追加します。

//コメント文言を変更
function custom_comment_form($args) {
	$args['comment_notes_before'] = '';
	$args['comment_notes_after'] = '';
	$args['label_submit'] = '送信';
	return $args;
}
add_filter('comment_form_defaults', 'custom_comment_form');

functions.phpは一歩間違えると大惨事になるので、必ずバックアップを取ってから編集することをおすすめします。

すると、こんな感じにコメント欄のフォームを変更できますね。

WordPressのコメント欄のフォームを減らす

WordPressのコメント欄のフォーム数を仕分けしましょう。

またまたfunctions.phpを編集していきます。次のコードを追加してください。

//コメントからEmailとウェブサイトを削除
function my_comment_form_remove($arg) {
$arg['email'] = '';
$arg['url'] = '';
return $arg;
 }
 add_filter('comment_form_default_fields', 'my_comment_form_remove');

これにより、ちょっと目障りだった、

メールアドレス
ウェブサイト

という記入欄が消失します。

WordPressのコメント欄のラベルを変更する

最後に、各フォームのラベルを変更していきましょう。

ぼくが一番しっくりにきたコメント欄のラベルを変更する方法は、CSS経由で文言を変更する方法です。

コメント、名前というラベルはそれぞれ、

comment-form-commentの下のlabelタグ
comment-form-authorの下のlabelタグ

に設定されています。

ってことで、こいつらの文言を超強引にCSSで変えていきます笑

WordPressファイルの中から「style.css」を開き、次のように編集しましょう。

.comment-form-comment label{
font-size:0;
}
.comment-form-comment label:before {font-size: 14px; content: "内容";}

.comment-form-author label{
font-size:0;
}

.comment-form-author label:before {font-size: 14px; content: "ニックネーム";}

これにより、