web-dev-qa-db-ja.com

チェックボックスで投稿のカテゴリをフィルタする

こんにちはみんな私は私のWordPressプロジェクトのための簡単なフィルタオプションを作ろうとしています。チェックボックスでそれをやりたい。それはこのように見えます：

enter image description here 

これはチェックボックスのコードです：

<div class="categories">
    <?php
        $cat_count_web = get_category( '8' );
        $cat_count_marketing = get_category( '3' );
        $cat_count_uncatagorized = get_category( '1');
    ?>
    <h3 title="<?php echo $cat_count_web->count; ?>">
        <?php echo $cat_count_web->count; ?>
    </h3>
    <div class="checkboxCustom">
        <input type="checkbox" name="uxWebChb" id="uxWebChb">
        <label for="uxWebChb">UX WEB TACTICS</label>
    </div>
</div><div class="categories">
    <h3 title="<?php echo $cat_count_marketing->count; ?>">
        <?php echo $cat_count_marketing->count; ?>
    </h3>
    <div class="checkboxCustom">
        <input type="checkbox" name="marketingChb" id="marketingChb">
        <label for="marketingChb">MARKETING TACTICS</label>
    </div>
</div><div class="categories">
    <h3 title="<?php echo $cat_count_uncatagorized->count; ?>">
        <?php echo $cat_count_uncatagorized->count; ?>
    </h3>
    <div class="checkboxCustom">
        <input type="checkbox" name="outherChb" id="outherChb">
        <label for="outherChb">OTHER TACTICS</label>
    </div>
</div>

このページに投稿を表示するには、カスタム投稿タイプを使用しています。これは私の記事を表示するためのコードです：

<div class="vb-posts clearfix">
    <?php
        $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
        $args = array(
            'post_type' => 'html5-blank',
            'posts_per_page' => 5,
            'paged' => $paged
        );
    ?>
    <?php $loop = new WP_Query( $args ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <div class="col-md-3 col-md-offset-1">
        <div class="featured-img featured-img-small" style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>);"></div>
    </div>
    <div class="col-md-1 post-num">
        <h3>01</h3>
    </div>
    <div class="col-md-1">
        <hr class="dark-line" />
    </div>
    <div class="col-md-5">
        <a class="post-headline text-uppercase" href="<?php the_permalink() ?>">
            <h4 class="post-headline text-uppercase"><?php the_title() ?></h4>
        </a>
        <div class="post-body-short">
            <p><?php the_excerpt(); ?></p>
        </div>
        <div class="subject">
            <p>
                <?php foreach ((get_the_category()) as $category) {
                    echo $category->cat_name . ' ';
                } ?>
            </p>
        </div><div class="tags">
            <p>
                <?php
                    $posttags = get_the_tags();
                    if ($posttags) {
                        foreach($posttags as $tag) {
                            echo $tag->name . ', ';
                        }
                    }
                ?>
            </p>
        </div>
    </div>
    <?php endwhile; ?>

    <?php if ($loop->max_num_pages > 1) { // check if the max number of pages is greater than 1
        $nextUrl = get_next_posts_page_link();
        $prevUrl = get_previous_posts_page_link();
    ?>
    <div class="paginations clearfix">
        <ul class="pagination">
            <li><a href="<?php echo esc_url( $prevUrl ); ?>"><span class="icon-left_arrow"></span></a></li>
            <!-- pagination here -->
            <?php
              if (function_exists(custom_pagination)) {
                custom_pagination($loop->max_num_pages,"",$paged);
              }
            ?>
            <li><a href="<?php echo esc_url( $nextUrl ); ?>"><span class="icon-right_arrow"></span></a></li>
        </ul>
    </div>
    <?php } ?>
</div>

私はWordPressでフィルタを作成する方法の主題について読んできましたが、私を助けたものは何も見つかりませんでした。私はこれをWordPressのコーデックスで見つけましたが、動かせませんでした https://codex.wordpress.org/Function_Reference/wp_category_checklist 。
これらのチェックボックスを使用してカスタムクエリを機能させる方法はありますか。その場合、ユーザーがカスタムクエリの変更を選択または選択解除すると、それらのカテゴリからの投稿のみが取得されます。

custom-post-typesfunctionscategoriesfiltersjquery
1
Zvezdas1989

私はAjaxを使ってこれを解決することができました。
最初にクエリ引数を変更しました。

$args = array(
  'post_type' => 'html5-blank',
  'posts_per_page' => 5,
  'paged' => $paged,
  'category_name' => get_query_var('category_name')
);

それから私はこのようにAjaxでそれを注入することによって私のコンテンツが変わるところにテンプレートを作りました：

var $vbPosts = $('#vb-posts');
var videoCats  = {
    'ux-web-tactics': true,
    'marketing-tactic': true,
    'other-tactics': true,
};

$('#video-checkboxes').on('change', 'input:checkbox', function() {
    var cat = $(this).data('category'); // ux-web-tactics
    videoCats[cat] = this.checked;
    var lookupCategories = [];
    for (key in videoCats) {
        if (videoCats[key] === true) {
            lookupCategories.Push(key);
        }
    }

    // This doesnt allow for checkboxes to be turned off
    if (lookupCategories.length === 0) {
        this.checked = true;
        return;
    }
    $vbPosts.load('video-checkboxes/?category_name=' + lookupCategories.join(','));
});
1
Zvezdas1989