Question to say "I can!"

wordpress創建個性化的友情鏈接頁面

2013-12-04

首先可以看一下我的友情鏈接頁面:

http://www.vbnpbr.co/links

實現這個效果要感謝koya的文章幫助,結合自己的主題,創建步驟如下:

 

1.寫links.php文件,這個不用多說了,可以在你的主題中引用其他的模版文件,在內容部分進行修改。

我的是這樣寫的

<div itemprop="description">
<div>
<ul>
<?php wp_list_bookmarks('title_li=&categorize=0&show_images=1'); ?>
</ul>
</div>

關于wp_list_bookmarks函數,你可以搜索一下,根據你的需要,修改參數,因為我不進行分類,所以categorize=0。

 

2.在style.css中添加優化鏈接列表的樣式,代碼如下:

.link-content{display:block;margin-bottom:20px;width:100%}
.link-content ul,li {list-style:none}
.link-content? ul{list-style:none;overflow:hidden;width:100%}
.link-content ul li{float:left;margin:10px 16px 10px 16px}
.link-content ul li a{display:block;overflow:hidden;width:110px;height:25px;color:#444;font-size:12px;line-height:25px}
.link-content ul li img{float:left;margin:4px 8px 2px 6px;width:16px;height:16px;line-height:16px}

這里要說的是,為什么要加.link-content ul,li {list-style:none}這一句呢?因為ul具有繼承性,如果你前面.entry-content里有定義ul的樣式,那么很可能會被加載到這里,然后在不同的瀏覽里顯示不一樣的效果,我原來沒有加這一句時,鏈接的前面總會有個黑點,這個黑點就是因為.entry-content里定義的ul樣式繼承來的。所以,這里要再重新注銷一下。

 

3.如果你還想再美觀一點,那就在鏈接的前面加上對方網站的favicons吧,代碼如下:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(".link-content a").each(function(e){
$(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http:\/\/[^\/]+).*$/, '$1').replace( 'http://', '' )+">");
});
</script>

把這個放在第1部分代碼的后面就可以了。這段jQuery的意思是遍歷所有class為link-content下所有的a標簽,然后對該a標簽添加img,其中是“.link-content”要根據自己的模板更改。

 

4.最后用創建頁面的方法,頁面模板選擇“鏈接模板”,就創建成功了(如果你的代碼復制進去不成功,那有可能是標點符號的原因)。

作者:admin | Categories:設計問題 | Tags:

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 山西11选5开奖 重庆体彩百变王牌走势图 福彩3d和尾走势图 爵士vs雷霆 36选7走势图大全 内蒙古十一选五每天开奖结果 山西11选五走势图一定牛 云南快乐十分开奖结果查询今天一定牛 黑龙江36选7开奖公告 老鹰vs凯尔特人录像 三分pk拾什么时候开盘 黑人大战上原亚衣ed2k 3d预测汇总 乌鲁木齐沐足按摩论坛网址 大乐透周六走势图 手机麻将游戏那个好