WordPressでお問い合わせフォームなどを簡単に作成できるプラグイン「MW WP Form」で、ラジオボタンやチェックボックスに画像を使う例を紹介します。
カスタム投稿のサムネイルを選択項目にする
今回は「MW WP Formで選択項目の値をフックでいろいろ変更したい」を流用するかたちで、カスタム投稿のサムネイル（アイキャッチ画像）をフォームの選択項目（サンプルではラジオボタン。チェックボックスでも可）にしてみます。
MW WP Formでの設定
まずはサムネイル画像で選択する選択項目のフォームタグを「フォームタグを追加」ボタンで追加します。name属性はもちろん、今回はid属性も入力します。サンプルではラジオボタンを選択、idは「product」でフォームに追加しています。選択肢は関数で入れるので空でOK。
[mwform_radio name="プロダクト" id="product"]functions.php
カスタム投稿のタイトルを選択項目（ラジオボタン）に入れるfunctions.phpの記述例です。XXXの部分はフォーム識別子になります。
// MW WP Formのラジオボタンにカスタム投稿のタイトルを入れる
function form_products_list( $children, $atts ) {
/* 値を入れるラジオボタンのname属性を指定（サンプルでは「プロダクト」） */
if ( $atts['name'] == 'プロダクト' ) {
/* get_posts()関数で値にするカスタム投稿の配列を取得 */
$products = get_posts( array(
'post_type' => 'product',
'posts_per_page' => -1,
) );
/* 取得した配列からタイトルだけを抽出 */
foreach ( $products as $product ) {
$children[$product->post_title] = $product->post_title;
}
}
return $children;
}
add_filter( 'mwform_choices_mw-wp-form-XXX', 'form_products_list', 10, 2 );次にフォームのページにカスタム投稿のサムネイルリストを出力する関数も作成します。作った関数はフォームが作られるテンプレート内に記述しておきましょう。サブクエリを直接テンプレートに書いても問題ありません。
// サムネイル版商品リスト生成する関数
function products_img_list() {
/* get_posts()関数で値にするカスタム投稿の配列を取得 */
$products = get_posts( array(
'post_type' => 'product',
'posts_per_page' => -1,
) );
/* サムネイル版商品リストのラッパー（サンプルではアンオーダーリスト） */
$output = '<ul>';
/* 商品数をカウント */
$product_count = 1;
/* 取得した配列から必要な情報だけを抽出 */
foreach ( $products as $product ) {
/* サムネイルの登録があるかチェック */
if( has_post_thumbnail( $product ) ) {
/* サムネイルがある場合の処理 */
$thumbnail = '<img src="'.get_the_post_thumbnail_url( $post = $product, $size = 'thumbnail' ).'" alt="'.$product->post_title.'">';
/* get_the_post_thumbnail_url( $product, 'thumbnail' )でも可 */
} else {
/* サムネイルがない場合の処理（デフォルト画像を用意しておくとよいかも） */
$thumbnail = $product->post_title;
}
/* labelのfor属性にMW WP Formで指定したIDと'-'（ハイフン）、そして商品カウントを入れます */
$output .= '<li><label for="product-'.$product_count.'">'.$thumbnail.'</label></li>';
/* 商品数を1足します */
$product_count++;
}
/* ラッパー */
$output .= '</ul>';
/* アウトプット！ */
return $output;
}has_post_thumbnail()関数でサムネイル（アイキャッチ画像）があるかを判別、trueならget_the_post_thumbnail_url()関数で画像のURLを取得してきます。今回はfalseの場合はタイトルを出力する設定ですが、サムネイルがない場合も考えてデフォルト（NoImageなど）画像があると見栄えが整います。
そして大事なのが次の部分（抜粋）。
/* labelのfor属性にMW WP Formで指定したIDと'-'（ハイフン）、そして商品カウントを入れます */
$output .= '<li><label for="product-'.$product_count.'">'.$thumbnail.'</label></li>';labelタグのfor属性で、フォームの選択項目のID「product」と連携させています。MW WP Formの選択項目は指定したidに「-（ハイフン）」と数字が入るので、$product_countでこの数字を合わせることで、フォームの選択項目と連動することができます。
コメントを残す