ContactForm7のプルダウンは
[select menu-469 "タイトル1" "タイトル2" "タイトル3"]
こんな感じで設定しますが、グループにしたい場合もあります。
標準ではグループに対応していません。
参考:Contact Form 7でoptgroupを使う方法 – Daily GLOCALISM
functions.php
<?php add_action('wp_footer', 'cf7_optlabel'); function cf7_optlabel(){ global $post; $pos = strpos($post->post_content, '[contact-form-7 '); if( $pos === false ) return; ?> <script> jQuery(function() { //Search for optgroup- items var foundin = jQuery('option:contains("optgroup-")'); jQuery.each(foundin, function(value) { //remove optgroup prefix var updated = jQuery(this).val().replace("optgroup-",""); //replace items with optgroup tag var replaced = jQuery(this).replaceWith('<optgroup label="'+ updated +'">'); }); var foundin2 = jQuery('option:contains("endoptgroup")'); jQuery.each(foundin2, function(value) { //replace items with </optgroup> tag var replaced = jQuery(this).replaceWith('</optgroup>'); }); }); </script> <?php }
※ブログに掲載する都合上、7を大文字にしています。
このコードを入れ、フォームの中は
[select menu-469 "optgroup-グループ1" "タイトル1" "タイトル2" "endoptgroup" "optgroup-グループ2" "タイトル3" "endoptgroup"]
にする。
しかし・・・・
optgroupタグで挟まれたキレイなHTMLにはならない。(残念・・・
次にこちらの回答を試してみました。
フォームは同じです。
[select menu-469 "optgroup-グループ1" "タイトル1" "タイトル2" "endoptgroup" "optgroup-グループ2" "タイトル3" "endoptgroup"]
functions.php
<?php add_action('wp_footer', 'cf7_optlabel'); function cf7_optlabel(){ global $post; $pos = strpos($post->post_content, '[contact-form-7 '); if( $pos === false ) return; ?> <script> // contact us form - change out optgroup labels jQuery(function() { // search for parent_ items var foundin = jQuery('option:contains("optgroup-")'); jQuery.each(foundin, function(value) { var updated = jQuery(this).val().replace("optgroup-",""); // find all following elements until endoptgroup jQuery(this).nextUntil('option:contains("endoptgroup")') .wrapAll('<optgroup label="'+ updated +'"></optgroup'); }); // remove placeholder options jQuery('option:contains("optgroup-")').remove(); jQuery('option:contains("endoptgroup")').remove(); }); </script> <?php }
※ブログに掲載する都合上、7を大文字にしています。
こちらはキレイなHTMLタグになります。
と言うことで今回は下段のコードを使用しました。
日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)