質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

2回答

922閲覧

WordPress:カスタムフィールドの項目を用いたタブ切り替え

nemonote

総合スコア2

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2020/10/22 07:59

前提・実現したいこと

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

jqueryで強制的に重複している部分を非表示にすることで取り急ぎ対応できました。
最適解ではないとは思いますが、ひとまず問題無さそうなのでこちらで締めさせていただきます。
ご回答ありがとうございました。

投稿2020/10/22 14:31

nemonote

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

該当する Class 等に CSS で、visibility: hidden;display: none; を設定しておいて隠しておく等でしょうか。

で、切り替える際は、切り替えると...

投稿2020/10/22 11:15

CHERRY

総合スコア25171

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問