agag
@agag

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

カスタム投稿50音順並び(見出しあり+ナビ付)+カテゴリ絞り込みの実装について

解決したいこと

カスタム投稿にて
50音順並び(見出しあり+ナビ付)とカテゴリの絞り込みを連動させて実装したい。

まずは赤枠の箇所が実装できたらと考えてます。
image.png

『カテゴリによる絞り込み』
カテゴリボタンより各一覧ページへ絞り込み予定

『五十音順』各ボタンよりページ内スクロールさせてます。

発生している問題・エラー

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') );
  // 追加した箇所
  //製品案内(ここまで)
}

カスタムフィールドはラジオボタンで設定中
(テキストで設定しなければならないのなら変更可能)
image.png

現状確認できたこと

50音順並び(見出し+ナビ付)は反映されている。

各カテゴリボタンよりtaxonomy-tax_product.phpに飛んでいることはURLより確認済

自分で試したこと

ひとまず、
カスタム投稿50音順(見出しあり+ナビ付)は初めて実装するので、
先にこれが実装できる記事をひたすら調べ実装しました。

見出しありナビ付の記事があまりなく、唯一成功したのが上記のコードになります。

なので、解決に時間がかかりそうなので先に質問させていただきました。

他の方法を使って解決できないか、これから考えていきます。
プラグインや固定ページでそれっぽく実装できたら問題ないと考えています。

また、
後々フリーワード検索も実装しないといけないのですが・・・・

まだまだカスタム投稿やphpの知識が足りない分、
何かヒントでもご教授お願いできましたら幸いです。

0

No Answers yet.

Your answer might help someone💌