有個朋友發信問我,我的邊欄那個刷新一下的效果是如何實現的。能不能分享?
其實,我這幾天就打算分享出來,就是時間不允許,現在就給大家分享下如何利用 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 直至全部結束,大功告成!