カスタム投稿50音順並び(見出しあり+ナビ付)+カテゴリ絞り込みの実装について
解決したいこと
カスタム投稿にて
50音順並び(見出しあり+ナビ付)とカテゴリの絞り込みを連動させて実装したい。
『カテゴリによる絞り込み』
カテゴリボタンより各一覧ページへ絞り込み予定
『五十音順』各ボタンよりページ内スクロールさせてます。
発生している問題・エラー
50音順とカテゴリの絞り込みが連動していないことが判明
taxonomy-tax_product.phpでカテゴリが絞りこめておらず、
archive-product.phpと同じ50音順の表示になる。
(例:カテゴリ01の一覧ページにもかかわらずカテゴリ02,03,04の投稿記事も表示されている)
該当するソースコード
▼archive-product.php▼
▼taxonomy-tax_product.php▼
※クラス名は気にしないでください。
<article id="client" class="client">
<div class="search_box">
<div class="content">
<div class="category_box">
<span>カテゴリによる絞り込み</span>
<ol class="cat_list flex_box">
<li>
<a class="active" href="<?php echo esc_url( home_url( 'product' ) ); ?>">全て</a>
</li>
<?php wp_list_categories(array('title_li' => '', 'taxonomy' => 'tax_product')); ?>
</ol>
</div>
</div>
</div>
<ul class="search_list">
<?php
$furigana = 'yomi'; //acfのフィールド名
$nav_id = 'furigana_nav_'; //ナビゲーションID 冒頭
$en_abcd = "abcd";
$en_efgh = "efgh";
$en_ijkl = "ijkl";
$en_mnop = "mnop";
$en_qrst = "qrst";
$en_uvwxyz = "uvwxyz";
$jp_agyo = "あいうえお";
$jp_kagyo = "かきくけこがぎぐげご";
$jp_sagyo = "さしすせそざじずぜぞじゃじゅじょ";
$jp_tagyo = "たちつてとだぢづでど";
$jp_nagyo = "なにぬねの";
$jp_hagyo = "はひふへほばびぶべぼぱぴぷぺぽびゅ";
$jp_magyo = "まみむめも";
$jp_yagyo = "やゆよ";
$jp_ragyo = "らりるれろ";
$jp_wagyo = "わをん";
$mojilist = array($en_abcd,$en_efgh,$en_ijkl,$en_mnop,$en_qrst,$en_uvwxyz,$jp_agyo,$jp_kagyo,$jp_sagyo,$jp_tagyo,$jp_nagyo,$jp_hagyo,$jp_magyo,$jp_yagyo,$jp_ragyo,$jp_wagyo);
$mojilabel = array("A-D","E-H","I-L","M-P","Q-T","U-Z","あ","か","さ","た","な","は","ま","や","ら","わ");
$args = Array(
'post_type' => 'product', //投稿タイプを指定
'posts_per_page' => '-1',
'meta_key' => $furigana,
'orderby' => 'meta_value',
'order' => 'ASC',
);
$wp_query = new WP_Query($args);
$i = 0;
$display = [];
$nav_list = [];
if ( have_posts() ):
while ( have_posts() ) : the_post();
$first_word = get_field($furigana);
$first_word = mb_substr($first_word, 0, 1);
foreach ($mojilist as $index=>$value):
$pos = strpos($value, $first_word);
if($pos !== false){
if($i == 0){
//最初のみ
//見出し
$heading = '<li class="list_box"><div class="content"><h2 id="'.$nav_id.$index.'"><span>'. $mojilabel[$index] .'</span></h2><ul class="sub_list"">';
array_push($display, $heading);
//ナビゲーション
$nav = '<li><a href="#'.$nav_id.$index.'">'. $mojilabel[$index] .'</a></li>';
array_push($nav_list, $nav);
$num = $index;
$i = $i + 1;
}else{
if($num != $index){
//見出し
$heading = '</ul></div></li><li class="list_box"><div class="content"><h2 id="'.$nav_id.$index.'"><span>'. $mojilabel[$index] .'</span></h2><ul class="sub_list">';
array_push($display, $heading);
//ナビゲーション
$nav = '<li><a href="#'.$nav_id.$index.'">'. $mojilabel[$index] .'</a></li>';
array_push($nav_list, $nav);
$num = $index;
}
}
$single_link = get_permalink();
$single_title = get_the_title();
$single = '<li><a href="'.$single_link.'">'.$single_title.'</a></li>';
array_push($display, $single);
}
endforeach; endwhile; endif;
//ナビゲーション 出力
if($nav_list){
echo '<div class="order_box"><nav><span>五十音順</span><ul class="order_list flex_box">';
foreach ($nav_list as $value){
echo $value;
}
echo '</ul></nav></div>';
}
//コンテンツ 出力
if($display){
foreach ($display as $value){
echo $value;
}
echo '</ul></div></li>';
}
?>
</ul>
</article>
<!--/ 取引先リスト -->
▼function.php▼
//カスタム投稿
add_action( 'init', 'create_post_type' );
function create_post_type() {
//製品案内(ここから)
register_post_type('product', array(
'labels' => array(
'name' => '製品案内',
'singular_name' => '製品案内',
),
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => 5,
'supports' => array('title', 'editor', 'thumbnail'),
'menu_icon' => 'dashicons-edit'//追記
));
// 追加した箇所
register_taxonomy('tax_product',array('product'), array(
'hierarchical' => true,
'label' => 'カテゴリー',
'show_ui' => true,
'public' => true
));
register_taxonomy_for_object_type( 'tax_product', array('product') );
// 追加した箇所
//製品案内(ここまで)
}
カスタムフィールドはラジオボタンで設定中
(テキストで設定しなければならないのなら変更可能)
現状確認できたこと
50音順並び(見出し+ナビ付)は反映されている。
各カテゴリボタンよりtaxonomy-tax_product.phpに飛んでいることはURLより確認済
自分で試したこと
ひとまず、
カスタム投稿50音順(見出しあり+ナビ付)は初めて実装するので、
先にこれが実装できる記事をひたすら調べ実装しました。
見出しありナビ付の記事があまりなく、唯一成功したのが上記のコードになります。
なので、解決に時間がかかりそうなので先に質問させていただきました。
他の方法を使って解決できないか、これから考えていきます。
プラグインや固定ページでそれっぽく実装できたら問題ないと考えています。
また、
後々フリーワード検索も実装しないといけないのですが・・・・
まだまだカスタム投稿やphpの知識が足りない分、
何かヒントでもご教授お願いできましたら幸いです。
0 likes