選択した親の子タームだけ表示させたい

  • ysaito

    (@ysaito)


    4年、 2ヶ月前

    カスタムタクソノミーで親タームと子タームを作成し、
    親タームのみ表示させたセレクトボックスで選択した親タームの子タームだけ
    別のセレクトボックスで表示させたいと思っています。

    子タームの表示は下記で親タームを指定すれば表示できることが分かりましたが、
    下記の■の親タームに別のセレクトボックスで選択したタームIDを入れて、親タームを変えると表示する子タームも変わるようにしたいのですが、どう指定すればよいのでしょうか。

    現在のコードはこちらです。
    ＜親ターム出力＞

    
<?php
$args = array(
'hide_empty' => 0,
'orderby' => 'count',
'order' => 'ASC',
'parent' => 0
);
$categories = get_terms('★', $args); //★タクソノミー名
 foreach ($categories as $category) {
$option = '<option value="'.$category->slug.'">';
$option .= $category->name;
$option .= '</option>';
echo $option;
}
?>

    ＜子ターム出力＞

    
<?php
$term_id = ■;//親タームID
$taxonomy_name = '★';//タクソノミー名
$termchildren = get_terms( $taxonomy_name, array('child_of' => $term_id, 'orderby' => 'none', 'hide_empty' => '0'));
foreach ( $termchildren as $child ) :?>
<?php $term = get_term_by( 'id', $child->term_id, $taxonomy_name );?>
<option value="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option>
<?php endforeach; ?>
    • このトピックはysaitoが4年、 2ヶ月前に変更しました。
10件の返信を表示中 - 1 - 10件目 (全10件中)
  • ishitaka

    (@ishitaka)

    4年、 2ヶ月前

    こんにちは

    動的にセレクトボックスを変更するには、JavaScript で変更することになると思います。
    こちらの記事が参考になると思います。

    ishitaka

    (@ishitaka)

    4年、 2ヶ月前

    サンプルコードを書いてみました。長いので分割して投稿します。また、長いのでコードの説明は省きます。一例としてご参考まで。

    ＜親ターム出力＞

    <select id="select-parent">
<?php
$args = array(
	'hide_empty' => false,
	'orderby' => 'count',
	'order' => 'ASC',
	'parent' => 0,
);
$terms = get_terms( '★', $args );
foreach ( $terms as $term ) {
	echo '<option value="' . $term->slug . '">' . $term->name . '</option>';
}
?>
</select>

    ＜子ターム出力＞
    <select id="select-child"></select>

    ishitaka

    (@ishitaka)

    4年、 2ヶ月前

    JavaScript (jQuery)

    テーマの functions.php に、

    function my_enqueue_scripts() {
	//if ( ! is_single( 123 ) ) return;

	if ( ! wp_script_is( 'jquery', 'done' ) ) {
		wp_enqueue_script( 'jquery' );
	}

	$script = <<<SCRIPT
jQuery(function($) {
  $('#select-parent').change(function(e) {
    var selectChild = $('#select-child');
    var selectParentSlug = $(this).val();
    selectChild.find('option').remove();
    if (selectChildTable && selectChildTable[selectParentSlug ]) {
      $.each(terms_children[selectParentSlug], function(i, v) {
        selectChild.append('<option value="' + v['slug'] + '">' + v['name'] + '</option>');
      });
    }
  });
  $('#select-parent').change();
});
SCRIPT;
	wp_add_inline_script( 'jquery-core', $script, 'after' );

	$terms = get_terms( '★', array(
		'hide_empty' => 0,
		'orderby' => 'count',
		'order' => 'ASC',
	) );
	$children = array();
	foreach ( $terms as $term ) {
		if ( 0 == $term->parent ) continue;
		if ( $parent = get_term_by( 'id', $term->parent, '★' ) ) {
			$children[$parent->slug][] = $term;
		}
	}
	wp_localize_script( 'jquery-core', 'selectChildTable', $children );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

    ※ ★ はタクソノミー名。

    トピック投稿者 ysaito

    (@ysaito)

    4年、 2ヶ月前

    javaScriptを使うのですね。サンプルコードまで書いてくださって本当にありがとうございます。

    早速タクソノミー名を入れ替えて実装してみたのですが、
    エラーが出てしまい子タームが出力されませんでした。

    Chromeデベロッパーツールのコンソールを確認したところ

    エラー内容は
    Uncaught ReferenceError: terms_children is not defined

    該当箇所はfunctions.phpに記載する中の
    $.each(terms_children[selectParentSlug], function(i, v) {

    のようです。

    調べてみたところ「定義されていない変数を参照」しているようなのですが
    どう対処すればよいのか分からず返信いたしました。

    何度もお手数をお掛けいたしますがご教示いただけますと幸いです。
    よろしくお願いいたします。

    ishitaka

    (@ishitaka)

    4年、 2ヶ月前

    おっと、すみません、間違えました🙇‍♂️

    $.each(terms_children[selectParentSlug], function(i, v) {
    ↓
    $.each(selectChildTable[selectParentSlug], function(i, v) {

    ですね💦

    トピック投稿者 ysaito

    (@ysaito)

    4年、 2ヶ月前

    ありがとうございます！子ターム出力されました！！
    本当にありがとうございます！！！

    本当に私の力不足で転用できなくて大変申し訳ございませんが、
    出力される子タームのはじめに何も選んでいない状態の「選択してください」を置きたい場合、
    どこに足せばよいでしょうか・・
    親タームだけでも検索させたいと思っています。

    今の状態だと一つ目の子タームが自動的に入ってしまうので、
    自動的に子タームでの検索になっているようです。
    先程子ターム出力のselectにoptionを置いても出力されませんでしたので
    functions.phpの中になるとは思うのですが、
    本当に何度も申し訳ございません。

    ishitaka

    (@ishitaka)

    4年、 2ヶ月前

    選択項目の有無に関係なく「選択してください」を追加する場合は、

    if (selectChildTable && selectChildTable[selectParentSlug ]) {

    の直前あたりに、選択項目がある場合は、直後あたりに、

    selectChild.append('<option value="">－選択してください－</option>');

    を挿入するといいかなと思います。

    トピック投稿者 ysaito

    (@ysaito)

    4年、 2ヶ月前

    ありがとうございます！「選択してください」を追加することができました！！

    すみません、子タームを選んでも
    親ターム全体を含んだ検索結果を出力してしまっていました・・

    最初の質問とは別の箇所の質問になってしまうのですが
    検索結果の出力は下記のようにしていると
    子タームで絞り込めないものなのでしょうか。

    ＜検索結果ページ＞

    
$s = $_GET['s'];
$term = $_GET['★'];

if($term){
  $taxquerysp[] = array(
          'taxonomy'=>'★',
          'terms'=> $term,
          'include_children'=>true,
          'field'=>'slug',
          'operator'=>'IN'
          );
}

$args = array(
  'post_type' => '▲',
  'posts_per_page' => -1,
  'tax_query' => $taxquerysp,
   's' => $s,
  );

  $sub_query = new WP_Query( $args ); 
//以降サブループ

    ★はタクソノミー名、▲はカスタム投稿タイプ名です。

    本当に何度も申し訳ございません。

    ishitaka

    (@ishitaka)

    4年、 2ヶ月前

    コード上は問題ないと思います。
    検索対象の投稿で親タームを選択しているからではないでしょうか？親タームを選択している状態で親を除外するのは WP_Query では難しいです。ループ内で除外するか親タームを選択しないようにするのがいいかと思います。

    • この返信は4年、 2ヶ月前にishitakaが編集しました。
    トピック投稿者 ysaito

    (@ysaito)

    4年、 2ヶ月前

    ありがとうございます。親タームを選択しないようにするなど
    検索の構成から考え直さないといけないですね・・
    検証いたします。

    この度は何度も親身に回答いただき、誠にありがとうございました！！！
    助言いただけてとても心強かったです。本当に助かりました！！！！

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「選択した親の子タームだけ表示させたい」には新たに返信することはできません。