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

Sponsored Link

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

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

 

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

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

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

 

wordpress コメントフォーム カスタマイズ

 

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

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

 

wordpress コメントフォーム カスタマイズ

 

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

 

 

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

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

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

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

comments.php

というファイル。

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

 

ぼくの場合、

LEAVE A REPLY

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

すると、

いましたいました!

 

 

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

「コメントする」

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

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

 

wordpress コメントフォーム カスタマイズ

 

 

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

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

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

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

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

 

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

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

 

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

 

wordpress コメントフォーム カスタマイズ

 

 

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

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

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

 

 

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

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

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

 

wordpress コメントフォーム カスタマイズ

 

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

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

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

 

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

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

に設定されています。

 

wordpress コメントフォーム カスタマイズ

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

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

 

 

これにより、

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

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

 

wordpress コメントフォーム カスタマイズ

 

 

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

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

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

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

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

 

もし、

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

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

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

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

 

それでは!

Lin

 

【参考文献】


Sponsored Link

2件のコメント

    1. ソース見てみたら”comment-metadata”っていうクラスのtimeタグの中に記述されているみたいなので、
      もしかしたら最後のラベルを変更した方法で非表示にできるかもしれません。

コメントはこちらからお願いします!



もう1本読んでみる