WordPress問い合わせフォームのボタン装飾をテーマの装飾に変更する

WordPressでは、テーマを変更すると、ウェブサイトの見た目をがらっと変えることができます。便利な一方で、フォーム等の装飾は、テーマを変えると全部変わるとは限りません。

実際に「ブックレコメンド寄稿者募集」では問い合わせフォームはJetpack、テーマはSnow Monkeyという使い方をしていますが、この組み合わせだとデフォルトではフォームのボタン(申し込む)に、テーマの装飾が反映されない状態でした。

テーマの装飾を反映させたい

多くのテーマでは、ボタン装飾の設定(スタイルシート)が用意されています。なので、まずはテーマのスタイルシートを確認してみます。そうすると、Snow Monkeyでは、smb-btnというCSSクラスが用意されていました。このクラスをボタンに割り当てれば、テーマのボタン装飾が反映されます。

プラグインのフックを調べる

さて、次に調べるのは、プラグインのフックです。プラグインにもよりますが、テーマからCSSクラスを割り当てられるようになっていることが多いです。Jetpackプラグインの場合は、jetpack_contact_form_submit_button_classというフィルターフックが用意されていました。このフックを使えば、フォームのボタンにCSSクラスを割り当てできそうです。

実際に書いたコード

// 申し込みボタンをテーマに合わせる
function add_class_to_submit_button( $classname ) {
    $classname .= ' smb-btn';
    return $classname;
}
add_filter( 'jetpack_contact_form_submit_button_class', 'add_class_to_submit_button' );

上のように、CSSクラスを追加する関数add_class_to_submit_buttonを定義し、この関数add_class_to_submit_buttonをjetpack_contact_form_submit_button_classフィルターフックに追加することで完成です。

その他の記事もごらんください。