前回に引き続き、さあ、そろそろ面倒になってまいりました。
Contact Form 7 のカスタマイズ。
面倒になる = プラグインのコアソースを直いじりする。
元のクラスメンバやらががちがちのprivateだったりするっぽいので、そうしないとかなり面倒な遠回りをしないといけない気がするんですが、気のせい？
まあ細かいことは気にするな！
ここからは危険なカスタマイズのお時間だぜ！ ヒャッハー！
目次
落とし穴４： ショートコード動かへん・・・
問い合わせフォームテンプレート内にContact Form 7タグ以外のショートコードを書いても、動・・・ かないのか。
何かそうせざるを得ない理由があるんだろうなあ。
でも、ショートコード使いたいたいなあ。
使えないと困っちゃうなあ。
埋め立て作業４： ショートコード全部入りだぜ ヒャッハー！
有無を言わさずコアソースに手を入れて、プラグインの簡単アップデートと別れを告げます。
Contact Form 7の独自タグの処理メソッドの結果に、do_shortcodeを重ね掛けしてWordPress的なショートコードを動作させるという試みです。
おまるくんの利用用途なら安定していますが、前途の通り何か理由はあるはずなので保証はしません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
public function form_do_shortcode() { $manager = WPCF7_ShortcodeManager::get_instance(); $form = $this->prop( 'form' ); if ( WPCF7_AUTOP ) { $form = $manager->normalize_shortcode( $form ); $form = wpcf7_autop( $form ); } $form = $manager->do_shortcode( $form ); $this->scanned_form_tags = $manager->get_scanned_tags(); // ショートコード全部入り $form = do_shortcode($form); return $form; } |
落とし穴５： 見えないふりをしていたボタンの分断
エラーを取り纏めたぜ！！
とドヤ顔をしつつ、内心気付いてはいたんです。
だってさー、最初こうじゃーん？
ねえねえ、なんで住所検索ボタンが下に行ってるの？
埋め立て作業５： エラー表示位置を指定できるようにするぜ ヒャッハー！
エラーメッセージは基本、項目にベタ付きの模様。
script.jsのこの辺でどうこうしている感じですね。
|
1 2 3 4 5 6 |
if (data.invalids) { $.each(data.invalids, function(i, n) { $form.find(n.into).wpcf7NotValidTip(n.message); $form.find(n.into).find('.wpcf7-form-control').addClass('wpcf7-not-valid'); $form.find(n.into).find('[aria-invalid]').attr('aria-invalid', 'true'); ..... |
これに手を加えて、予め .wpc7-not-valid-tip-ex.name が存在していれば、そちらにエラーメッセージを設定、既存のエラーメッセージ生成を行わないようにしてみます。
|
1 2 3 4 5 6 7 8 9 10 11 |
$('.wpcf7-not-valid-tip-ex').text(''); if (data.invalids) { $.each(data.invalids, function(i, n) { var notvalidexclass = n.into.replace('wpcf7-form-control-wrap', 'wpcf7-not-valid-tip-ex'); if ($(notvalidexclass).length) { $(notvalidexclass).text(n.message); } else { $form.find(n.into).wpcf7NotValidTip(n.message); } $form.find(n.into).find('.wpcf7-form-control').addClass('wpcf7-not-valid'); $form.find(n.into).find('[aria-invalid]').attr('aria-invalid', 'true'); |
.wpc7-not-valid-tip-exは、CSS指定を引き継ぐ .wpc7-not-valid-tip.ex としたいところなんですが、エラーメッセージ初期化の際に、$(‘wpcf7-not-valid’).remove() とされていて消滅してしまうので致し方なく・・・ です。
このため、wpc7-not-valid-tipと同様のCSSを ex側にもどこかで指定してあげる必要があります。
今回は、該当の指定部分にexをそのまま追記しました。
|
1 2 3 4 5 |
span.wpcf7-not-valid-tip, span.wpcf7-not-valid-tip-ex { color: #f00; font-size: 1em; display: block; } |
そして前回からの流れを引き継ぐテンプレートに exなエラー表示箇所を追加して完成。
|
1 2 |
郵便番号:[text* zip1 class:digit mergeerror:zip2 minlength:3 maxlength:3 size:3]－[text* zip2 class:digit maxlength:4 minlength:4 size:4]<input type="button" onclick="AjaxZip3.zip2addr('zip1','zip2','prefecture','city');" value="住所検索" /> <span class="wpcf7-not-valid-tip-ex zip2"></span> |
落とし穴６ : 目に見えるものが全てと思うな！！
よしよし！ ちゃんと見た目がおかしくない感じにエラー表示がされるようになったー！！
見た目と言えばこの手の選択項目でありがちなこちら。
○男性 ○女性
のラジオボタンとか。
Contact Form 7では、選択肢のラベルそのままが値として渡るんですよね。
本来用途のメール文面では確かにいいんですが、Contact Form DBを併用して使ってたりして、格納されるのは男性=1、女性=2の方が痒い所に手が届くんだよなあ・・・。
ってケースがあります。
埋め立て作業６ : ラベルとは別の値を指定できるようにするぜ ヒャッハー！
方法論は色々あると思いますが、今回はヒャッハー！ で既にコアソースに手をつけちゃっているので、手間をかけずにコアソースを直接変更策を取ります。
ソースを見る限り、本当はその辺を出来るように だったんじゃないかな？ と。
$scanned_tag[‘labels’] = $scanned_tag[‘values’];
で全てが無に帰してますが。
value:label で指定できるような機能を
shortcodes.phpのこのあたりを変更して追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
if ( WPCF7_USE_PIPE ) { $pipes = new WPCF7_Pipes( $scanned_tag['raw_values'] ); $scanned_tag['values'] = $pipes->collect_befores(); $scanned_tag['pipes'] = $pipes; } else { $scanned_tag['values'] = $scanned_tag['raw_values']; } $scanned_tag['labels'] = $scanned_tag['values']; // ラベルと値を別に設定できるようにする foreach ($scanned_tag['values'] as $i => $v) { $v = explode(':', $v); // "値:ラベル"の書式だったら if (count($v) > 1) { // 値とラベルを各々設定 $scanned_tag['values'][$i] = $v[0]; $scanned_tag['labels'][$i] = $v[1]; } } } else { $scanned_tag['attr'] = $attr; } |
直前で代入等をしてる $pipes が何をしているかきちんと追ってないので、利用方法によってはうまく動かないかもしれません。
一抹の不安を抱えつつ、こんな風なタグ指定をすれば・・・。
|
1 |
[radio gender "1:男性" "2:女性"] |
表示も、格納された値もOK!
俺たちの戦いはまだ続きそうだ！
そろそろ戦いも終焉かなあ・・・。
と動作チェックをしていたら、nginxで急にキャッシュが効かなくなっているのに気づきました。
おい、誰だ！？ HTTPヘッダにno-cacheくっつけてるのは？
犯人捜しをしていたら、見つけました。
フォームに確認機能を追加する、Contact Form 7 Add Confirmプラグインだ！
|
1 2 3 4 5 |
function wpcf7c() { wpcf7c_load_textdomain(); wpcf7c_load_modules(); nocache_headers(); } |
プラグイン合わせ技で便利になる反面、想定外の動作も増えていく感じなんだなあ。
今後も思いもしない場所で戦いが勃発しそうな予感です。
簡単！ シンプル！ Contact Form 7 をぜひご活用ください！
ベタ書きでフォーム諸々を作れるなら自作をお勧めは、します・・・。
コメント
Es un problema muy grave que puede generar grandes complicaciones a nivel de pareja y personal. impotencia masculina
Muchos hombres desean hacer el amor toda la noche y satisfacer plenamente a su pareja, pero no pueden hacerlo debido a su problema sexual. No es tan extraño en las nuevas relaciones, donde el hombre puede estar nervioso sobre el encuentro sexual y con ganas de impresionar a su pareja.
However, because there is such a wide spectrum of causes of erectile dysfunction, shockwave therapy is currently only known to work in a subset of these patients, particularly those where the damage has resulted from diabetes or hypertension.