WordPressでチェックボックスを使ってブースト・カルーセルを結合する

Question

こんにちは、私はWordPressプロジェクトでブートストラップ・カルーセルを実装しようとしています。チェックボックスを使用してカテゴリを一覧表示すると、次のようになります。

ユーザーは自分が選択したカテゴリに基づいてカルーセルのコンテンツを変更できるようにしたいと考えています。
基本的には、ユーザーが選択したチェックボックスに基づいてクエリを変更する必要があります。への道があります

<div class="col-md-7 col-md-offset-4 main-content"> 
    <div class="checkbox"> 
     <label class="checkbox-inline"> 
     <input type="checkbox" name="allRadios" id="allRadios" value="all"> 
     all 
     </label> 
     <label class="checkbox-inline"> 
     <input type="checkbox" name="frontendRadios" id="frontendRadios" value="frontend" checked> 
     front end 
     </label> 
     <label class="checkbox-inline"> 
     <input type="checkbox" name="wordpressRadios" id="wordpressRadios" value="wordpress" checked> 
     wordpress 
     </label> 
     <label class="checkbox-inline"> 
     <input type="checkbox" name="designRadios" id="designRadios" value="design" checked> 
     design 
     </label> 
     <label class="checkbox-inline"> 
     <input type="checkbox" name="seoRadios" id="seoRadios" value="seo" checked> 
     seo 
     </label> 
    </div> 
</div> 

<!-- Here starts carousel loop --> 
<?php $carauselLoop = new WP_Query(array('post_type' => 'post', 'posts_per_page' => -1, 'category_name' => 'testing')); ?> 
<?php $i=1; ?> 
<div class="col-md-4 our-work-info"> 
    <div class="clients-num"> 
     <h5 title="01">01</h5> 
    </div> 
    <span class="glyphicon glyphicon-link"></span> 
    <h3>Crossroads</h3> 
    <h4 class="sub-heading">front end/wordpress</h4> 
</div> 

<div class="col-md-7"> 

    <div id="our-work-carousel" class="carousel slide" data-ride="carousel"> 
     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
      <?php while ($carauselLoop->have_posts()) : $carauselLoop->the_post(); ?> 
       <div class="item <?php if ($i == 1) echo 'active'; ?>"> 
        <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>" alt="<?php the_title(); ?>"> 


       <div class="carousel-caption"> 
        <a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3></a> 
       </div> 
      </div> 
     <?php $i++; ?> 
     <?php endwhile; wp_reset_query(); ?> 
    </div> 

    <!-- Indicators --> 
    <ol class="carousel-indicators our-work-indicators"> 
     <li data-target="#our-work-carousel" data-slide-to="0" class="active"></li> 
     <li data-target="#our-work-carousel" data-slide-to="1"></li> 
     <li data-target="#our-work-carousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#our-work-carousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#our-work-carousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 

</div> 

：私のクエリは、これは私のコードです のユーザは、例えばこの「カテゴリ名」=>のようなもの選びだしたものをカテゴリに基づいて変更する必要がある「test1のを、test2の」
これを達成し、どのように私はそれにアプローチすべきですか？

Answer 1

私はこれを解決するために別のアプローチをとることに決めました。 私の考えは、さまざまなカテゴリのすべての投稿を読み込み、ユーザーが選択したチェックボックスに基づいて表示または非表示にするCSSクラスを与えることでした。誰もが同様の問題に遭遇した場合、私は、これは彼を助けることを願っています

var checkedCategories = { 
    frontend: false, 
    testing: false, 
    uncategorized: false, 
    wordpress: false, 
    design: false, 
    seo: false, 
}; 

function checkedKeys() { 
    return Object.keys(checkedCategories).filter(function(key) { 
     return checkedCategories[key]; 
    }); 
} 

function toggleAll() { 
    Object.keys(checkedCategories).forEach(function(key) { 
     checkedCategories[key] = false; 
     $('#' + key + 'Chb').attr('checked', false); 
    }); 
    $('.cat-all').addClass('item').removeClass('hidden'); 
    $('.cat-all').eq(0).addClass('active'); 

    $('#allChb').attr({ 
     disabled: true, 
     checked: true 
    }); 
} 

$('#category-checkboxes').on('change', 'input:checkbox', function(e) { 
    var $chb = $(this); 
    var category = $chb.data('category'); 

    $('.cat-all').removeClass('active'); 

    if (category == 'all') { 
     if (this.checked) { 
      toggleAll(); 
      return; 
     } else { 
      $(this).attr('disabled', true); 
     } 
    } 

    $('.cat-all').removeClass('item').addClass('hidden'); 

    if (this.checked) { 
     $('#allChb').attr({ 
      disabled: false, 
      checked: false 
     }); 
    } 

    var $catItems = $('.cat-' + category); 
    checkedCategories[category] = this.checked; 

    var categories = checkedKeys(); 
    if (categories.length === 0) { 
     toggleAll(); 
     return; 
    } 

    categories.forEach(function(cat) { 
     var checked = checkedCategories[cat]; 
     var $catItems = $('.cat-' + cat); 
     $catItems.addClass('item'); 
     $catItems.removeClass('hidden'); 
    }); 

    $('.cat-all.item').eq(0).addClass('active'); 
}); 

：

<div class="carousel-inner" role="listbox"> 
    <?php while ($carouselLoop->have_posts()) : ?> 
     <?php $carouselLoop->the_post(); ?> 
     <?php 
      $categories = get_the_category(); 
      $cat = ''; 
      if (! empty($categories)) { 
       $cat = esc_html($categories[0]->name); 
      } 
     ?> 
     <div 
      class="cat-all cat-<?= strtolower($cat) ?> item <?php if ($i == 1) echo 'active'; ?>" 
      data-title="<?php the_title() ?>" 
      data-category="<?= strtolower($cat) ?>" 
     > 
      <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>" alt="<?php the_title(); ?>"> 
      <div class="carousel-caption"> 
       <a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3></a> 
      </div> 
     </div> 
     <?php $i++; ?> 
    <?php endwhile; ?> 
    <?php wp_reset_query(); ?> 
</div> 

これは私JQです：
は、これが私のHTMLです。

Answer 2

PHPでこれを行うということは、すべてのチェックボックスをクリックするたびにページをリロードすることを意味します。これは一般的にあなたが望むものではありません。あなたは多くのユーザーの時間を無駄にし、サーバーに不必要な負荷をかけることになります。つまり、あなたがしたいことは、カスタムクエリパラメータを公開し、次にそれを投稿に問い合わせる関数に渡すことです。

ですから、functions.phpにこのような何かを追加したい：

public function add_query_vars($vars) { 
    $vars[] = 'carousel_cat'; 
    return $vars; 
} 
add_filter('query_vars', 'add_query_vars'); 

クエリを実行どこ次にあなたが最初のURLからクエリのparamフェッチ：

$carousel_categories = get_query_var('carousel_cat', false) ?: '1,2'; // '1,2' are defaults 
// Let's assume the URL is /?carousel_cat=12,43 then $carousel_categories = '12,43' 

をそして、あなたにそれを渡しますクエリ：チェックボックス値について

// The numbers should be category IDs because then you can pass them directly to the query: 
$carauselLoop = new WP_Query(['cat' => $carousel_categories]); 
// But you might wanna do some kind of sanitation on that so that ti doesn't error out 

を出力するようにしてくださいカテゴリID。また、それらをハードコーディングしていないが、カテゴリをループ：

<?php 
    $available_categories = get_categories(); 
    foreach($available_categories as $cat): 
?> 
    <label><input type="checkbox" value="<?= $cat->term_id; ?>"> <?= esc_html($cat->name); ?></label> 
<?php endforeach; ?> 

そして、あなたはまだ入力上onchangeイベントをリッスンしますJSのロジックのいくつかの種類を必要とし、例えば、正しいURLを設定しますhttp://yoursite.tld/?carousel_cat=12。