前提・実現したいこと
WordPressのarchivesページにて、カスタムフィールドで設定した項目に関連付けられた記事を
タブUIを用いて表示切り替えを行いたいと考えています。
「タブUI内容」
①全ての記事※初期表示
②カスタムフィールド項目A
③カスタムフィールド項目B
④カスタムフィールド項目C
⑤カスタムフィールド項目D
それぞれのループ処理を行い、jQueryで表示切り替えを実装しています。
各項目での切り替えは問題ないのですが、全ての記事において初期表示に②〜⑤の記事が含まれてしまい、重複表示になってしまいます。
WP記事読み込み→js処理等の順番で処理が行われているからだと予想できるのですが・・・。
全ての記事(初期表示時)に②〜⑤の表示を除外するにはどのように処理を行えばよいでしょうか?
該当のソースコード
■カスタムフィールド名
product_cat
■フィールドタイプ
ラジオボタン
■項目
necklace : ネックレス
bracelet : ブレスレット/アンクレット
pierce : ピアス/イヤリング
other : その他
archives
1<div class="tab"> 2 <ul class="tab_list"> 3 <li class="tab_item"><a href="#tab0">すべて</a></li> 4 <li class="tab_item"><a href="#tab1">ネックレス</a></li> 5 <li class="tab_item"><a href="#tab2">ブレスレット/アンクレット</a></li> 6 <li class="tab_item"><a href="#tab3">ピアス/イヤリング</a></li> 7 <li class="tab_item"><a href="#tab4">その他</a></li> 8 </ul> 9</div> 10 11<div class="galleryList" id="tab0"> 12 <?php 13 $args = array( 14 'posts_per_page' => 9, 15 'post_type' => 'gallery', 16 ); 17 $posts = get_posts($args); 18 foreach ($posts as $post): setup_postdata($post); 19 ?> 20 21 <div class="galleryList_item _page tab_content"> 22 <a class="galleryList_itemLink" href="<?php echo get_permalink($post->ID); ?>"> 23 <?php $image01 = get_field('product_image01'); if (!empty($image01)): ?> 24 <img class="gallerydetail_itemPic" src="<?php echo $image01['url']; ?>" alt="<?php echo $image01['alt']; ?>"> 25 <h3 class="galleryList_itemTitle"><?php echo get_the_title($post->ID); ?></h3> 26 </a> 27 </div> 28 <?php endif; ?> 29 <?php endforeach; ?> 30 <?php wp_reset_postdata(); ?> 31 </div> 32 33 <div class="galleryList" id="tab1"> 34 <?php 35 $args = array( 36 'posts_per_page' => 9, 37 'post_type' => 'gallery', 38 'meta_key' => 'product_cat', //カスタムフィールドのキー 39 'meta_value' => 'necklace', //カスタムフィールドの値 40 'meta_compare' => 'LIKE', //'meta_value'のテスト演算子 41 ); 42 $posts = get_posts($args); 43 foreach ($posts as $post): setup_postdata($post); 44 ?> 45 46 <div class="galleryList_item _page tab_content"> 47 <a class="galleryList_itemLink" href="<?php echo get_permalink($post->ID); ?>"> 48 <?php $image01 = get_field('product_image01'); if (!empty($image01)): ?> 49 <img class="gallerydetail_itemPic" src="<?php echo $image01['url']; ?>" alt="<?php echo $image01['alt']; ?>"> 50 <h3 class="galleryList_itemTitle"><?php echo get_the_title($post->ID); ?></h3> 51 </a> 52 </div> 53 <?php endif; ?> 54 <?php endforeach; ?> 55 <?php wp_reset_postdata(); ?> 56 </div> 57 58 59 <div class="galleryList" id="tab2"> 60 <?php 61 $args = array( 62 'posts_per_page' => 9, 63 'post_type' => 'gallery', 64 'meta_key' => 'product_cat', //カスタムフィールドのキー 65 'meta_value' => 'bracelet', //カスタムフィールドの値 66 'meta_compare' => 'LIKE', //'meta_value'のテスト演算子 67 ); 68 $posts = get_posts($args); 69 foreach ($posts as $post): setup_postdata($post); 70 ?> 71 72 <div class="galleryList_item _page tab_content"> 73 <a class="galleryList_itemLink" href="<?php echo get_permalink($post->ID); ?>"> 74 <?php $image01 = get_field('product_image01'); if (!empty($image01)): ?> 75 <img class="gallerydetail_itemPic" src="<?php echo $image01['url']; ?>" alt="<?php echo $image01['alt']; ?>"> 76 <h3 class="galleryList_itemTitle"><?php echo get_the_title($post->ID); ?></h3> 77 </a> 78 </div> 79 <?php endif; ?> 80 <?php endforeach; ?> 81 <?php wp_reset_postdata(); ?> 82 </div> 83 84 <div class="galleryList" id="tab3"> 85 <?php 86 $args = array( 87 'posts_per_page' => 9, 88 'post_type' => 'gallery', 89 'meta_key' => 'product_cat', //カスタムフィールドのキー 90 'meta_value' => 'pierce', //カスタムフィールドの値 91 'meta_compare' => 'LIKE', //'meta_value'のテスト演算子 92 ); 93 $posts = get_posts($args); 94 foreach ($posts as $post): setup_postdata($post); 95 ?> 96 97 <div class="galleryList_item _page tab_content"> 98 <a class="galleryList_itemLink" href="<?php echo get_permalink($post->ID); ?>"> 99 <?php $image01 = get_field('product_image01'); if (!empty($image01)): ?> 100 <img class="gallerydetail_itemPic" src="<?php echo $image01['url']; ?>" alt="<?php echo $image01['alt']; ?>"> 101 <h3 class="galleryList_itemTitle"><?php echo get_the_title($post->ID); ?></h3> 102 </a> 103 </div> 104 <?php endif; ?> 105 <?php endforeach; ?> 106 <?php wp_reset_postdata(); ?> 107 </div> 108 109 <div class="galleryList" id="tab4"> 110 <?php 111 $args = array( 112 'posts_per_page' => 9, 113 'post_type' => 'gallery', 114 'meta_key' => 'product_cat', //カスタムフィールドのキー 115 'meta_value' => 'other', //カスタムフィールドの値 116 'meta_compare' => 'LIKE', //'meta_value'のテスト演算子 117 ); 118 $posts = get_posts($args); 119 foreach ($posts as $post): setup_postdata($post); 120 ?> 121 122 <div class="galleryList_item _page tab_content"> 123 <a class="galleryList_itemLink" href="<?php echo get_permalink($post->ID); ?>"> 124 <?php $image01 = get_field('product_image01'); if (!empty($image01)): ?> 125 <img class="gallerydetail_itemPic" src="<?php echo $image01['url']; ?>" alt="<?php echo $image01['alt']; ?>"> 126 <h3 class="galleryList_itemTitle"><?php echo get_the_title($post->ID); ?></h3> 127 </a> 128 </div> 129 <?php endif; ?> 130 <?php endforeach; ?> 131 <?php wp_reset_postdata(); ?> 132 </div>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。