WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › WordPress 新版 36Kr AJAX切换显示内容实现方法

WordPress 新版 36Kr AJAX切换显示内容实现方法

PCDotFan10年前

帮客户修改网站时遇到这问题……36Kr 又换新版了,比较讨客户喜欢的功能是:首页切换分类目录,可是——本屌不会 jQuery 哇!

很久以前就想折腾这个效果了,以前一直没搞定,后来一直没时间。现在,我把步骤记录下来,留待以后折腾。本文为实现方法之一,其他方式还有1、2、3,有待验证。正文开始:wordpress首页ajax翻页实现方法。关于为什么要对wordpress博客的首页进行ajax分页,有人说wordpress首页采用ajax分页可以减轻服务器数据提交的数量,用户体验度也就能得到很大程度的提升。特别是对于大多数图片较多,加载速度较慢的Blog,AJAX是个非常不错的选择。

1、首先当然是挂载JQ库,如果您的主题已经挂载了JQ库,则本步骤可以略去,JQ版本保持在1.2.3以上。

 

JavaScript

 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/index_ajax_navi.js"></script>

把下面代码保存为index_ajax_navi.js

var navi='.pagenavi';//变量声明 .pagenavi换成你主题中分页的CSS类名
var navi_a='.pagenavi a';//变量声明 .pagenavi a换成你主题中分页a标签的CSS类名
var content='#content';//变量声明 #content换成你主题中用于AJAX刷新部分的ID名
$(document).ready(function index_ajax_navi (){
$(navi_a).click(function() {
var z = $(this).attr("href");
$.ajax({
url: z,
type:"POST",
data:"action=index_ajax_navi",
beforeSend:function()
{
document.body.style.cursor = 'wait';
var C=1.0;
$(content).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});
$(navi).html('<img src="loading图片的路径"><a>正在加载中...</a>');
},
error: function(request)
{
alert(request.responseText);
},
success: function (data)
{
$(content).html(data);
document.body.style.cursor = 'auto';
var C=1; //设置翻页的时候,AJAX部分的透明度,可以为0.5;0.6等
$(content).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});
//$body.animate({ scrollTop: '0px'}, 1000);
index_ajax_navi();//翻页后DOM发生变化,重新绑定该函数
//$body.animate( { scrollTop: $(content).offset().top - 150}, 1000);
//$body.animate({ scrollTop: '0px'}, 1000);
jQuery('html, body').animate({scrollTop:$(content).offset().top - 100}, 'slow');
}
});
return false;
});
})

 

 上面代码中的相关ID,需要根据你自己主题修改一下

2、将如下代码写到你的后台functions.php中

function index_ajax_navi(){
if( isset($_POST['action'])&& $_POST['action'] == 'index_ajax_navi'){
include_once TEMPLATEPATH.'/index_list.php'; //注意修改为你自己的文件的位置
die();
}else{
return;
}
}
add_action('template_redirect', 'index_ajax_navi');

 

3、把你主题的index.php写成两个文件,一个是框架文件,一个是index_list.php。是ajax请求需要重新加载的页面。这里要注意,并不是要写成这个样子,这是一种思想。就是index_list.php是需要被重新加载的,每个人把自己的index.php需要在点击页面之后重新加载的东西提出来,写到index_list.php之中即可。

index写成类似下面这样(每个人的主题都不同,请自己修改):

<?php get_header(); ?>
<?php
$posts = query_posts($query_string . '&orderby=date&showposts=8');
pre_next();
?>
<div id="content">
<?php include_once TEMPLATEPATH.'/index_list.php'; ?>
</div> <!--end: content-->
<?php wp_reset_query(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

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 &raquo;'); ?></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。

#AJAX#ajax分页#CSS#functions.php#博客
2
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (0)
再想想
    沙发抢一发
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
Nginx下让WP Super Cache支持"mod_rewrite"模式
9年前
让WordPress评论框支持优酷土豆的视频代码
10年前
WordPress 新版 36Kr AJAX切换显示内容实现方法
10年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1