添加"随机一句话"
昨天在 yinheli 那里看了他用 jQuery 的 Ajax 实现的一个东西—"随机一句话".很想在我的 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; } |

yinheli的主题也是基于inove吧~很炫~
@Jayer
刚开始时..貌似是以mg12的另一个主题和老徐的主题为蓝本吧...
不错 这个很好玩 以后我也加个看看~