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