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

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

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

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

PHP

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

パラメータ

関数やプログラム実行時に与える設定値をパラメータと呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

2回答

1309閲覧

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

xminimx

総合スコア53

WordPress

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

PHP

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

パラメータ

関数やプログラム実行時に与える設定値をパラメータと呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/12/06 11:01

編集2022/01/12 10:55

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

PHP

1<ul class="menu1"> 2<li class="menu1_cat selected" data-id="all">全て</li> 3<?php $categories = get_categories(array('taxonomy' => 'カスタム投稿名')); if ( $categories ) : ?> 4<?php foreach ( $categories as $category ): ?> 5<li class="menu1_cat <?php echo $category->slug ?>" data-id="<?php echo $category->slug ?>"><?php echo wp_specialchars( $category->name ); ?></li> 6<?php endforeach; ?> 7<?php endif; ?> 8</ul> 9<div class="all"> 10<ul class="all_box"> 11<?php $args = array( 12 'post_type' => 'カスタム投稿名', 13 'breadcat' => $click); ?> 14 <?php $my_query = new WP_Query( $args ); ?> 15 <?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?><!--ループ開始--> 16 <li> 17〜〜省略〜〜 18 </li> 19 <?php endwhile; ?><!--ループ終了--> 20</ul> 21<?php wp_reset_postdata(); ?>

上のPHPに対して、

JS

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

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

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

PHP

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

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

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

12/9追記

JS

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

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

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

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

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

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

guest

回答2

0

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

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

投稿2019/12/06 12:34

編集2019/12/06 14:04
madone99

総合スコア1855

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

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

xminimx

2019/12/09 00:58

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

2019/12/09 01:32

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

2019/12/09 03:04

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

2019/12/09 03:16

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

2019/12/09 03:29

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

2019/12/09 03:55

解決できたようで良かったです!
xminimx

2019/12/09 03:58

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

2019/12/09 04:23

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

2019/12/09 04:33

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

2019/12/09 04:47

bread?click=スラッグ名 が違います。 それなら$_GET['click']にしないと取得できません。
xminimx

2019/12/09 05:52

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

2019/12/09 06:01 編集

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

2019/12/09 06:04

http://ドメイン/ページ/bread こちらは表示できません。 $.get('bread',{click}); でページにそのまま スラッグ名のパロメータをつけたいのですが、 どうしてもページのあとに(getで指定した)/breadがついてしまいます。
madone99

2019/12/09 06:14 編集

$.getの送信先が存在しないページへ送信しているからでしょう。 多分こんな風にする必要があるのではないでしょうか。 $.get(表示したいURL,{ breadcat:$(this).data('id') }); 送信先、送信データで指定しているものが正しいか リファレンスなどで確認してみて下さい。 https://api.jquery.com/jquery.get/
xminimx

2019/12/09 06:28

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

2019/12/09 06:59

ご提示いただいた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

2019/12/09 07:05 編集

カスタムタクソノミーで絞り込みするなら tax_queryを使用する必要があります。 $args = array( 'post_type' => 'カスタム投稿名', 'tax_query' => array( array( 'taxonomy' => 'breadcat', 'field' => 'slug', 'terms' => $_GET['breadcat'], ), ), );
xminimx

2019/12/09 07:21

それは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

2019/12/09 07:45 編集

PHPであっていますが 'taxonomy' => 'breadcat' です。
xminimx

2019/12/09 07:52 編集

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

2019/12/09 08:02 編集

送信先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

2019/12/09 08:02

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

2019/12/09 08:23 編集

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

2019/12/09 08:21

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

2019/12/09 08:32 編集

回答で、getパラメータがついても問題ないのであればと言ったのは、 $.get('breadcat',{ breadcat:$(this).data('id') }); ここを window.location.href = '/ページ名?breadcat=' + $(this).data('id'); こうすることです。
xminimx

2019/12/09 08:39

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

2019/12/09 08:42

<li class="menu1_cat <?php echo $category->slug ?>" data-id="<?php echo $category->slug ?>"> ここで、$categroy->slugは、ブラウザのソースを確認してもらって入っていますか?
xminimx

2019/12/09 08:49 編集

ブラウザのソースを確認したいということでしょうか? <li class="menu1_cat カテゴリ1のスラッグ" data-id="カテゴリ1のスラッグ">カテゴリ1</li> <li class="menu1_cat カテゴリ2のスラッグ" data-id="カテゴリ2のスラッグ">カテゴリ2</li> <li class="menu1_cat カテゴリ3のスラッグ" data-id="カテゴリ3のスラッグ">カテゴリ3</li> というように、カテゴリが増えても自動的に増えるようになっています。 ajaxも考えており https://cocomina.com/71/ こちらを参考にしようとしていますが Ajaxを使うときの送り先とは何かわからず、詰まっています。
madone99

2019/12/09 09:05

スラッグは入っているんですね。 javascriptは使用せずにリンクをクリックさせるのではどうですか? <li><a href="<?php echo esc_url(home_url()).'ページ?breadcat='.$category->slug; ?>">カテゴリ1</a></li>
xminimx

2019/12/09 09:12

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

2019/12/10 00:53

<ul class="menu1"> <li class="menu1_cat selected" data-id="all">全て</li> があるページと、リンク先のページは同じなんでしょうか? 同じだったら、何か根本的な間違いがあるような気がします。 ページ?breadcat と書きましたが、実際のURLはどうなっていますか?
xminimx

2019/12/10 01:03

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

2019/12/10 01:06

http://ドメイン名/ページ/?breadcat=スラッグ名http://ドメイン名/ページ?breadcat=スラッグ名 は 違うページになるので、/の有る無しを確認してみて下さい。
xminimx

2019/12/10 10:50

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

0

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

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

投稿2019/12/06 12:09

kei344

総合スコア69364

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

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

xminimx

2019/12/06 12:27

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

2019/12/06 13:27

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

2019/12/11 01:06

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問