无需插件 利用ajax刷新wordpress边栏随机文章
发布时间:2011-09-06 19:32:38
有个朋友发信问我,我的边栏那个刷新一下的效果是如何实现的。能不能分享?
其实,我这几天就打算分享出来,就是时间不允许,现在就给大家分享下如何利用ajax刷新wordpress边栏的随机文章吧。
DEMO
点击本博客边栏的 “刷新一下”就可以看到。
如何实现?
首先确认你的主题中调用了js库,在主题文件header.php可以找到以下代码 。没有的话,请复制粘贴放在标签前。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
1 确定随即文章代码中id的范围。本博客的随机文章html代码大致如下所示。你也可以在你的主题模板中找到类似的代码。每个主题的调用函数大同小异,中间一大串的代码可以忽略。
<h2 class="sub">推荐阅读</h2>
<div id="postlist1">
<ul class="spy">
<?php $my_query = new WP_Query('orderby=rand&showposts=5'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post();?>
<li><?php $screen = get_post_meta($post->ID, 'screen', $single = true); ?>
<h2 style="overflow:hidden;"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
</li>
?php endwhile; ?>
</ul>
</div>
<a href="#" id="another">刷新一下</a>
其中,你还需要添加个“刷新一下”到你的随即文章代码里 。也就是下面的代码。
<a href="#" id="another">刷新一下</a>
同时注意在 ul 标签前面的ID “postlist1” 和最后一个包裹“刷新”的ID “another”,下面的步骤会用到。
2 创建一个页面模板,名为Random Post。PS:下面的代码不要照搬。其中的随即文章调用函数从自己当前使用的主题中的sidebar.php直接复制进来。
<?php
/*
Template Name: Random Post
*/
?><?php $my_query = new WP_Query('orderby=rand&showposts=5'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post();?>
<li><?php $screen = get_post_meta($post->ID, 'screen', $single = true); ?>
<h2 style="overflow:hidden;"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2></li>
<?php endwhile; ?>
3 创建一个使用上面模板的页面,并发布。
大家可以点击这里查看本站的这个页面 /random
4 jQuery
复制粘贴以下代码到你主题 header.php文件中,放在标签前。
其中的#polist1 和#another 在步骤一找到,结合你自身的主题更改。
<script type="text/javascript" charset="utf-8">
$().ready(function(){
$("#postlist1").load("/random/?offset="+offset);
$("#another").click(function(){offset = offset+5;
$("#postlist1")
.slideUp()
.load("/random/?offset="+offset, function() {
$(this).slideDown();
});});
</script>
5 直至全部结束,大功告成!
原文地址:这里
猜你喜欢
- Microsoft.com 从6月12日开始运行Windows Server 2008 Beta 3到现在已经有将近三个月了。 微
- 在本文中,学习如何使用开源的 Clonezilla Live 克隆软件将物理服务器转换成虚拟服务器。具体而言,就是如何使用基于映像的方法将物
- 内部链接的重要性就不详细说了。无论用户还是搜索引擎如果访问完你的内容页发现没有链接可去了。都是非常不科学的。网站内部链接优化有哪些?1.网站
- 08年,淡淡风带着几许兴奋几许忧伤淡淡的带队进京,然而仅仅一年,三月份便被北京闪了一下腰,由于某种原因从ku6辞职了。一时phpcms论坛炸
- 对于Exchange服务器的备份可以分成两个主要的目标。首先是对整个系统数据的备份。这一工作包括了对Windows操作系统的核心数据、服务器
- 一、前期准备一个成功的个人网站,先期的准备工作是很重要的,好的开始等于成功的一半。在这一阶段有两个主要的问题需要考虑。1、站点的定位:主题的
- 很站长觉得网站权重就是排名,其实权重和排名还是有区别的。网站权重:网站权重说明一个网站的权威性。也可以理解为网站的知名度,就如NOKIA知名
- 可能有些内容和网上其他人的相似,但也是我的个人验证总结过的,欢迎大家有经验验证的继续补充交流:1、首页广告切忌不能乱投,弹出类广告更是大大的
- Google帐户会默认绑定一个邮箱地址作为主关联邮箱,用户可直接用邮箱信息(比如邮箱地址、密码)登录Google的各种产品及服务。而现在,G
- 核心提示:用 Analytics 分析用户在站内的搜索行为,很简单但数据的参考作用较大。这次在石互动2008上海SEO大会上讲到通过“分析用
- 影响版本:DedeCms V 5.3程序介绍:DedeCms 基于PHP+MySQL的技术开发,支持Windows、Linux、Unix等多
- 由于多数是国内空间转国外空间的朋友,所以碰到最多的问题集中在对WHM+cPanel使用上的不了解,而WHM+cPanel的这种集众多功能于一
- 超好用的国产图片处理软件美图秀秀刚刚发布了2.0.6新版,在原有众多功能的基础上继续优化,也更为稳定的支持Windows 7系统。如果你还没
- 核心提示:根据网站网页关键词进行淘宝推广商品自动搜索、采集、显示,真真实现淘宝推广全自动化,推广信息永不失效。自淘宝网推出淘宝客以来,无数的
- 众所周知,搜索引擎搜索会显示付费结果和自然排名的结果,但这些结果是怎么样显示在大家的面前的呢?大家先回忆一下,我们是如何搜索的?“输入搜索关
- 一、网站推广目标线下推广是跟博客推广,论坛推广,搜索引擎推广等线上推广相反的一种推广方式,它更侧重于传统模式的而非网络模式的推广,注重实际生
- Google和百度对Description态度不同,Google黑板报和中文网站管理员博客发表了一篇翻译自去年的文章:使用更好的元描述来改善
- 3、 MIME 绑定WSDL包含了以某种MIME格式将抽象类型与具体消息绑定在一起的方式。为下列MIME类型定义了绑定:multipart/
- 北京时间10月14日上午消息,据国外媒体报道,消息人士透露,温思坦影业(Weinstein Company)准备将旗下富豪社交网络ASmal
- 几个月前我问网友:对于网赚联盟营销,他们最希望了解什么。经过筛选,我挑出了15个问题。然后找到了三个朋友,让他们来回答这15个关于网赚联盟