WordPressのコメントフォームをカスタマイズしてみよう。

LINEで送る
Pocket

前回のエントリー(WordPressのコメント欄でhtmlタグを使用禁止にする方法)でコメント欄のhtmlタグを機能させない方法についてご説明しました。htmlタグが使えないのに、コメントフォームには使用可能なタグの説明が書かれたままです。
そこで今回はコメントフォームをいろいろとカスタマイズしてみます。

目次

  1. テーマのデフォルト状態を確認
  2. functions.phpの編集
  3. スタイルの調整

1. テーマのデフォルト状態を確認

まず、テーマのデフォルト状態を確認しておきましょう。

TwentyFourteen デフォルト状態のコメントフォーム

TwentyFourteen デフォルト状態のコメントフォーム

「名前」よりは「お名前」の方が丁寧ですし、ウェブサイトの入力欄は必要ないかもしれません。そのあたりの表現も含めて編集してみましょう。

2. functions.phpの編集

コメントフォームは comments.php の中の

という記述で表示されます。
comment_form() というのはWordPressの関数のひとつです。

はじめに functions.php に次の関数を追加します。

2行目の add_filter 関数を使うことで、フィルターを通して comment_form() の出力を上書きするようなイメージです。
では次にそのほかの部分を変更します。
functions.php に以下のコードを追加します。

htmlタグが使えないという説明が、17行目にようやく出てきましたね。
これをテーマに適用してみます。

add_filter関数でコメントフォームを整形。

add_filter関数でコメントフォームを整形。

形にはなっていますが、どこか惜しいですよね。
そうです、入力必須項目をあらわす*マークと項目名の間に改行が入ってしまいました。

3. スタイルの調整

「お名前」や「メールアドレス」などの項目名の表示には というhtmlタグが使われています。入力必須項目をあらわす*マークには というhtmlタグが使われています。
タグのプロパティ display の値は block で、 タグのプロパティ display の値は inline です。block ボックス要素は横に並べられませんので、スタイルシートに次の一行を追加してプロパティの値を変えてみます。

wordpress_comment-form_twentyfourteen-addfilter-style

だいぶ見やすくなったと思います。

LINEで送る
Pocket