現在給大家分享下如何利用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 直至全部結束，大功告成！