menu
スポンサーリンク

contactform7のチェックボックスに個別のclassをつける

2016年12月22日


備忘録も兼ねて投稿。
contactform7はwordpressでよく使われているお問い合わせプラグインです。
wordpressを使ってサイト制作をする場合はほぼ必ず導入しています。
今回ちょっと苦労したのは、表題の通り「contactform7のチェックボックスに個別のclassをつける」ことです。
contactform7でチェックボックスを作る場合、生成されたコードには全部自動で「wpcf7-list-item」というclassがつきます。
この場合、それぞれのチェックボックス毎によってデザインやレイアウトを変えたい場合(あまりないケースかもしれませんが)、cssも適用できないから結構困ります。
最初はjavascriptで指定の要素や場所にタグを追加しようとしましたが、(多分)DOM構築上の問題でうまく動作しませんでした。
contactform7に用意されているフィルターフックに「wpcf7_form_elements」という、タグ要素を構築していくときのフックがあるので、そちらを使ってphpでfunction.phpに下記を追記しました。

 
add_filter('wpcf7_form_elements', 'mycheckbox_custom');

function mycheckbox_custom ($form){
$form = preg_replace('<span class="wpcf7-list-item">', 'span class="wpcf7-list-item2"', $form,1);
return $form;
}

phpのpreg_replaceという関数を使ってどうにかこうにか実現できました…(笑)
preg_replaceはテキスト置き換え系の関数ですが、置き換える回数を指定できるので、デザインやレイアウト作成に一役買ってくれる関数です。

上記コードでは
form内の
<span class="wpcf7-list-item">

<span class="wpcf7-list-item2">に1回だけ置き換えてくれます。

回数を調整して、デザインやレイアウトの調整も可能です。

ただ、contactform7の正規化のタイミングの問題(多分)で「<」や「>」、「””、”」(クォーテーションマーク)などがうまく置き換わらず、ちょっと苦労しました。(なので上記コードでは置き換え部分の「<」や「>」は省略しています。あまりスマートではないですね。)

正規表現、DOM構築などに関しては疎いのでプログラミングの基礎部分や根幹部分をもっと勉強して問題解決にあたれるようになりたいものです。

連絡先など

MAIL mailmedian.weblike.jp
Skype median-weblike
所在地 東京都町田市

スポンサーリンク
スポンサーリンク

blog

プラットフォーム API 言語