前提・実現したいこと
現在リフォームの一括見積もりのサイトを制作しています。
トップページにこれまでの事例などを表示させるのと、その内容をクライアント側で編集できるようにするために、Custom Post Type UIとAdvanced Custom Fieldsを合わせて使用しています。
まだ使い方をマスターしていないので今の方法が合っているかもわからないのですが、取り急ぎやりたいことは以下です。
- 見積もり事例を3件表示
- 表示するのはトップページのみ
- 各見積もり事例の詳細ページはなし
- どれか1つでも項目に入力がなかったら表示しない(ACFで作成した項目は全て入力必須)
- 見積もり事例が1つも入力されていなかったら、見積もり事例のセクションごと非表示にしたい
今の状況
h2タグの下にあるのは試しに「職業」のフィールドを持ってきてみているのですが、うまく表示されませんでした。
表示されているのは、「<?php the_field('age_pickup1', 131); ?>」の部分です。
<?php if ( have_posts() ) : ?> <section id="pickup__section" class="top__content"> <h2 class="section__headline">当サイト利用で<br class="headline__br">これだけお得に!</h2> <?php $pickup = array(); for ( $i = 0; $i < 3; $i++ ) { $pickup[$i]['age_pickup'] = get_field( 'age_pickup' . ( $i + 1 ) ); $pickup[$i]['sex_pickup'] = get_field( 'sex_pickup' . ( $i + 1 ) ); $pickup[$i]['job_pickup'] = get_field( 'job_pickup' . ( $i + 1 ) ); $pickup[$i]['before_image_pickup'] = get_field( 'before_image_pickup' . ( $i + 1 ) ); $pickup[$i]['after_image_pickup'] = get_field( 'after_image_pickup' . ( $i + 1 ) ); $pickup[$i]['address_pickup'] = get_field( 'address_pickup' . ( $i + 1 ) ); $pickup[$i]['tsubo_pickup'] = get_field( 'tsubo_pickup' . ( $i + 1 ) ); $pickup[$i]['type_pickup'] = get_field( 'type_pickup' . ( $i + 1 ) ); $pickup[$i]['build_age_pickup'] = get_field( 'build_age_pickup' . ( $i + 1 ) ); $pickup[$i]['comment_pickup'] = get_field( 'comment_pickup' . ( $i + 1 ) ); $pickup[$i]['estimate_a_pickup'] = get_field( 'estimate_a_pickup' . ( $i + 1 ) ); $pickup[$i]['estimate_b_pickup'] = get_field( 'estimate_b_pickup' . ( $i + 1 ) ); $pickup[$i]['estimate_c_pickup'] = get_field( 'estimate_c_pickup' . ( $i + 1 ) ); $pickup[$i]['how_much_pickup'] = get_field( 'how_much_pickup' . ( $i + 1 ) ); } ?> <?php for ( $i = 0; $i < count( $pickup ); $i++ ) : ?> <?php if( empty( $pickup[$i]['age_pickup'] ) ) { continue; /* 年代がなければスルー */ } ?> <section class="pickup__content"> <h3 class="pickup__headline"><?php echo $pickup[$i]['age_pickup']; ?>代<?php echo $pickup[$i]['sex_pickup']; ?>(<?php echo $pickup[$i]['job_pickup']; ?>)の見積り結果</h3> <div class="pickup__image"> <div class="pickup__image--bf"> <p> <?php if ( $pickup[$i]['before_image_pickup'] ) : ?> <img src="<?php echo $pickup[$i]['before_image_pickup']['url']; ?>" alt=""> <?php else : /* 画像の設定がなければデフォルトの画像 */ ?> <img src="http://demo.local/wp-content/uploads/2011/01/canola2.jpg" alt=""> <?php endif; ?> </p> </div> <div class="pickup__image--af"> <p> <?php if ( $pickup[$i]['after_image_pickup'] ) : ?> <img src="<?php echo $pickup[$i]['after_image_pickup']['url']; ?>" alt=""> <?php else : /* 画像の設定がなければデフォルトの画像 */ ?> <img src="http://demo.local/wp-content/uploads/2011/01/canola2.jpg" alt=""> <?php endif; ?> </p> </div> </div> <div class="pickup__attribute"> <dl class="pickup__attribute--address"> <dt>住所</dt> <dd><?php echo $pickup[$i]['address_pickup']; ?></dd> </dl> <dl class="pickup__attribute--size"> <dt>坪数</dt> <dd><?php echo $pickup[$i]['tsubo_pickup']; ?></dd> </dl> <dl class="pickup__attribute--type"> <dt>種別</dt> <dd><?php echo $pickup[$i]['type_pickup']; ?></dd> </dl> <dl class="pickup__attribute--age"> <dt>築年数</dt> <dd><?php echo $pickup[$i]['build_age_pickup']; ?></dd> </dl> </div> <div class="pickup__text"> <p> <?php echo $pickup[$i]['comment_pickup']; ?> </p> </div> <div class="pickup__comparison"> <div class="pickup__comparison--estimate"> <dl class="cheapest"> <dt>A社</dt> <dd><?php echo $pickup[$i]['estimate_a_pickup']; ?></dd> </dl> <dl> <dt>B社</dt> <dd><?php echo $pickup[$i]['estimate_b_pickup']; ?></dd> </dl> <dl> <dt>C社</dt> <dd><?php echo $pickup[$i]['estimate_c_pickup']; ?></dd> </dl> </div> <div class="pickup__comparison--difference"> <p>一括見積もりで</p> <p class="red__text"><span><?php echo $pickup[$i]['how_much_pickup']; ?></span>万円お得に!</p> </div> </div> </section> <?php endfor; ?> </section> <?php endif; ?>
試してみたこと
下記のページに書いてあることが自分の実現したいことに近かったので、こちらを参考にして上記コードを組みました。
https://haniwaman.com/template-page/
ただ、同じようにsingle-pickup.phpというテンプレートを作成し、そのテンプレートをトップページに読み込む形で表示させようとしたのですがうまく表示されませんでした。
<?php get_template_part('single-pickup'); ?>
問題点
さらにひとつ問題があり、ピックアップの投稿画面にはクライアントの利便性を担保するためにすでに3つの投稿を残しておきたいのですが、そうすると<?php if ( have_posts() ) : ?>による条件分岐が使えず、見積もり事例がまだ入力されていないときに非表示にするというのが実現できません。
現状のものからどのようにトップページに表示させるか、そして事例の入力がないときにどのように見積もり事例のセクション全体を消すことができるのか、お分かりになる方がいましたらぜひアドバイスお願い致します。
あなたの回答
tips
プレビュー