無需外掛 利用 ajax 重新整理 WordPress 邊欄隨機文章

有個朋友發信問我，我的邊欄那個重新整理一下的效果是如何實現的。能不能分享？

其實，我這幾天就打算分享出來，就是時間不允許，現在就給大家分享下如何利用 ajax 重新整理 WordPress 邊欄的隨機文章吧。

DEMO

點選本部落格邊欄的 「重新整理一下」 就可以看到。

如何實現？

首先確認你的主題中呼叫了 js 庫，在主題檔案 header.php 可以找到以下程式碼 。沒有的話，請複製貼上放在標籤前。

<script type="text/javascript" src="http://googleajax.admincdn.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

1 確定隨即文章程式碼中 id 的範圍。本部落格的隨機文章 html 程式碼大致如下所示。你也可以在你的
網站模板中找到類似的程式碼。每個主題的呼叫函式大同小異，中間一大串的程式碼可以忽略。

<h2 > 推薦閱讀</h2>
<div id="postlist1">
 <ul >
  <?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%20the_permalink()%20?>"
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%20the_permalink()%20?>"
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 直至全部結束，大功告成！