帮客户修改网站时遇到这问题……36Kr 又换新版了,比较讨客户喜欢的功能是:首页切换分类目录,可是——本屌不会 jQuery 哇!
很久以前就想折腾这个效果了,以前一直没搞定,后来一直没时间。现在,我把步骤记录下来,留待以后折腾。本文为实现方法之一,其他方式还有1、2、3,有待验证。正文开始:wordpress首页ajax翻页实现方法。关于为什么要对wordpress博客的首页进行ajax分页,有人说wordpress首页采用ajax分页可以减轻服务器数据提交的数量,用户体验度也就能得到很大程度的提升。特别是对于大多数图片较多,加载速度较慢的Blog,AJAX是个非常不错的选择。
1、首先当然是挂载JQ库,如果您的主题已经挂载了JQ库,则本步骤可以略去,JQ版本保持在1.2.3以上。
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/index_ajax_navi.js"></script>
把下面代码保存为index_ajax_navi.js
上面代码中的相关ID,需要根据你自己主题修改一下
2、将如下代码写到你的后台functions.php中
3、把你主题的index.php写成两个文件,一个是框架文件,一个是index_list.php。是ajax请求需要重新加载的页面。这里要注意,并不是要写成这个样子,这是一种思想。就是index_list.php是需要被重新加载的,每个人把自己的index.php需要在点击页面之后重新加载的东西提出来,写到index_list.php之中即可。
index写成类似下面这样(每个人的主题都不同,请自己修改):
index_list.php写成这个样子:
<?php while (have_posts()) { the_post(); ?> <div id="post-<?php the_ID(); ?>"> <div><a href="<?php the_permalink() ?>" rel="bookmark" title="打开 <?php the_title_attribute(); ?> 吧,还等什么?"><h2><?php the_title(); ?></h2></a></div> <?php include (TEMPLATEPATH . '/myad/adindex.php'); ?> <div> <?php if(function_exists('wp_thumbnails_for_homepage')) { wp_thumbnails_for_homepage(); } ?> <span><?php the_time("M<b\i\g>j</b\i\g>") ?></span> </div> <div style="margin: 0;"> <?php the_content('<br />continue reading »'); ?></div> <div style="background:#E7E7DA;"> <span><?php the_category(', ') ?> </span> <span><?php comments_popup_link('添加评论', '1条评论', '%条评论'); ?> </span> <span><?php if(function_exists('the_views')) { the_views(); } ?> </span> </div> </div> <?php } ?> <div> <?php if (function_exists('pagenavi')) { pagenavi(); } ?> </div>
每个人的主题设置不同,上面部分步骤中有些地方需要根据自己的主题设置自己的参数。特别是包含分页链接的div的class。我这里是.pagenavi。还有就是包含index_list.php的 div id=”content”,需要在js中填入这两个关键的div。