テクノロジー

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

mizuno's icon'
  • mizuno
  • 2020/04/11 06:18
Content image

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_buttonjetpack_contact_form_submit_button_classフィルターフックに追加することで完成です。

 

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

 

Article tip 0人がサポートしています
獲得ALIS: Article like 50.27 ALIS Article tip 0.00 ALIS
mizuno's icon'
  • mizuno
  • @mizuno
月70万PVウェブメディア「計算フォーム」 https://calculator.jp/ でウェブ集客支援。書籍「WordPressユーザーのためのPHP入門」他一冊。TWITTER: @ounziw

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
クリプト

ブロックチェーンの51%攻撃ってなに

Like token Tip token
0.00 ALIS
Eye catch
テクノロジー

なぜ、素人エンジニアの私が60日間でブロックチェーンゲームを制作できたのか、について語ってみた

Like token Tip token
270.93 ALIS
Eye catch
他カテゴリ

機械学習を体験してみよう!(難易度低)

Like token Tip token
124.82 ALIS
Eye catch
クリプト

17万円のPCでTwitterやってるのはもったいないのでETHマイニングを始めた話

Like token Tip token
46.60 ALIS
Eye catch
テクノロジー

オープンソースプロジェクトに参加して自己肯定感を高める

Like token Tip token
85.05 ALIS
Eye catch
ゲーム

ドラクエで学ぶオーバフロー

Like token Tip token
30.10 ALIS
Eye catch
テクノロジー

彼女でも分かるように解説:ディープフェイク

Like token Tip token
32.10 ALIS
Eye catch
クリプト

スーパーコンピュータ「京」でマイニングしたら

Like token Tip token
1.06k ALIS
Eye catch
クリプト

「ハッシュ」とは何なのか、必ず理解させます

Like token Tip token
0.10 ALIS
Eye catch
クリプト

約2年間ブロックチェ-ンゲームをして

Like token Tip token
61.20 ALIS
Eye catch
クリプト

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

Like token Tip token
947.13 ALIS
Eye catch
クリプト

ジョークコインとして出発したDogecoin(ドージコイン)の誕生から現在まで。注目される非証券性🐶

Like token Tip token
38.31 ALIS