【WordPress】テーマ「Hueman」のカスタマイズ コメントフォームを名前とコメントのみにする方法

当サイトで使用しているテーマ「Hueman」の、記事単体ページのカスタマイズについての記事です。
Wordpressのカスタマイズにあたり、子テーマを使用している前提となっています。

今回は、コメントフォームを設置するにあたり、フォーム内容をカスタマイズした内容をご紹介します。
テーマ「Hueman」のカスタマイズを行いたい人の参考になれば幸いです。
※テーマの編集は、必ずバックアップを取ってから行いましょう！

Huemanのバージョン: 3.2.12

デフォルトのコメントフォーム

このコメントフォームを、自分がしたい形に合わせてカスタマイズしていきます。

どのようにカスタマイズしたいのか

カスタマイズ後のコメントフォームは、以下の形にしたいと考えていました。

1. 入力項目は「名前」と「コメント」のみにしたい
2. 「名前」は必須入力項目にしたい
3. 「コメント」と「名前」の順序を入れ替えたい

カスタマイズの前に確認する事

カスタマイズの前に、コメントフォームの必須項目設定と表示・非表示の設定を確認します。

WordPressの設定を確認する

管理画面のサイドメニュー「設定→ディスカッション」を開き、
「コメントの投稿者の名前とメールアドレスの入力を必須にする」のチェックが外れていることを確認します。

Huemanの設定を確認する

管理画面のサイドメニュー「外観→カスタマイズ」を開き、「全般設定→コメント」を開きます。
「Posts Comments」にチェックが入っていることを確認します。
ここにチェックが入っていないと、コメントフォームが非表示になります。

2つのファイルをカスタマイズする必要がある

カスタマイズを行うにあたり、以下の変更を行う必要がありました。

1. functions.phpの変更
2. style.cssの変更

functions.phpを変更する目的

functions.phpをカスタマイズする目的は、以下の通り。

1. コメントフォームの必須設定を名前のみに変更
2. コメントフォームのからメールアドレスとウェブサイトを削除
3. コメントフォームのテキスト表記を変更
4. コメントフォームのフォーム表示順を変更

style.cssを変更する目的

style.cssをカスタマイズする目的は、以下の通り。

1. functions.phpによる変更に伴うレイアウト崩れの修正

デフォルトでは「名前」と「メールアドレス」は隣接しておりfloatでレイアウトされていますが、
functions.phpで「メールアドレス」を削除することにより、「名前」と「コメントを送信」がレイアウトずれを起こします。
そこで、style.cssで2つの要素についてレイアウトを整えてあげる必要が出て来ます。

functions.phpのカスタマイズ内容

コメントフォームの必須設定を名前のみに変更

function preprocess_comment_author( $commentdata ) {
    if ("" === trim( $commentdata['comment_author'] ))
    wp_die('お名前を入力して下さい。');
    return $commentdata;
}
add_filter('preprocess_comment', 'preprocess_comment_author', 2, 1);

コメントからEmailとウェブサイトを削除

function my_comment_form_remove($arg) {
$arg['url'] = '';
$arg['email'] = '';
return $arg;
}
add_filter('comment_form_default_fields', 'my_comment_form_remove');

削除すると確かに項目自体は消えますが、レイアウトが崩れるためcssで修正してあげる必要があります。
cssについては後述。

コメントのテキスト表記を変更

add_filter('comment_form_defaults', 'custom_comment_form');

function custom_comment_form($args) {
	$args['title_reply'] = 'コメントはお気軽にどうぞ';
	$args['label_submit'] = 'コメントを送信する';
	return $args;
}

コメントのフォーム表示順を変更

function wp34731_move_comment_field_to_bottom( $fields ) {
  $comment_field = $fields['comment'];
  unset( $fields['comment'] );
  $fields['comment'] = $comment_field;
  
  return $fields;
}
add_filter( 'comment_form_fields', 'wp34731_move_comment_field_to_bottom' );

style.cssのカスタマイズ内容

#commentform p.comment-form-author{width:100%;float:none;}
#commentform p.form-submit{clear:both;}

cssで「名前」の幅を変更し、floatがかかっているるのでリセット。
「コメントを送信する」ボタンにも同様にclear:bothを設定。

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

「名前」と「コメント」のみの、シンプルなコメントフォームになりました。

＜スポンサードリンク＞