WordPressのコメントフォームをカスタマイズしてみよう。
前回のエントリー（WordPressのコメント欄でhtmlタグを使用禁止にする方法）でコメント欄のhtmlタグを機能させない方法についてご説明しました。htmlタグが使えないのに、コメントフォームには使用可能なタグの説明が書かれたままです。
そこで今回はコメントフォームをいろいろとカスタマイズしてみます。
目次
- テーマのデフォルト状態を確認
- functions.phpの編集
- スタイルの調整
1. テーマのデフォルト状態を確認
まず、テーマのデフォルト状態を確認しておきましょう。
TwentyFourteen デフォルト状態のコメントフォーム
「名前」よりは「お名前」の方が丁寧ですし、ウェブサイトの入力欄は必要ないかもしれません。そのあたりの表現も含めて編集してみましょう。
2. functions.phpの編集
コメントフォームは comments.php の中の
|
1 |
<?php comment_form(); ?> |
という記述で表示されます。
comment_form() というのはWordPressの関数のひとつです。
はじめに functions.php に次の関数を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// コメント入力フォームの変更 add_filter('comment_form_default_fields','comment_form_custom_fields'); function comment_form_custom_fields($fields) { $commenter = wp_get_current_commenter(); $req = get_option('require_name_email'); $aria_req = ($req ? " aria-required='true'" : ''); /* 名前 */ $fields['author']='<p class="comment-form-author">' . ($req ? '<span class="required">*</span>' : '') . '<label for="author">お名前</label><input id="author" name="author" type="text" value="' . esc_attr($commenter['comment_author']) . '" size="30"' . $aria_req . ' /></p>'; /* メールアドレスの項目 */ $fields['email'] = '<p class="comment-form-email">' . ( $req ? '<span class="required">*</span>' : '' ) . '<label for="email">メールアドレス (E-mail)</label><span class="small">（メールアドレスは公開されません）</span><input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>'; /* ウェブサイトの項目 */ $fields['url'] = ''; return $fields; } |
2行目の add_filter 関数を使うことで、フィルターを通して comment_form() の出力を上書きするようなイメージです。
では次にそのほかの部分を変更します。
functions.php に以下のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// コメントフォームの変更 add_filter('comment_form_defaults','comment_form_custom'); function comment_form_custom($form) { global $user_identity, $post; $req = get_option('require_name_email'); $required_text = '<span class="required">*</span> が付いている項目は必須項目です。'; /* commentform textarea */ $form['comment_field'] = '<p class="comment-form-comment"><label for="comment">コメント</label><textarea id="comment" name="comment" cols="45" row="8" aria-required="true"></textarea></p>'; /* 要ログイン時 */ $form['must_log_in'] = '<p class="must-log-in">' . sprintf('コメントを残すには、<a href="%s">ログイン</a>してください。', wp_login_url(apply_filters('the_permalink',get_permalink($post->id))) . '</p>'; /* ログイン時 */ $form['logged_in_as'] = '<p class="logged-in-as">' . sprintf('<a href="%1$s">%2$s</a> としてログインしています。<a href="%3$s" title="Log out of this account">ログアウト</a>しますか？', admin_url('profile.php'), $user_identity, wp_logout_url(apply_filters('the_permalink', get_permalink($post->id)))) . '</p>'; /* コメントフォームの前に表示するテキスト */ $form['comment_notes_before'] = '<p class="comment-notes">' . ($req ? $reqired_text : '') . '</p>'; /* コメントフォームの後ろに表示するテキスト */ $form['comment_notes_after'] = 'htmlタグは使えません。'; /* コメントフォームの見出しのタイトル */ $form['title_reply'] = '返事を書く'; /* キャンセルリンクのテキスト */ $form['cancel_reply_link'] = '（または キャンセル）'; /* 送信ボタンのラベル */ $form['label_submit'] = 'コメントを送信'; return $form; } |
htmlタグが使えないという説明が、17行目にようやく出てきましたね。
これをテーマに適用してみます。
add_filter関数でコメントフォームを整形。
形にはなっていますが、どこか惜しいですよね。
そうです、入力必須項目をあらわす*マークと項目名の間に改行が入ってしまいました。
3. スタイルの調整
「お名前」や「メールアドレス」などの項目名の表示には というhtmlタグが使われています。入力必須項目をあらわす*マークには というhtmlタグが使われています。
タグのプロパティ display の値は block で、 タグのプロパティ display の値は inline です。block ボックス要素は横に並べられませんので、スタイルシートに次の一行を追加してプロパティの値を変えてみます。
|
1 |
#respond label { display: inline; } |
だいぶ見やすくなったと思います。
WordPressのコメント欄でhtmlタグを機能させない方法 | Studio Kurara
2014/08/02 @ 06:58
[…] 最後に、コメントフォームの文言を修正しておきましょう。 長くなりますので、次のエントリー（WordPressのコメントフォームをカスタマイズしてみよう。）で。 htmlWordPress […]