程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> PHP基礎知識 >> wordpress創建個性化的友情鏈接頁面

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

編輯:PHP基礎知識
 

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

 
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved