有国外的朋友发现了小站首页的免刷新分类目录(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',' | ',''); ?>
</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是不行的~
Ajax好强大,乖乖的。。。
@煎豆 ,看用在什么地方了
这个保留一下,以后有机会用
我也是来围观效果的。
@阿修 ,还好吧。。随便看
前來學習~
@小奎
互相交流,嗯
很cool的效果,话说你这cool的效果很多。。。
@A.shun
不算很多啦:-D
我也折腾了一下,嘿嘿
@zwwooooo ,我看你用了page,我也折腾出了分页,没写出来
@winy ,求写出来...
@mice ,改天吧,最近很忙,为了生活。。
@zwwooooo ,果然不愧cp帝。。。连tag和月份归档都加上效果了,那么多正则我可写不出来,源码拿走了
@winy ,正则怕怕,我用的方法是很原始和简单的判断,不知道会不会出错,囧~
@zwwooooo ,哦 原来是这里.直接改造archive.php不就好了吗
@Willin Wang ,霍霍,我的目的是原主题不变实现ajax加载。
效果应该是很明显的,但是博主有没有发现速度好慢,包括显示效果!
@如何美白牙齿 ,用的IE吗?那慢是正常的。。。我速度很快,3s内打开网页
貌似那个代码展开效果很炫。。。
@煎豆 ,那个很简单,前面有介绍:《给代码区域加上滑动伸缩功能》