前回WordPressのフォームプラグイン「Snow Monkey Forms」の、デザインカスタマイズ方法をご紹介しました。
WordPressのフォームプラグイン「Snow Monkey Forms」で、どこまでデザインカスタマイズできるか試してみた
今回は「Snow Monkey Forms」のフォーム項目のカスタマイズを行っていきたいと思います。
セレクトボックスの選択肢を、固定のテキストではなく記事一覧から自動生成したいと思ったことはありませんか？
例えば、イベントの申し込みフォームで参加したいイベントを選んで申し込んでもらう場合、
イベントをカスタム投稿タイプに登録し、その記事タイトルをセレクトボックスに自動で出せたら便利ですよね。
本記事では、WordPressのカスタム投稿タイプの記事を「Snow Monkey Forms」のセレクトボックスに表示する方法をご紹介します。
要件
・カスタム投稿に記事を追加すると、フォームの選択肢に記事タイトルが自動で反映される
・記事を更新するたびにフォームの選択肢を手動で編集する必要がなくなる
これにより、カスタム投稿タイプに登録したイベント記事をフォームのセレクトボックスに動的に生成できるため、
イベントの記事だけを更新して、そのイベントの選択肢を申し込みフォームに追加するのを忘れる等の事故が防止できます。
作成環境
・WordPress バージョン 6.8.2
【プラグイン】
・Snow Monkey Forms バージョン 11.0.0
・Custom Post Type UI バージョン 1.18.0
※プラグインのインストールや基本的な使い方については本記事では割愛します。
実装手順
フォームを作成する
まず「Snow Monkey Forms」でフォームを作成します。
フォームにセレクトボックスフィールドを追加し、
セレクトボックスのname属性を、custom-post-selector に設定します。
このname属性が、あとでコードで参照するキーになります。
カスタム投稿タイプを作成し、記事を登録する
次に、フォームに選択肢として表示したいカスタム投稿タイプを作成します。
今回はプラグイン「Custom Post Type UI」で、event というスラッグのカスタム投稿タイプを作成しました。
そして、作成したカスタム投稿タイプに、「◯月◯日イベントA」のように記事を登録します。
functions.php にコードを追加
functions.phpに次のコードを追加します。
※functions.phpの編集は、記述間違いがあるとサイト全体がエラーになることもあり、
変更時はバックアップをとるなど注意が必要です。
編集は自己責任でお願いいたします。
//カスタム投稿の記事タイトルを、セレクトボックスに自動生成する
add_filter( 'snow_monkey_forms/select/options', function( $options, $name, $field ) {
// 対象のname属性 custom-post-selector を指定
if ( 'custom-post-selector' !== $name ) {
return $options;
}
// カスタム投稿タイプの記事を取得
$posts = get_posts( [
'post_type' => 'event', // ←カスタム投稿タイプのスラッグ
'posts_per_page' => -1,
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'ASC',
] );
// 選択肢を作成
$options = [];
foreach ( $posts as $post ) {
$title = get_the_title( $post );
$options[ $title ] = $title;
}
return $options;
}, 10, 3 );
動作確認
作成したフォームをサイトに設置して表示を確認します。
登録したイベント記事のタイトルがセレクトボックスに並んでいることが確認できます。
これで新しいイベント記事を追加すると、自動でセレクトボックスに反映されるようになりました。
まとめ
今回は「Snow Monkey Forms」で、カスタム投稿タイプの記事をセレクトボックスに自動反映する方法を紹介しました。
これで、イベント申し込みフォームなどをより効率的に運用できるようになります。
今回は記事タイトルを反映させましたが、カスタムフィールドの値を反映するなどのカスタマイズも可能です。
カスタムフィールドに開催日を設定し、開催日を過ぎたらセレクトボックスから自動で非表示にするなどの設定もできます。
弊社ではサイト制作や保守管理サービスを行っていますので、
分からない、上手くいかないなどがございましたら代行いたしますのでご連絡ください。
他にもサーバー・ネットワーク保守なども行っておりますので、ネットワークのことなら全てネディアにおまかせください。
![群馬の法人ITサポートサービス Wide Net[ワイドネット]](https://www.nedia.ne.jp/wp-content/themes/nedia/images/bnr_bt_widenet02.png "群馬の法人ITサポートサービス Wide Net[ワイドネット]")
![群馬の法人ITサポートサービス Wide Net[ワイドネット]](https://www.nedia.ne.jp/wp-content/themes/nedia/images/bnr_bt_widenet03.png "群馬の法人ITサポートサービス Wide Net[ワイドネット]")
