カスタム投稿のパラメータを動的に取得するには？

Question

カスタム投稿のカテゴリのスラッグを動的に取得したいと思っています。
現状として、

<ul class="menu1">
<li class="menu1_cat selected" data-id="all">全て</li>
<?php $categories = get_categories(array('taxonomy' => 'カスタム投稿名')); if ( $categories ) : ?>
<?php foreach ( $categories as $category ): ?>
<li class="menu1_cat <?php echo $category->slug ?>" data-id="<?php echo $category->slug ?>"><?php echo wp_specialchars( $category->name ); ?></li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
<div class="all">
<ul class="all_box">
<?php $args = array(
        'post_type' => 'カスタム投稿名',
        'breadcat' => $click); ?> 
　<?php $my_query = new WP_Query( $args ); ?>
　<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?><!--ループ開始-->
　<li>
〜〜省略〜〜
 </li>
 <?php endwhile; ?><!--ループ終了-->
</ul>
<?php wp_reset_postdata(); ?>

上のPHPに対して、

  $('.menu1_cat').on('click',function(){
    $('.selected').removeClass("selected"),
    $(this).addClass('selected');
    var click=$(this).data('id'); $(".menu1_cat").removeClass().addClass(click).addClass('menu1_cat');
  });

このようなJSを使い、
（今後増える予定のある）カテゴリ名を全て出力してできた ul.menu1の中の、
li.menu1_catをクリックすることで、
.selectedを持つliが代わり、さらにクリックされたliがもつdata-id（＝スラッグ名）を
下のul.allboxにクラスとして付加させる、という動作を行なっています。

ここで得たdata-idを上のPHP11行目のarrayにも呼び出したいのですが

<?php $args = array(
        'post_type' => 'カスタム投稿名',
        'breadcat' => $click); ?> 

jsをfooterで読み込んでいるためか（？）
$clickという変数を認識してくれません。
この$clickに動的にdata-idを読み込むにはどうすれば良いでしょうか。

拙い説明ですが、ご教授ください。

12/9追記

  //商品紹介タブ切り替え
  $('.menu1_cat').on('click',function(){
    $('.selected').removeClass("selected"),
    $(this).addClass('selected');
    var click=$(this).data('id');
    $(".menu1_cat").removeClass().addClass(click).addClass('menu1_cat');
    $.get('/bread',{breadcat:$(this).data('id')});
  });
  
});//$(function () {var $win = $(window);　を閉じている

Answer 1

現在のコードでは、kei344様の回答の通り無理かajax使うしかないです。

おそらくされたい内容としては、カテゴリの絞り込み条件を変えたいという事だと思いますので、
getパラメータがついても問題ないのであれば、clickイベントの際に
GETパラメータ付き(?breadcat=xxx)のURLへ移動。
$_GET[‘breadcat’]をargs内のbreadcatの値にするかですね。(無かったらデフォルト値とか。)

Comments

[xminimx]

回答ありがとうございます。
実現させたい内容はおっしゃる通りなのですが
今後、非管理下でカテゴリが増える可能性があるのです。
その際はご教授いただいた内容で対応できるのでしょうか。

[madone99]

カテゴリが増えたとしても、li要素のslugを正しく設定していれば問題ありません。

[xminimx]

JSに
$('.menu1_cat').on('click',function(){
$('.selected').removeClass("selected"),
$(this).addClass('selected');
var click=$(this).data('id');
$(".menu1_cat").removeClass().addClass(click).addClass('menu1_cat');
$.get('breadcat',{
breadcat:$(this).data('id')
});
});
6行目以降を追加し
PHPを
<?php $args = array(
'post_type' => 'カスタム投稿名',
'breadcat' => $_GET[‘breadcat’])); ?>
としてみました。
リストメニューをクリックすると
http://ドメイン/ページ/breadcat?breadcat=スラッグ名 が読み込まれているようですが、404エラーとなっています。
このスラッグ名をargsに読み込ませるにはJSの方にさらに追記する必要があるのでしょうか。

[madone99]

そもそもですが、argsで指定しているbreadcatは有効な引数なんでしょうか？
デフォルトではcategory_nameだと思いますが。

[xminimx]

カスタム投稿のタクソノミー名としてbreadcatを使っています。
試しに'breadcat' => $click); ?> を'breadcat' => $既存スラッグ); ?> にしたところ、問題なくカテゴリ別で表示できました。
category_nameでも問題はないみたいですね！

[madone99]

解決できたようで良かったです！

[xminimx]

申し訳ございません、解決はできていないのです…
現状としまして、12:04投稿のコードでパラメータでスラッグ名を取得することはできたのですが
それをphpの$args配列に取得させることができていない状態です。
よかったら引き続きご指導いただけますと幸いです。

[madone99]

'category_name' => $_GET[‘breadcat’]
にしてみるとどうでしょう？

[xminimx]

GET http://ドメイン/ページ/bread?click=スラッグ名 404 (Not Found)
上のエラーが出てしまいました…

[madone99]

bread?click=スラッグ名
が違います。

それなら$_GET['click']にしないと取得できません。

[xminimx]

何度もありがとうございます。
ご指導通り、JSの最後を
$.get('bread',{click});　に、
PHPを
<?php $args = array(
'post_type' => 'カスタム投稿名',
'breadcat' => $_GET['click']); ?>
にしてみました。
li.menu1_catをクリックすることでselectedクラスが移動し、
http://ドメイン/ページ/bread?click=スラッグ名をGETしてはいるようなのですが、やはりそこで404エラーが出ています。

[madone99]

http://ドメイン/ページ/bread
まででアクセスして表示できますか？

送信出来ているものとして、あまり詳しくスクリプトを見てなかったのですが、
$.get('bread',{click}); の、'bread'は
GETリクエストを送るURLの http://ドメイン/ページ/
を指定するのではないですか？

[xminimx]

http://ドメイン/ページ/bread
こちらは表示できません。

$.get('bread',{click});　でページにそのまま
スラッグ名のパロメータをつけたいのですが、
どうしてもページのあとに（getで指定した）/breadがついてしまいます。

[madone99]

$.getの送信先が存在しないページへ送信しているからでしょう。
多分こんな風にする必要があるのではないでしょうか。

$.get(表示したいURL,{
breadcat:$(this).data('id')
});

送信先、送信データで指定しているものが正しいか
リファレンスなどで確認してみて下さい。

https://api.jquery.com/jquery.get/

[xminimx]

.getの後はURLを入れる必要があるのですね。
おかげさまで http://ドメイン名/ページ?breadcat=all　を呼び出すところまでたどり着きました。
エラーは出なくなったのですが、ul.all_box内に表示させているカテゴリは切り替わりません…
<?php $args = array(
'post_type' => 'カスタム投稿名',
'breadcat' => $_GET['breadcat']); ?> ←ここが間違っているのでしょうか。

[madone99]

パラメータを一度確認してみて下さい。

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/WP_Query

以下は試されましたか？

'category_name' => $_GET[‘breadcat’]

[xminimx]

ご提示いただいたURL先、拝見しました。
ただ今回function.phpでカスタム投稿と、
register_taxonomy(
'breadcat', //タクソノミ名
'カスタム投稿名', //タクソノミを使う投稿タイプ名
array(
'rewrite' => array('slug' => 'shurui'), //投稿タイプのスラッグ
'label' => '種類', //ラベル名
'labels' => array(
'menu_name' => '種類' //管理画面のメニュー名
),
'public' => true, //公開状態
'hierarchical' => true, //カテゴリのように扱う場合はtrue
'has_archive' => true,
'query_var' => true,
'show_admin_column' => true, //投稿タイプのテーブルにタクソノミーのカラムを生成
)
);
以上のコードでカテゴリを追加したので
category_nameは効かないのかなと考えています。

'category_name' => $_GET[‘breadcat’]
こちらも試してみましたが結果は同じでした。（エラーは出ませんでした）
ただ、こちらは$_GET[‘breadcat’]を既存のスラッグ名にしたところ
どの記事も表示されなくなってしまいました。

[madone99]

カスタムタクソノミーで絞り込みするなら
tax_queryを使用する必要があります。

$args = array(
'post_type' => 'カスタム投稿名',
'tax_query' => array(
array(
'taxonomy' => 'breadcat',
'field' => 'slug',
'terms' => $_GET['breadcat'],
),
),
);

[xminimx]

それはphpの方に追記するということでしょうか。
試してみたのですが現在、

PHP
<ul class="all_box">
<?php $args = array(
'post_type' => 'カスタム投稿名',
'tax_query' => array(
array(
'taxonomy' => 'カスタム投稿名',
'field' => 'slug',
'terms' => $_GET['breadcat']),),); ?>

JS
$.get('/ページ',{breadcat:$(this).data('id')});
});
となっており、何も記事が表示されていない状態です。

[madone99]

PHPであっていますが

'taxonomy' => 'breadcat'

です。

[xminimx]

失礼しました、ご指摘箇所修正しましたが表示されません。。。

追記
'tax_query' => array(
array(
ここでarrayが続くのがおかしいのかな？と思い
一つ削ってみたら全ての投稿が表示されるようにはなりました。
知識が足りず、見当違いなことを言っているかもしれませんが…

[madone99]

送信先PHPページのどこでもいいですが、

var_dump($_GET['breadcat']);

で目的のスラッグが表示されていますか？
表示されなければjavascriptが間違っています。

いえ、array(array())であっています。
全件表示されたのは単に無効な指定をしたために
post_type だけが有効になったためです。

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/WP_Query#.E3.82.BF.E3.82.AF.E3.82.BD.E3.83.8E.E3.83.9F.E3.83.BC.E3.81.AE.E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF

[xminimx]

送信先PHPがいまいち理解できていません。
今回ページ移動をせずにul.all_boxの内容を切り替えようとしているのですが
それでも送信先PHPは必要なのでしょうか。
ご提示いただいたコードを$args=arrayの最後に記述したところ
NULLと表示されましたが、それはまだデータが何も動いていない状態だからですよね…

[madone99]

同じページへGETリクエストを送信していますので送信先が無ければ受信できません。
getパラメータ付のページへ移動しなれけばならないので、それでしたらajaxでやるしかないです。

[xminimx]

GET-POSTは複数のページでないと成り立たないのですね。
kei344さん、KazuhiroHatanoさんがおっしゃるようにajaxの方法も模索してみます。
JSの全体像を追記しましたので、よかったらご覧ください。

[madone99]

回答で、getパラメータがついても問題ないのであればと言ったのは、

$.get('breadcat',{
breadcat:$(this).data('id')
});

ここを

window.location.href = '/ページ名?breadcat=' + $(this).data('id');

こうすることです。

[xminimx]

なるほど？
こうするとURL自体が変わってしまい、ページを再読み込みするのですね。
それでもURLのパラメータをGETしたわけではなさそうです。

[madone99]

<li class="menu1_cat <?php echo $category->slug ?>" data-id="<?php echo $category->slug ?>">

ここで、$categroy->slugは、ブラウザのソースを確認してもらって入っていますか？

[xminimx]

ブラウザのソースを確認したいということでしょうか？

<li class="menu1_cat カテゴリ１のスラッグ" data-id="カテゴリ１のスラッグ">カテゴリ１</li>
<li class="menu1_cat カテゴリ２のスラッグ" data-id="カテゴリ２のスラッグ">カテゴリ２</li>
<li class="menu1_cat カテゴリ３のスラッグ" data-id="カテゴリ３のスラッグ">カテゴリ３</li>
というように、カテゴリが増えても自動的に増えるようになっています。

ajaxも考えており
https://cocomina.com/71/　こちらを参考にしようとしていますが
Ajaxを使うときの送り先とは何かわからず、詰まっています。

[madone99]

スラッグは入っているんですね。

javascriptは使用せずにリンクをクリックさせるのではどうですか？

<li><a href="<?php echo esc_url(home_url()).'ページ?breadcat='.$category->slug; ?>">カテゴリ１</a></li>

[xminimx]

リンクをクリックさせる方法でもエラーは出ないのですが、
何しろURLのパラメータを取得できないので困っています…

[madone99]

<ul class="menu1">
<li class="menu1_cat selected" data-id="all">全て</li>

があるページと、リンク先のページは同じなんでしょうか？
同じだったら、何か根本的な間違いがあるような気がします。

ページ?breadcat と書きましたが、実際のURLはどうなっていますか？

[xminimx]

二日間にわたってのご指導ありがとうございます。
リンク先のページは同じです。同じページの中で表示記事を切り替えようとしているので…
URLは　http://ドメイン名/ページ/?breadcat=スラッグ名　ですが内容は同じになっています。

[madone99]

http://ドメイン名/ページ/?breadcat=スラッグ名 と

http://ドメイン名/ページ?breadcat=スラッグ名 は

違うページになるので、/の有る無しを確認してみて下さい。

[xminimx]

/を消すことができず、これ以上時間をかけられないため
今回は残念ですがカテゴリ別で表示するtaxonomyを作成し、
各ページにリンクするようにします。
色々とご教授いただきありがとうございました。
問題は解決しませんでしたが、初めて知ることも多く次に生かしたいと思います。

Answer 2

PHPはサーバで処理されます。出力されたHTMLをブラウザが受け取って表示し、ブラウザがJavaScriptを実行して処理されます。
なので、JavaScriptの結果を最初に出力したPHPで受け取ることはできません。

Ajaxでその部分を書き換えるようにするなど、別の方法にする必要があります。

Comments

[xminimx]

解答ありがとうございます。
Ajaxに明るくないので今回はphpとjqueryを使った別の方法を考えてみようと思います。

[KazuhiroHatano]

phpとjQueryを連携させるならまずAjax使う事になると思いますよ
そもそもjQueryが作られた大きな目的の一つが煩雑なAjax処理の簡素化です

[xminimx]

お返事遅くなりましたが、アドバイスありがとうございます。
次回はajaxを使うことも視野に入れて製作していけるようにします。