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

  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
wordpress image
イラストACの画像をもとに加工しています。

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

Codexにも書いていないことで、ソースコードを読む羽目になったので、すぐ忘れることは確実です。備忘録として残します。

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

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

して、オリジナルのコメントフォームを作成します。

でもこのカスタマイズは、Codexを見るとできることが限られています。コメントの送信ボタンについては、ボタンの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の本
post-cta-image

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

  • WordPressの基本
  • Webサイト作成から運用まで全体的に学ぶ
  • ブログサイトの運営からサイトの収益化を学ぶ
  • サイト作成・運営 + 集客の方法を学ぶ
  • WordPressからPHPプログラミングを学ぶ

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

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


WordPressの本5選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!