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

WordPressのコメントフォームのボタンを<button>タグに変えて中央寄せすることになり、カスタマイズする方法を調べました。

Codexにもなく、ソースコードを読んで修正箇所を探るところまでいったので、すぐ忘れることは確実です。備忘録として残します。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

WordPress Codexを読んでみた

WordPressには、コメントフォームが用意されていてカスタマイズができます。

コメントフォーム用テンプレート（comments.php）を用意して、オリジナルのコメントフォームを作成する。
comments.phpの中で、comment_form()のパラメータにカスタマイズの内容を指定。

でも、このカスタマイズはできることがかぎられています。

コメントの送信ボタンについては、HTMLのid属性とラベル文字列を指定できるだけ。

ぼくがカスタマイズしたかったのは、ボタンだけ中央寄せしたかったのと、HTMLのタグを<button>に変更することです。Codexを見るかぎりはできません。

やりたいことのヒントはソースコードにあった！

そこで、ソースコードを読んでみました。

wp_includes/comment_template.php

すると、comment_form()には、Codexにはないパラメータがほかにもありました。その中に、ボタンのHTMLフォームそのものを指定するものがあります。

『submit_button』です。

comment_template.php line: 2237 - 2275

コードを表示閉じる

$defaults = array(
    'fields'               => $fields,
    'comment_field'        => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p>',
    /** This filter is documented in wp-includes/link-template.php */
    'must_log_in'          => '<p class="must-log-in">' . sprintf(
        /* translators: %s: login URL */
        __( 'You must be <a href="%s">logged in</a> to post a comment.' ),
        wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ), $post_id ) )
    ) . '</p>',
    /** This filter is documented in wp-includes/link-template.php */
    'logged_in_as'         => '<p class="logged-in-as">' . sprintf(
        /* translators: 1: edit user link, 2: accessibility text, 3: user name, 4: logout URL */
        __( '<a href="%1$s" aria-label="%2$s">Logged in as %3$s</a>. <a href="%4$s">Log out?</a>' ),
        get_edit_user_link(),
        /* translators: %s: user name */
        esc_attr( sprintf( __( 'Logged in as %s. Edit your profile.' ), $user_identity ) ),
        $user_identity,
        wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ), $post_id ) )
    ) . '</p>',
    'comment_notes_before' => '<p class="comment-notes"><span id="email-notes">' . __( 'Your email address will not be published.' ) . '</span>'. ( $req ? $required_text : '' ) . '</p>',
    'comment_notes_after'  => '',
    'action'               => site_url( '/wp-comments-post.php' ),
    'id_form'              => 'commentform',
    'id_submit'            => 'submit',
    'class_form'           => 'comment-form',
    'class_submit'         => 'submit',
    'name_submit'          => 'submit',
    'title_reply'          => __( 'Leave a Reply' ),
    'title_reply_to'       => __( 'Leave a Reply to %s' ),
    'title_reply_before'   => '<h3 id="reply-title" class="comment-reply-title">',
    'title_reply_after'    => '</h3>',
    'cancel_reply_before'  => ' <small>',
    'cancel_reply_after'   => '</small>',
    'cancel_reply_link'    => __( 'Cancel reply' ),
    'label_submit'         => __( 'Post Comment' ),
    'submit_button'        => '<input name="%1$s" type="submit" id="%2$s" class="%3$s" value="%4$s" />',
    'submit_field'         => '<p class="form-submit">%1$s %2$s</p>',
    'format'               => 'xhtml',
);

submit_buttonのデフォルトのHTMLを変更します。

ボタンのデフォルトHTML

<input name="%1$s" type="submit" id="%2$s" class="%3$s" value="%4$s" />

変更したHTML

<div class="submit-wrap"><button id="%2$s" class="%3$s">%4$s</button></div>

タグを<button>に変えて、id, class属性、ボタンのラベルはそのまま使います。そして、中央寄せ用にsubmit-wrapを追加しました。

コメントフォームの修正は以上です。あとはCSSに中央表示の処理を追加します。

中央表示のCSS

.submit-wrap {
  text-align: center;
}

これでコメントフォームのボタンだけを中央表示できます。ほかにもいろいろなカスタマイズができそうです。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

前の投稿

WordPress, wpコマンドが使えないとき確認すること

WordPress, データベースの内容を入れ替えるツール。コマンドラインで実行。

次の投稿

WordPressの本

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

WordPressの基本。
Webサイト作成から運用まで全体的に学ぶ。
かんたんなカスタマイズを学ぶ。
何も分からないところから学ぶ。
WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

WordPress Codexを読んでみた

やりたいことのヒントはソースコードにあった！

WordPressの本

新着記事