level 3
ericdbl
楼主
我看到网上关于WordPress AJAX分类筛选功能的资源比较少，我就制作了这个ajax分类筛选以及带有分页的文章列表功能。
该功能通过短码实现。分类方式可以是分类、标签、自定义分类。可以设置每个页面的文章数，可以排除某个分类。
案例演示: http://www.jsonvue.com/wp-ajax-post-demo/
源码下载:http://www.jsonvue.com/wp-content/uploads/2017/01/ajaxpost.zip
1.编写短码函数
function jsonvue_filter_posts_sc($atts) {
$a = shortcode_atts( array(
'tax' => 'category', //可以改为post_tag
'terms' => false, //排除某个分类
'active' => false, //设定默认加载哪个分类
'per_page' => 12 //设定每页文章数量
), $atts );
$result = NULL;
$terms = get_terms($a['tax']);
//排除某个分类就用下面一句，在短码添加terms='分类id'就可以排除
//$terms = get_terms($a['tax'],array('exclude' =>$a['terms']));
if (count($terms)) :
ob_start(); ?>
<div id="container-async" data-paged="<?php echo $a['per_page']; ?>" class="sc-ajax-filter">
<ul class="nav-filter">
<li>
<a href="#" data-filter="post_tag" data-term="all-terms" data-page="1">
所有
</a>
</li>
<?php foreach ($terms as $term) : ?>
<li<?php if ($term->term_id == $a['active']) :?> class="active"<?php endif; ?>>
<a href="<?php echo get_term_link( $term, $term->taxonomy ); ?>" data-filter="<?php echo $term->taxonomy; ?>" data-term="<?php echo $term->slug; ?>" data-page="1">
<?php echo $term->name; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<div class="status"></div>
<div class="content"></div>
</div>
<?php $result = ob_get_clean();
endif;
return $result;
}
注册该短码：
add_shortcode( 'jsonvue_posts', 'jsonvue_ajax_posts_sc');
2.其他函数
第一步的短码函数并没有带有具体的处理逻辑，比如：发送ajax请求，php处理请求，分页数据等功能，那么现在我们就开始构建这些函数。
首先是 发送ajax请求的JS代码，这个是通过jquery实现。
Ajax请求后台php获取数据的JS代码
php函数处理ajax请求
分页函数
最后，将上述代码整合，并加载进wordpress ：
function assets() {
wp_enqueue_script( 'bootcdn', 'http://cdn.bootcss.com/jquery/2.2.3/jquery.min.js">' );
wp_enqueue_script('jsonvue/js', get_template_directory_uri().'/js/custom.js');
//php想向js传递变量
wp_localize_script( 'jsonvue/js', 'jsonvue', array(
'nonce' => wp_create_nonce( 'jsonvue' ),//ajax请求安全处理
'ajax_url' => admin_url( 'admin-ajax.php' )//调用wordpress自带ajax处理程序
));
}
add_action('wp_enqueue_scripts', 'assets', 100);
注意：上述代码除了js文件，都要放在主题文件夹下function.php文件里面，默认短码调用方式：
[jsonvue_posts]
[jsonvue_posts per_page='1'] 每页显示多少篇文章
[jsonvue_posts tax=‘category’]
[jsonvue_posts terms=‘3,6’] 排除id为3、6的分类
另外，该代码运行需要PHP5.4或者以上环境。
2017年01月02日 06点01分
1
该功能通过短码实现。分类方式可以是分类、标签、自定义分类。可以设置每个页面的文章数，可以排除某个分类。
案例演示: http://www.jsonvue.com/wp-ajax-post-demo/
源码下载:http://www.jsonvue.com/wp-content/uploads/2017/01/ajaxpost.zip
1.编写短码函数
function jsonvue_filter_posts_sc($atts) {
$a = shortcode_atts( array(
'tax' => 'category', //可以改为post_tag
'terms' => false, //排除某个分类
'active' => false, //设定默认加载哪个分类
'per_page' => 12 //设定每页文章数量
), $atts );
$result = NULL;
$terms = get_terms($a['tax']);
//排除某个分类就用下面一句，在短码添加terms='分类id'就可以排除
//$terms = get_terms($a['tax'],array('exclude' =>$a['terms']));
if (count($terms)) :
ob_start(); ?>
<div id="container-async" data-paged="<?php echo $a['per_page']; ?>" class="sc-ajax-filter">
<ul class="nav-filter">
<li>
<a href="#" data-filter="post_tag" data-term="all-terms" data-page="1">
所有
</a>
</li>
<?php foreach ($terms as $term) : ?>
<li<?php if ($term->term_id == $a['active']) :?> class="active"<?php endif; ?>>
<a href="<?php echo get_term_link( $term, $term->taxonomy ); ?>" data-filter="<?php echo $term->taxonomy; ?>" data-term="<?php echo $term->slug; ?>" data-page="1">
<?php echo $term->name; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<div class="status"></div>
<div class="content"></div>
</div>
<?php $result = ob_get_clean();
endif;
return $result;
}
注册该短码：
add_shortcode( 'jsonvue_posts', 'jsonvue_ajax_posts_sc');
2.其他函数
第一步的短码函数并没有带有具体的处理逻辑，比如：发送ajax请求，php处理请求，分页数据等功能，那么现在我们就开始构建这些函数。
首先是 发送ajax请求的JS代码，这个是通过jquery实现。
Ajax请求后台php获取数据的JS代码
php函数处理ajax请求
分页函数
最后，将上述代码整合，并加载进wordpress ：
function assets() {
wp_enqueue_script( 'bootcdn', 'http://cdn.bootcss.com/jquery/2.2.3/jquery.min.js">' );
wp_enqueue_script('jsonvue/js', get_template_directory_uri().'/js/custom.js');
//php想向js传递变量
wp_localize_script( 'jsonvue/js', 'jsonvue', array(
'nonce' => wp_create_nonce( 'jsonvue' ),//ajax请求安全处理
'ajax_url' => admin_url( 'admin-ajax.php' )//调用wordpress自带ajax处理程序
));
}
add_action('wp_enqueue_scripts', 'assets', 100);
注意：上述代码除了js文件，都要放在主题文件夹下function.php文件里面，默认短码调用方式：
[jsonvue_posts]
[jsonvue_posts per_page='1'] 每页显示多少篇文章
[jsonvue_posts tax=‘category’]
[jsonvue_posts terms=‘3,6’] 排除id为3、6的分类
另外，该代码运行需要PHP5.4或者以上环境。
