大家好,我正在为我的WordPress项目制作简单的过滤器选项。我想用复选框来做。看起来是这样的:
这是复选框的代码:
<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.
有没有办法让我的自定义查询使用这些复选框,因此当用户选择或取消选择其中一些复选框时,我的自定义查询会发生更改,因此它只接受这些类别中的帖子?
最合适的回答,由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(\',\'));
});