如何利用ajax獲取wordpress邊欄信息
來源:易賢網(wǎng) 閱讀:811 次 日期:2016-06-21 10:09:53
溫馨提示:易賢網(wǎng)小編為您整理了“如何利用ajax獲取wordpress邊欄信息”,方便廣大網(wǎng)友查閱!

上一次的文章可能說的太含糊了,所以部分朋友提出了一些疑問(我太偷懶了),所以經(jīng)過很很長時間的考慮,終于決定在今天寫第二部分。相對于前一篇,本篇是威力加強(qiáng)版,增加的內(nèi)容主要有:1、如何輸入兩個參數(shù);2、提供完整的代碼。歡迎繼續(xù)觀看。

上篇鏈接:ajax獲取wordpress邊欄信息(一)

jquery官方給出的ajax的例子不再敘述,相信很多同學(xué)由于英語或者其他原因,看了也是有點(diǎn)不太明白腫么回事。我這里主要說說在 wordpress里怎樣通過它來控制側(cè)邊欄的異步獲取和輸出,就像前一篇所說的那樣。還有某些朋友好奇的:目前的ink主題側(cè)欄的點(diǎn)擊某項目才調(diào)取相關(guān) 內(nèi)容。關(guān)于這個依然需要3個步驟:

1、function.php里寫入相應(yīng)的函數(shù)

function ajaxload(){

if( isset($_get['action'])){

if($_get['action'] == 'ajax_slidepage' ){

if($_get['page'] == 'pagenum2'){

echo '<ul>';

get_most_viewed('',8,0 ,0 ,' 次瀏覽');//這個相信都知道是什么吧……被瀏覽最多的文章

echo '</ul><p>';

}

else{

echo '<ul>';

get_archives('postbypost', 8);

echo '</ul><p>';

}

die;

}

}

}

addaction('init', 'ajaxload');

上面這段函數(shù)里,主要完成了兩件事:獲取action和page的值;顯示相應(yīng)的內(nèi)容。其中前一步驟即是本文重點(diǎn)–兩個(或多個)參數(shù)的輸出。如何確定這個參數(shù)呢?這就需要下面的步驟完成了:

2、js部分:

function ajaxslidepage(b,c) {

$.ajax({

url: 'http://127.0.0.1/?action=ajax_slidepage&page='+c,

type: 'get',

beforesend: function() {

var loading = '載入中';

$(b).empty().html(loading)

},

error: function(a) {

$(b).empty().html('載入失敗')

},

success: function(a) {

$(b).empty().html(a);

}

});

return false

};

注意這段語句中action=ajax_slidepage&page=’+c這一行,這就是步驟1中$_get['action']和$_get['page']的具體所指。

接著定義具體的點(diǎn)擊行為:

$('#slider4 .pager a.pagenum').click(function() {

$('#slider4 .pagenum').removeclass('active');

next = $(this).attr('rel');

next = -next*305;

$('#slider4 .overview').animate({'left':next});//點(diǎn)擊后的滑動效果

$(this).addclass('active');

var id = $(this).attr('id'); //獲取點(diǎn)擊的該pager的id

var show = id == 'pagenum2'?'#page2':'#page3'; //根據(jù)id查找下面對應(yīng)顯示的項目

if($(show).find('ul').length == 0){ //判斷,使僅載入一次

ajaxslidepage(show,id); //調(diào)用,在id=xx中顯示對應(yīng)內(nèi)容

}

event.preventdefault(); //阻止默認(rèn)行為(此處為鏈接點(diǎn)擊)

});

3、呼,下面是邊欄寫入的內(nèi)容:

(注意,這里集成了側(cè)欄的滑動pager效果,具體見ink主題的newcomments…部分)

<li id=slider4>

<ul class=pager>

<li><a href=# class=pagenum rel=0>newcomments</a></li>

<li><a href=# class=pagenum id=pagenum2 rel=1>hotposts</a></li>

<li><a href=# class=pagenum id=pagenum3 rel=2>newposts</a></li>

</ul>

<div class=viewport>

<ul class=overview style=width: 1500px; left: 0px; >

<li class=page>

<ul class=recentcomments>

我用的是最近評論,這個推薦

zww大叔的方法 http://zww.me/archives/24818

</ul>

</li>

<li class=page id=page2></li>

<li class=page id=page3></li>

</ul>

</div>

</li>

我目前用的css代碼也貼出來吧:

#slider4 { height: 1%; overflow:hidden; display: block; padding: 0 0 16px 0; margin: 0;}

#slider4 .viewport { width: 308px; border-left:1px solid #e3e3e3;border-right:1px solid #e3e3e3;border-bottom:4px solid #e3e3e3;background-color:#fff;height: 277px; overflow: hidden; position: relative; }

#slider4 .pager { overflow:hidden;border:1px solid #ddd; height: 1%; list-style: none; clear: both; margin:0; }

#slider4 .pager .micon{background-position: -147px -40px;margin-top:7px}

#slider4 #pagenum2 .micon{background-position:-72px -40px}

#slider4 #pagenum3 .micon{background-position:-48px -40px}

#slider4 .pager li { float: left; }

#slider4 .pagenum { background-color: #fff; text-decoration: none; text-align: center; padding: 5px; color: #555555; width:60px;line-height:35px;height:35px;text-indent:-9999px; font-weight: bold; display: block; }

#slider4 .active { color: #3e3e3e; background-color: #bbb;width:158px;text-indent:0; }

#slider4 .overview { list-style: none; position: absolute; width: 308px; left: 0;top: 0; }

#slider4 .overview .page{ float: left; height: 265px; width: 310px;line-height:23px}

#page2,#page3{padding-top:7px}

#slider4 .page ul li{padding:4px 6px 4px 12px;color:#9a9a9a;list-style:circle inside;}

其實主要的就是步驟1和2,這里用到的主要是ajax的get方法,當(dāng)然還有post方法,這個還沒搞清楚區(qū)別,留待以后分析。

更多信息請查看CMS教程
易賢網(wǎng)手機(jī)網(wǎng)站地址:如何利用ajax獲取wordpress邊欄信息
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!
相關(guān)閱讀CMS教程

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

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