有国外的朋友发现了小站首页的免刷新分类目录(categories),表示很喜欢这个功能,委托我帮忙修改主题,现在把具体方法写出来。本文发布时,我还用的旧的方法,即分类目录都是自己手动加上去的,没用wp的函数,不过下面是接到任务后新折腾的,效果一样,通用性更好一点。

1、调用wp的函数产生分类列表

 <?php wp_list_categories('orderby=name&title_li=&style=list'); ?>

前台xhtml结构:

<div id= "main">
	<div id="content-post"><!--主体部分,开始显示的东西-->
	<!--主循环里的内容 -->
	</div>
	<div id="qkblock" style="display:none;"><!--ajax载入后显示的部分-->
		<div id="qs-info">Loading...</div>
		<div id="qs-area"></div>
	</div>
</div>

2、php响应部分:放function.php里面,具体样式按主题设值来

/*Ajaxcat*/
function Ajaxcat(){
if( isset($_GET['action'])&& $_GET['action'] == 'Ajaxcat'  ){
 nocache_headers();	//(FIX for IE)
 $colid = isset($_GET['col']) ? $_GET['col'] : null;
if(!$colid){
	fail(__('Error post id or comment page id.'));
	}else{
	query_posts('cat='.$colid. '&showposts=-1');
$wp_query->is_archive = true; $wp_query->is_home = false;
while (have_posts()) { the_post(); ?>
<!--下面是前台xhtml结构,自己根据主题修改-->
	<div class="post" id="post-<?php the_ID(); ?>">
 <div class="data"><?php the_time('F jS, Y') ?></div>
  <h3 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
    <?php the_title(); ?>
    </a></h3>
	 <div class="author">Posted
    in <?php the_category(', ') ?> by
    <?php the_author() ?> <?php edit_post_link('Edit','&nbsp;|&nbsp;',''); ?>
  </div>

  <div class="feedback">
    <?php comments_popup_link(__('comments'), __('1 comments'), __('% comments'), '', __('comments off')); ?>
  </div>
</div>
<?php
 } wp_reset_query();//重置
}
die();
 }
}
add_action('init', 'Ajaxcat');

3、jQuery ajax过程,具体选择器和效果得自己修改。

jQuery(document).ready(function($) {

    $('.cat-item').click(function(){
	    var num=$(this).attr("class").split(/cat-item-/)[1].split(/(\/|#|&).*$/)[0];//获取class中的cat ID
		//alert(num);//for test
        $.ajax({
        url : ajaxUrl+ "?action=Ajaxcat&col="+num,
        type: 'get',
        beforeSend: function() {
        $('#content-post').hide();
        $('#qs-area').empty();
        $('#qkblock').show();
        $('#qs-info').fadeIn(500);
        },
		error: function(request) {
        alert(request.responseText);
		},
        success : function (data) {
        $('#qs-info').hide();
		$('html,body').animate({ scrollTop: 200 }, 1000);
        $("#qs-area").html(data).slideDown('slow');
        }
        });
        return false;
    });

});

基本原理就是通过wp_list_categories('orderby=name&title_li=&style=list')输出列表,注意style=list这个参数将会产生cat-item-X这样的class,用jQuery获取这个值就找到了分类列表的ID,直接ajax传入就好了。

嗯,现在这个主题用的是固定的ID号,效果是一样的。有个缺陷是不能分页,因此默认是全部显示,目前我只输出前面30篇最近的,这个可以在query_posts的showposts参数控制。最初这个效果是从jinwen的主题中看到的,他也写了一个简单的教程,但是每个分类都要创建一个相应的php文件。我第一次改进是把全部响应部分放在一起加以判断,节省了很多,正如目前这个主题用上的一样,现在上面的方面适用性更强。

最后说一句,直接copy是不行的~

  1. 煎豆 (2010.09.03 at 19:47) 17楼

    Ajax好强大,乖乖的。。。 :arrow:

  2. Ygs (2010.09.03 at 21:04) 18楼

    这个保留一下,以后有机会用

  3. 阿修 (2010.09.03 at 23:22) 19楼

    我也是来围观效果的。

  4. 小奎 (2010.09.04 at 16:44) 20楼

    前來學習~ :oops:

  5. A.shun (2010.09.04 at 22:14) 21楼

    很cool的效果,话说你这cool的效果很多。。。

  6. zwwooooo (2010.09.05 at 00:18) 22楼

    我也折腾了一下,嘿嘿

    • winy() (2010.09.05 at 00:24)

      @zwwooooo ,我看你用了page,我也折腾出了分页,没写出来

    • mice (2010.11.12 at 11:21)

      @winy ,求写出来...

    • winy() (2010.11.12 at 17:11)

      @mice ,改天吧,最近很忙,为了生活。。

    • winy() (2010.09.05 at 00:47)

      @zwwooooo ,果然不愧cp帝。。。连tag和月份归档都加上效果了,那么多正则我可写不出来,源码拿走了 :grin:

    • zwwooooo (2010.09.05 at 12:48)

      @winy ,正则怕怕,我用的方法是很原始和简单的判断,不知道会不会出错,囧~

    • Willin Wang (2011.04.16 at 23:02)

      @zwwooooo ,哦 原来是这里.直接改造archive.php不就好了吗

    • zwwooooo (2011.04.16 at 23:06)

      @Willin Wang ,霍霍,我的目的是原主题不变实现ajax加载。

  7. 如何美白牙齿 (2010.09.10 at 19:54) 23楼

    效果应该是很明显的,但是博主有没有发现速度好慢,包括显示效果!

  8. 煎豆 (2010.09.10 at 23:34) 24楼

    貌似那个代码展开效果很炫。。。

评论分页: 1 2 3 4

发布评论

邮箱(必填)

换个背景