WordPressのコメント欄をカスタマイズ。アドレスやサイトURLを消す設定！

コメント欄について公開している人やあえてコメント欄を封鎖している人もいると思います。

当サイトでは基本的にコメント欄は開放しており、承認制の設定もしていません。

また、スパムコメントはプラグインでブロックしていますが、心配な方も多いと思います！

それ以上に当サイトでは気軽にコメントができるような環境にしたいと思っていますので、今回はカスタマイズで気軽にコメントができるように入力欄を調整してみました！

あわせて読みたい

【SWELL】雑記ブログでのGoogle AdSenseの有効的な貼り方を初心者向けに解説してみる ブロガーが最初の目標として定めるのが「Google AdSense」ですが、合格してその後はどうしてるでしょう？ 基本的にはGoogleで検索して貼り方を探して、適当に貼り付けて…

あわせて読みたい

【SWELL】文字にプラグインなしでルビを振る方法を紹介する！ SWELLではデフォルトでルビの機能がありません。 ブロックエディターでは基本的にバーにルビを振るための機能が割り当てられていますが、SWELLに限っては表示されていま…

デフォルトのコメント欄

デフォルトのコメント欄は上記画像になります。

項目は以下です。

ここで重要なのは「コメント」と「名前」の2つです。

「サイト」と「メール」の重要度はそんなに高くないんですよね。

サイトは運営者でないと入力することはありませんし、メールアドレスはコメントをする際に心配になります。

筆者がサイトの来訪者でも同じようなことを思うと思います。

理想のコメント欄

当サイトでもそうですが、理想とするコメント欄は気軽にコメントできることです。

そのため上記のようにシンプルにしました！

カスタマイズの内容としては「メールとサイト欄を非表示」「名前と内容の位置変更」「不要な文言を消す」「コメント送信ボタンの位置変更」です。

この4点のカスタマイズを以下で紹介していきたいと思います。

カスタマイズは以下の記事を参考にしています。

参考記事｜WordPress│コメント欄のおすすめカスタマイズ

PHPのカスタマイズ

メールとサイト欄を非表示

カスタマイズはPHPを編集して設定していきます。

ファイルエディターからfunctions.phpに以下のコードを追加していきます。

/* メールとサイト欄を非表示 */
function comment_field_custom( $fields ) {
  $fields['url'] = '';
  $fields['email'] = ''; 
  return $fields;
}
add_filter( 'comment_form_fields', 'comment_field_custom');

このコードでメールとサイト欄を非表示にすることができます。

名前と内容の位置変更

次に名前とコメントの位置を変更します。

先程同様ファイルエディターからfunctions.phpに以下のコードを追加していきます。

/* 名前と内容の位置変更 */
function comment_field_custom( $fields ) {
    $comment_field = $fields['comment'];
  unset( $fields['comment'] );
  $fields['comment'] = $comment_field; 
  return $fields;
}
add_filter( 'comment_form_fields', 'comment_field_custom');

こちらのコードを記入すると位置の変更を行うことができます。

これらは同じfunctions.phpに記入するのカスタマイズコードなので、別々で読み込むより一緒に読み込んでしまったほうがスマートです。

コメント欄のカスタマイズとして以下のようにしました。

/* コメント欄カスタマイズ */
function comment_field_custom( $fields ) {
    $comment_field = $fields['comment'];
  unset( $fields['comment'] );
  $fields['comment'] = $comment_field;
  $fields['url'] = '';
  $fields['email'] = ''; 
  return $fields;
}
add_filter( 'comment_form_fields', 'comment_field_custom');

PHPを編集する際は念のためバックアップを取っておくのがおすすめです。

CSSのカスタマイズ

次に見栄えをカスタマイズしていきます。

CSSの記載になります。カスタマイズから記載するか、テーマファイルエディターからstyle.cssに記載して下さい。

H3見出しを非表示

SWELL限定ではありますが、コメント欄の上部にH3見出しが表示されています。

これを非表示にするのに以下のコードを記載してください。

/* コメント欄のh3を非表示 */
.p-commentArea__title{
	display: none;
}

コメント欄の送信ボタンを右側

コメント欄の送信ボタンの位置を変更します。

/* コメント欄の送信ボタンを右側に */
.form-submit {
    text-align: right;
}

送信ボタンが右側のほうがバランスがいい感じしますよねw

設定の変更

ディスカッションの設定

設定→ディスカッション→コメントの投稿者の名前とメールアドレスの入力を必須にするのチェック欄を外しておきましょう！

メールアドレスの欄が無いと「必須だけど入力できない」という状況になるので気をつけましょう。

当サイトは「コメント表示条件を認証なしに設定」しています。

これにはプラグインでアンチコメントやスパムを強めにブロックしているのが理由です。

まとめ

コメント欄は気軽にコメントができる方がいいと思っています。

カスタマイズ自体は簡単にできるのでブログごとにカスタマイズを変えて、コメント欄を変更してみるといいと思います！！

記事にコメントが付くと凄く嬉しいですよ！

是非試してみてください。

以上っ！！