無需插件 利用ajax刷新wordpress邊欄隨機文章
來源:易賢網 閱讀:755 次 日期:2016-06-28 09:19:33
溫馨提示:易賢網小編為您整理了“無需插件 利用ajax刷新wordpress邊欄隨機文章”,方便廣大網友查閱!

有個朋友發(fā)信問我,我的邊欄那個刷新一下的效果是如何實現的。能不能分享?cms教程欄目

其實,我這幾天就打算分享出來,就是時間不允許,現在就給大家分享下如何利用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 創(chuàng)建一個頁面模板,名為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 創(chuàng)建一個使用上面模板的頁面,并發(fā)布。

大家可以點擊這里查看本站的這個頁面 /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 直至全部結束,大功告成!

更多信息請查看CMS教程
由于各方面情況的不斷調整與變化,易賢網提供的所有考試信息和咨詢回復僅供參考,敬請考生以權威部門公布的正式信息和咨詢?yōu)闇剩?/div>
相關閱讀CMS教程

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權所有:易賢網