使用复选框筛选帖子类别

时间:2017-10-02 作者:Zvezdas1989

大家好,我正在为我的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 codex中找到了这个,但无法使其工作https://codex.wordpress.org/Function_Reference/wp_category_checklist.
有没有办法让我的自定义查询使用这些复选框,因此当用户选择或取消选择其中一些复选框时,我的自定义查询会发生更改,因此它只接受这些类别中的帖子?

1 个回复
最合适的回答,由SO网友: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(\',\'));
});

结束