@fujixfujiko

« WordPressのサイトにCDNが必要な理由 | メイン  | WordPressのアクションフックを探す方法 »

WordPressのコメントフォームをカスタマイズする方法

どうも(p・ω・q)

週末がやってきましたね。
明日の土曜日は新入社員の歓迎会ですよー。


最近いくつもWordPressのテーマを作成したので、書くネタがたまっています。


↓ 今日はこれ ↓

コメントフォームの見た目をCSSだけで変えるのには限界がある!
と感じたときに、HTMLの方をいじる方法
です。






b_000.gif
1.カスタマイズ対象ファイルを探す


comment_form()という関数が、コメントフォームのHTMLを出力しています。
まずは、これを使用しているテンプレートファイルを探します。

Twenty Tenのテーマでは、comments.php
<?php comment_form(); ?>という記述があります。

コメントフォームのHTMLを変更するには、これに引数をいろいろ追加してやればおk。


ちなみにこういうときに関数の仕様を調べる場合、できる限り英語版を見た方がいいです。
日本語版では更新が追いついていないことが結構あります。

comment_form()の場合も、英語版にはあるサンプルコードが日本語版にはありませんでした。
というかほとんど英語コピペで翻訳されてないですね(ノд・@)



b_000.gif
2.comment_form()の変更方法


comment_form( $args, $post_id );

引数は両方とも省略可能ですが、今回は$argsを使います。


$args
コメントフォームの出力方法についての情報はここに突っ込みます。

l_029.gif
$args = array(
    'fields'                => $fields,
    'comment_field'         => $comment_field,
    'must_log_in'           => $must_log_in,
    'logged_in_as'          => $logged_in_as,
    'comment_notes_before'  => $comment_notes_before,
    'comment_notes_after'   => $comment_notes_after,
    'id_form'               => $id_form,
    'id_submit'             => $id_submit,
    'title_reply'           => $title_reply,
    'title_reply_to'        => $title_reply_to,
    'cancel_reply_link'     => $cancel_reply_link,
    'label_submit'          => $label_submit
    );

l_030.gif


$fields
コメント本文以外のフィールドの出力方法を設定します。

必須の「*」印の場所を変えたり、「(必須)」に変更したりできます。

l_029.gif
// valueのデフォルト値用
$commenter = wp_get_current_commenter();

$fields = array(
    'author' => '<p id="inputtext">' . '<label for="author">' . __( 'Name' )
                . ( $req ? '(必須)' : '' ) . '</label> ' .
                '<br /><input id="author" name="author" type="text" value="'
                . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
    'email'  => '<p id="inputtext"><label for="email">' . __( 'Email' )
                . ( $req ? '(必須)' : '' ) . '</label> ' .
                '<br /><input id="email" name="email" type="text" value="'
                . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
    'url'    => '<p id="inputtext"><label for="url">' . __( 'Website' ) . '</label>' .
                '<br /><input id="url" name="url" type="text" value="'
                . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
    );

// 配列を設定し終わったらフィルター通してね。
$fields = apply_filters( 'comment_form_default_fields', $fields );

l_030.gif


$comment_field
コメントフィールドの出力方法を設定します。

l_029.gif
$comment_field = '<p id="textarea"><label for="comment">' . __( 'Comment' ) . '(必須)</label><br />'
               . '<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>';

l_030.gif


$must_log_in
ログインしないとコメントできない場合、
「ログインしなきゃいけませんよ」っていうコメントの部分です。

l_029.gif
$must_log_in = '<p class="must-log-in">'
             . sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ),
               wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>';

l_030.gif


$logged_in_as
「今○○でログインしてます。ログアウトしますか?」っていうところ。

l_029.gif
$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>';

l_030.gif


$comment_notes_before
「メアドは公開されませんよー。*は必須ですよー。」っていうところ。

それぞれに「(必須)」って書いて、後半の部分は消してしまうのがいいと思います。

l_029.gif
$comment_notes_before = '<p class="comment-notes">'
                      . __( 'Your email address will not be published.' )
                      . ( $req ? $required_text : '' ) . '</p>';

l_030.gif


$comment_notes_after
「コメントでこんなタグが使えますよ。」っていうところ。

l_029.gif
$comment_notes_after = '<p class="form-allowed-tags">'
                     . sprintf( __( 'You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: %s' )
                     , ' <code>' . allowed_tags() . '</code>' ) . '</p>';

l_030.gif


$id_form
<form>タグのID

l_029.gif
$id_form = 'commentform';
l_030.gif


$id_submit
submitボタンのID

l_029.gif
$id_submit = 'submit';
l_030.gif


$title_reply
返信のところのタイトル。

l_029.gif
$title_reply = __( 'Leave a Reply' );
l_030.gif


$title_reply_to
コメントのタイトル

l_029.gif
$title_reply_to = __( 'Leave a Reply to %s' );
l_030.gif


$cancel_reply_link
返信をキャンセルするボタンの名前。

l_029.gif
$cancel_reply_link = __( 'Cancel reply' );
l_030.gif


$label_submit
submitボタンの名前。

l_029.gif
$label_submit = __( 'Post Comment' );
l_030.gif



それではよいカスタマイズライフを~(@・ω・)ノ

トラックバック

この一覧は、次の記事を参照しています: WordPressのコメントフォームをカスタマイズする方法

≫ WordPressのコメントフォーム(comment_form)をカスタマイズ from トリコロールな猫 - nekotricolor
デフォルトのはなんか変。なんとかしなきゃと思いつつ放ってましたがついに手を出すぞ。 結構めんどくさいんですよこれ。 コメントフォームはcomments.phpのcomment_form()の引数で決まる トリコロールな猫のテンプレートはnekotricolorオリジナルです。コメントに関するPHPファイルcomments.phpも必要最低限のみですが自分で書いています。 comments.phpを作成し、表示方法をカスタマイズするところまでは以前「comments.phpを1から作る」で書きました。... [詳しくはこちら]

コメント

はじめまして!

はじめまして、manimと申します。

オリジナルテーマでwordpressを作成しています!
良かったらのぞいてみてやってくいださいm(_ _)m
コメントを利用して画像掲示板を作ろうと思い 、プラグインのComment ImageとPaged Commentsを使っていますが、
コメント部分に任意のタイトルをつける方法を探していてここにたどり着きました。
タイトルフォームも出力もされていて、すごいですね!


comments-pagedのソースを見て「タイトル」のフォームを作ることはできたんですが、
フォーム部分に <?php echo $comment_title; ?>
出力部分に   <?php comment_title; ?>
としてもやはり出力されませんでした。
Movable Typeみたいに↓のようなものがあればいいのですが・・
http://www.skuare.net/2007/10/movable_typemtcommenttitle.html

fujixfujikoさんのこちらの記事を真似してやってみたんですが 、どうもうまくいきませんでした・・。
とゆうのが、comments-paged.phpの中に<?php comment_form(); ?>自体が
存在しませんでした(泣
何か良い方法があったら教えていただけないでしょうか><;

manimさん

はじめまして~。
コメントありがとうございます。

comment_form()の関数は、WordPress3.0から実装されていて、
Paged Commentsというプラグインは、WordPress2.7より前向けみたいですね。

今使っているWordPressのバージョンはいくつですか?

Paged Commentsというプラグインのサイトにも書いてありましたが、
コメントにページをつける機能は、WordPress2.7から本体に実装されていて、
このプラグインを使わなくても管理画面から設定できるようになっています。

本体の機能でコメントのページングができるなら、comments-paged.phpを改造する必要もないと思うのですよ。