[WP3 カスタマイズ] コメントフォームをdl要素でマークアップする

WordPressのテンプレートタグcomment_form()を使って、コメントフォームをdl要素でマークアップするカスタマイズをやってみました。

対象

WordPress 3.0.0 以上
comment_form()タグはWP3で追加されたタグです。

ソースコード

このタグはwp-includes/comment-template.phpで定義されています。参考にしてください。

目標とするHTMLソース

フォームとしてはおおまかに以下のような形を目標とします。

<dl>

  <dt><label for="author">名前</label></dt>
  <dd>
    <input id="author" name="author" type=" text"/>
  </dd>

  <dt><label for="email">メールアドレス</label></dt>
  <dd>
    <input id="email" name="email" type="text"/>
  </dd>

  <dt><label for="url">ウェブサイト</label></dt>
  <dd>
    <input id="url" name="url" type="text"/>
  </dd>

  <dt><label for="comment">コメント</label></dt>
  <dd>
    <textarea id="comment" name="comment"></textarea>
  </dd>

  <p class="form-submit">
      <input name="submit" type="submit" id="submit" value="コメントを送信" />
      <input type='hidden' name='comment_post_ID' value='59' id='comment_post_ID' />
      <input type='hidden' name='comment_parent' id='comment_parent' value='0' />
  </p>
            

</dl>

フィルターフックを使う

フォームの内容を変更するには素直にcommnet_form()の引数を利用する方法と、フィルターフックを使った方法があります。

あまりフックを使ったカスタマイズはやったことがないのですが、今回はこちらに挑戦♪。フックを使う理由はとくにありませんが、強いて言うならこっちのほうがいろいろできそうだから。。。ですかね。

ソースコードを見るとcomment_form()内にはいくつかのフィルターフックが用意されています。フィルターフックの場所はapply_filters()が使われてるところです。ちなみにアクションフックはdo_action()が使われてるところですよ。

1. フィルターフックの使い方

フックを使うにはfunctions.phpにフィルターする関数を書いて、add_filterするだけです。次のような形になります。

function 関数名( フィルターに通す値 ) {

  処理をゴニョゴニョ

  return 返り値;

}

add_filter('フィルターフック名', '関数名');

これが基本形になります。それでは次から実際にフックを使ってみます。

2. 名前等のマークアップの変更

まずは名前、メールアドレス、ウェブサイトのテキストフィールドまわりから変更していきます。

これらはソース内では$fieldsという配列に書かれています。これをフィルターするためのフックがcomment_form_default_fieldsです。

よって、配列を書き換えるフィルター関数は次のようになります。 これをfunctions.php内に書いてくださいね。

function paolog_comment_form_fields( $fields ) {

  $fields = array (
    'author' => 
      '<dt><label for="author">名前</label></dt>
       <dd><input id="author" name="author" type="text"  value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></dd>',

    'email'  => 
      '<dt><label for="email">メールアドレス</label></dt>
       <dd><input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></dd>',

    'url'    => 
      '<dt><label for="url">ウェブサイト</label></dt>
       <dd><input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></dd>',
  );

	return $fields;

}

add_filter('comment_form_default_fields', 'paolog_comment_form_fields');

関数名はご自由に。単純に配列の中身を上書きする感じですね。input要素の中身はデフォルトの記述のままでいいでしょう。

つづいて、コメントエリアとその他のテキストを変更するフィルタ関数をつくります。この部分のフックはcomment_form_defaultsです。

function paolog_comment_form_text($defaults) {

  global $user_identity;

  $defaults['comment_field'] = 
    '<dt><label for="comment">コメント</label></dt>
     <dd><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></dd>
     </dl>';

  $defaults['logged_in_as'] = 
    '<p class="logged-in-as">'
    . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' )
      , admin_url( 'profile.php' )
      , $user_identity
      , wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) )
    . '</p><dl>';

  $defaults['comment_notes_before'] = '<dl>';

  $defaults['comment_notes_after'] = "";

  $defaults['title_reply'] =
    '<img src="'.get_bloginfo('template_directory').'/img/title-reply.png" width="186" height="71" alt="コメントしてね">';

  $defaults['title_reply_to'] =
    '<img src="'.get_bloginfo('template_directory').'/img/-title-reply.png" width="186" height="71" alt="コメントしてね">
     <span>あなたは %s のコメントに対して返信しようとしています。</span>';

  $defaults['cancel_reply_link'] = '返信をキャンセルするときはここをクリック。';

  return $defaults;

}

add_filter('comment_form_defaults', 'paolog_comment_form_text'); 

やってることははじめの関数と同じです。違うのは配列のセットの仕方くらいですね。書き方はどちらでも好きな方で書いてください。テキストを変更したり、テキストを画像にしたりといろいろできるので試してみてくださいね。

今回は定義リスト(dl)なのでラベルをdt、inputをddでマークアップしています。必要ならばこれをベースに足していく感じで。たとえばclassなどを追加するのもいいでしょう。

そうそう、またdlリストの開始と終了タグをいれてませんでしたよね。終了タグ</dl>は</textarea></dd>のあとでいいと思います。

ただ、肝心のdlタグをどこにいれるかがポイントになります。参考のため、ログインしている時としていない時のフォームをのせておきます。テーマはTwenty Ten。

ログインしているときのフォーム

ログアウトしているときのフォーム

ログインしていないときを見ると開始タグdlは名前のテキストフィールドの前に入るよう

$fields = array (
  'author' => '<dl><dt><label for="author">名前</label></dt>・・・

とするのがよさそうですが、ログインしているときにはこのフィールドは表示されません。そのかわりに

「(ログイン名)としてログインしています。ログアウトしますか?」

というテキストが表示されるようになります。

これらから、

  • logged_in_as
  • comment_notes_before

の2箇所にくっつければいいと思います(上記コードまたはドキュメント参照)。

これでコメントフォームをdl要素でマークアップすることができます。

そうのひとりごと

© 2017 PAOLOG