首页 > WordPress > WP Trick > 添加"随机一句话"

添加"随机一句话"

昨天在 yinheli 那里看了他用 jQueryAjax 实现的一个东西—"随机一句话".很想在我的 Blog 上也加上,可是看了半天加在哪里都不好看,又想了半天,终于决定:当做 Blog 的 "description" 来显示.但只是显示文字又不美观,于是我又把它改成图片方式显示,反正也就几个小图片,一个也就几百字节,几个也就几K.

"服务器端代码是借鉴的wordpress自带的一个插件 Hello Dolly .它能在后台随机显示一句话.但是不支持Ajax.我们要做的是把他弄到前台显示.并实现Ajax刷新的效果."

最终效果,大家可以点击我的 Blog 标题下的文字,点击可以刷新.那怎么实现的呢...

1.在主题functions.php里加入如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
function Philna_some_words_to_show() {
$options = get_option('philna2_options');
$words = '人生就像一场旅行,不必在意目的地,在乎的是沿途的风景和看风景的心情.
换个角度,换个心态,世界将变得不一样.
微笑是最奇妙的轻功,抱怨是最两败俱伤的负面能量.
Hello, Dolly.
Hello world.
//other words.';
	// Here we split it into lines
	$words = explode("\n", $words);
 
	// And then randomly choose a line
	return ($words[ mt_rand(0, count($words) - 1) ]);
}
function philna_say(){
	$chosen = Philna_some_words_to_show();
	echo '<p id="philna_say" title="随便看看">'.$chosen.'</p>';
}
function philna_say_ajax(){
	if(isset($_POST['refresh'])){
	echo Philna_some_words_to_show();
	die();
	}
}
add_action('init', 'philna_say_ajax');
?>

在 yinheli 原来的代码中 $words = ' 后面换行了,貌似这样会导致有时候刷新后什么都不显示.还有,为了能在 IE 下也能刷新正常.把原来的 AJAX 的 Get 请求换成了 Post 请求.

2.主题需要的地方调用

<?php philna_say();?>

这样你已经实现了随机一句话显示.接下来实现Ajax.我们用jQuery来实现.

3.在js里加载如如下代码.(需要先加载jQuery类库)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function(){
	var say=$('#philna_say');
	say.click(function(){
	$.ajax({
	url: window.location.href,
	type:'POST',
	data: "refresh=philna_say",
	dataType:'html',
	beforeSend:function(){
		say.css('color','#000').hide('slow');
		setTimeout(function(){say.html('<span id="sayload"></span>').show('fast');},500);
		},
	error:function(request){
		say.html('Whoops! Something went wrong.Sorry');
		},
	success:function(data){
	setTimeout(function(){say.hide();say.html(data).show('slow');},2000);
	say.css('color','#8E8E8E');
	}
	})
	})
})

4.你还需要写些CSS来控制样式.

如:我用的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#philna_say{
	position:absolute;
	top:85px;
	font-size:12px;
	color:#8E8E8E;
	cursor:pointer;
	line-height:12px;
}
#sayload{
	background:url(img/sayload.gif) no-repeat;
	display:block;
	width:18px;
	height:18px;
}
声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 添加"随机一句话"
分类: WP Trick 标签: , , , ,
  1. Jayer | #1
    2010年6月1日17:24

    yinheli的主题也是基于inove吧~很炫~

  2. ③秋之流☆ | #2
    2010年6月1日18:17

    @Jayer
    刚开始时..貌似是以mg12的另一个主题和老徐的主题为蓝本吧...

  3. 海天 | #3
    2010年7月13日15:28

    不错 这个很好玩 以后我也加个看看~

  1. 本文目前尚无任何 trackbacks 和 pingbacks.