使用WP-AJAX动态加载显示更多的标签tags

这是一个个人需求，本站模板在分类页会显示有关此分类的所有标签，但有一个问题，如果当前分类标签过多显示，就会将帖子内容下压，对没有标签需要的不太友好；因此需要将标签实现折叠或是按需要加载；相比折叠，使用WP-AJAX动态加载更加节省资源。

正常只显示12个标签代码

// Output tag cloud based on category id
function tag_cloud_by_category(){
	$category_ID = cq_get_cat_id();
	$query_args = array( 'cat' => $category_ID, 'posts_per_page' => -1 );
    $custom_query = new WP_Query( $query_args );
    if ($custom_query->have_posts()) :
        while ($custom_query->have_posts()) : $custom_query->the_post();
            $posttags = get_the_tags();
            if ($posttags) {
                foreach($posttags as $tag) {
                    $all_tags[] = $tag->term_id;
                }
            }
        endwhile;   

		$tags_arr = array_unique($all_tags);
		$tags_str = implode(",", $tags_arr);

		$args = array(
			'echo'      => false,
			'smallest'  => 14,
			'largest'   => 14,
			'unit'      => 'px',
			'number'    => 12,
			'format'    => 'flat',
			'orderby'   => 'count',
			'order'     => 'DESC',
			'show_count' => 1,
			'include'   => $tags_str
		);
		return wp_tag_cloud($args);
	endif;
}

建立add more更多标签链接

此链接可以直接写在模板页面，本站使用add_filter将此链接追加到标签后面显示，而且可以做到加载前显示 »more，加载完成后提示 »end.

点击链接主要传送一个数据，就是当前分类id, 参数data-id

add_filter( 'wp_tag_cloud', function ( $return, $args ) {		
	$category_ID = cq_get_cat_id();
    if ( 'array' != $args['format'] ) {
		if(isset($_POST['catid'])) {
			$return .= ' » end';
		} else {
			$return .= '<a class="tags-more" href="#!" data-id="'.$category_ID.'" data-slug="0">» more</a>';
		}
    }
    return $return;
}, 10, 2 );

点击链接WP-AJAX传递数据

AJAX使用JAVASCRIPT来处理的，所以以下代码必须放在JS文件中

// Append more tags
		$('.tags-more').on('click', function(e) {
			e.preventDefault();
			$.ajax({
				type: 'POST',
				url: '/wp-admin/admin-ajax.php',
				dataType: 'html',
				data: {
				  action: 'append_tags',
				  catid: $(this).data('id'),
				},
				success: function(response) {
				  $('.section-cloud').html(response);
				}
			})
		});

URL即是WordPress自带的AJAX处理后台文件，利用此后台处理，将data-id接收来的id传送到函数function append_tags()得到更多的标签数据，并同时返回给response,并直接输出到对应的div .section-cloud的区域。

AJAX标签处理函数代码

这个函数就是上面提到的 函数function append_tags()，通过id来加载更多的标签

// Append more tags with ajax
function append_tags() {
	$response = '';
	$category_ID = $_POST['catid'];
	
	$query_args = array( 'cat' => $category_ID, 'posts_per_page' => -1 );
    $custom_query = new WP_Query( $query_args );	
    if ($custom_query->have_posts()) :
        while ($custom_query->have_posts()) : $custom_query->the_post();
            $posttags = get_the_tags();
            if ($posttags) {
                foreach($posttags as $tag) {
                    $all_tags[] = $tag->term_id;
                }
            }
        endwhile;   

		$tags_arr = array_unique($all_tags);
		$tags_str = implode(",", $tags_arr);

		$args = array(
			'echo'      => false,
			'smallest'  => 14,
			'largest'   => 14,
			'unit'      => 'px',
			'number'    => 0,
			'format'    => 'flat',
			'orderby'   => 'count',
			'order'     => 'DESC',
			'show_count' => 1,
			'include'   => $tags_str
		);
		if ( empty( $args ) || is_wp_error( $args ) ) {
			return;
		}
		$response = wp_tag_cloud($args);
		echo $response;
	endif;
	wp_die();
}
add_action('wp_ajax_append_tags', 'append_tags');
add_action('wp_ajax_nopriv_append_tags', 'append_tags');

这里有两个要点：

1. 必须要调用add_action(‘wp_ajax_$action’,’action’)，才可以实现动态加载
2. WordPress自带的wp_ajax返回是在die( ‘0’ );结束的，所以在最后它会增加一个0字符；而这里不需要此0字符，所以wp_die();结束，而不返回0字符

实际效果请点击本站分类页面即可查看！

the end.