【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' => '',
		)
	); ?>

<?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' => '',
		)
	); ?>

<?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');

//コメント文言を変更

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');

//コメントから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: "ニックネーム";}

.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: "ニックネーム";}

これにより、

コメント→内容
名前→ニックネーム

に変更されたのではないでしょうか。

WordPressのコメント欄のカスタマイズは無駄にめんどくさい笑

以上がWordPressのコメント欄のカスタマイズ方法でした。

「フォームの文言を変更するだけで何でこんなにややこしいんだよ！？！」

と10回ぐらいマジギレしていたような気がしますが、なんとかコメントフォームのカスタマイズ方法をマスターできました。

ぼくと同じような症状を抱えている方はぜひ試してみてくださいね。

もし、

「ワードプレスをもっと深く学びたい！」

という方にはTECHACADEMYの「オンラインブートキャンプ WordPressコース」がおすすめです。

プロのメンターの方にわからないところを質問しながら学習できますからね。

よかったら使ってみてください。

それでは！

Lin

【参考文献】

NxWorld

WordPress：コメントフォームをカスタマイズする方法 | NxWorld

https://www.nxworld.net/wordpress/wp-default-comment-form-customize.html

WordPressのコメントフォームを自分好みにカスタマイズする方法です。

トリコロールな猫

Wordpressのコメントフォーム（comment_form）をカスタマイズ - トリコロールな猫

http://www.nekotricolor.com/entry/2013/01/10/745/

デフォルトのはなんか変。なんとかしなきゃと思いつつ放ってましたがついに手を出すぞ。結構めんどくさいんですよこれ。コメントフォームはcomments.phpのcomment_form()の引数で決まるトリコロールな猫のテンプレートはnekotricolorオリジナルです。コメントに関...

アフィリエイトで稼ぐ方法を全部話そうと思う

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

https://affiliate150.com/wordpress-comments

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

Qiita

CSSでテキストを書き換える方法 - Qiita

http://qiita.com/zakisanf05/items/6a52084eaab41b45a03b

#CSSでテキストを書き換える方法下記のコードを参考にしてください。まず書き換えたい要素のfont-sizeを0に設定します。次に書き換え後の文字列を疑似要素で作成し、そちらはfont-sizeを任意の値に設定してください。以...

飯橋凛（Ihashi Lin）

自称、学習系ブロガー。自ら学び、学んだことをわかりやすく楽しくアウトプットすることを心がけています。

好きな映画は「メリーに首ったけ」

Pocket

6件のコメント

超初心者 より:

2017年10月24日 8:58 PM

日にちを非表示にするのってどうやるんですか？

返信
1. 飯橋凛 より:
  
  2017年10月25日 1:18 PM
  
  ソース見てみたら”comment-metadata”っていうクラスのtimeタグの中に記述されているみたいなので、
  もしかしたら最後のラベルを変更した方法で非表示にできるかもしれません。
  
  返信
ひろあきさん より:

2018年8月18日 6:20 PM

ストークを使っています。とてもわかりやすい説明で無事にカスタムできました。

返信
1. 飯橋凛（Ihashi Lin） より:
  
  2018年8月21日 12:08 PM
  
  お役に立ててよかったです！ありがとうございます！
  
  返信
ken より:

2019年12月26日 11:31 PM

非常に参考になりました！
ありがとうございます。

返信
1. 飯橋凛（Ihashi Lin） より:
  
  2019年12月27日 5:59 PM
  
  いえいえ！
  コメント欄ってなにげに大事ですよね！
  
  返信