友情鏈接對(duì)于一個(gè)每個(gè)獨(dú)立博客來(lái)說(shuō)可以說(shuō)是必須的,有不少人選擇在側(cè)邊欄加入友情鏈接欄目,但建立一個(gè)獨(dú)立的友情鏈接頁(yè)面也是一個(gè)不錯(cuò)的選擇。用插件可以輕松做到這一點(diǎn),但喜歡原生的我,能自己動(dòng)手解決,還是自己動(dòng)手解決好。折騰了一下,方法就出來(lái)了。
普通方法
建立一個(gè)友情鏈接頁(yè)面的步驟也是比較簡(jiǎn)單的,先建立一個(gè)新的頁(yè)面模板,用友鏈函數(shù)調(diào)用友鏈,再加上css美化,事情就完成了。
下面說(shuō)說(shuō)具體的步驟
1.建立一個(gè)新的模板頁(yè)面
復(fù)制主題中的page.php文件,重命名為links.php。
在頁(yè)面的頂部加入如下代碼
<?php/*Template Name: Links*/?>
再把類似下面的一段代碼
<div class="post-content"><?php the_content(); ?></div>
替換為
<div class="lists"><p class="tips">站點(diǎn)隨機(jī)排序</p><?php wp_list_bookmarks('orderby=rand&show_images=1'); ?></div>
替換后把links.php放在主題文件夾根目錄,然后新建一個(gè)頁(yè)面,在頁(yè)面模板中選擇剛建立的“Links”,保存。
解釋一下上面的代碼
my_list_bookmarks是WordPress調(diào)用友鏈的函數(shù),orderby是友鏈的排序方式,這里我寫(xiě)的是rand,也就是隨機(jī)show_images是控制是否顯示友鏈的圖片,布爾型變量,1代表顯示變量,0代表不顯示,其他可選參數(shù)如下:
categorize
布爾型,用于設(shè)置連接是否按照各自的分類顯示category
字符串型,后面就直接 “=鏈接分類ID號(hào)”,那么就顯示這個(gè)分類下的鏈接。如果沒(méi)有指定的話就顯示所有的鏈接。
category_name
字符串型,如果后面 “=某個(gè)鏈接分類的名稱” 那么就會(huì)在該鏈接分類前顯示分類的名稱,如果這里留空的話則會(huì)顯示所有鏈接分類的分類名稱(即默認(rèn)的形式)。
category_before
字符串型,位于鏈接分類之前的文字或代碼。
category_after
字符串型,位于鏈接分類之后的文字或代碼。
class
字符串型,每一個(gè)鏈接的分類都會(huì)有一個(gè) “class” 屬性(從上面的代碼就能看出),默認(rèn)是:linkcat
category_orderby
字符串型,鏈接分類的排序方式,按照名詞或者ID。
‘name' (默認(rèn))
‘id'
category_order
字符串型,鏈接分類的升降序排列方式:
ASC (默認(rèn))
DESC
title_li
字符串型,鏈接標(biāo)題的頭文字或代碼,默認(rèn)是:Bookmarks,并且它控制連接是否按照列表的方式排列。
title_before 和 title_after
顧名思義,它們就是連接標(biāo)題頭前后的文字或代碼,默認(rèn)是 h2 標(biāo)簽
show_private
布爾型,是否顯示私有鏈接。
include
字符串型,輸出指定 ID 的 Blogroll 的分類鏈接,各個(gè) ID 之間用半角的 “,” 分開(kāi)。默認(rèn)顯示所有的 Blogroll 分類。
exclude
字符串型,將指定 ID 的 Blogroll 分類鏈接從整個(gè)鏈接列表中排除,各個(gè) ID 之間用半角的 “,” 分開(kāi)。默認(rèn)是什么都不排除。
orderby
字符串型,Blogroll 的排列方式(默認(rèn)是根據(jù)名稱排序,除非將這個(gè)值留空),即根據(jù)我們?cè)?WP 后臺(tái)鏈接設(shè)置界面下的那些參數(shù)來(lái)進(jìn)行排序:
(1)'id'
(2)‘url'
(3)‘name'
(4)‘target'
(5)‘description'
(6)‘owner'
(7)‘rating'
(8)‘updated'
(9)‘rel' – 按設(shè)定的關(guān)系排列
(10)‘notes'
(11)‘rss'
(12)‘length' – 連接名稱的長(zhǎng)度設(shè)定
(13)‘rand' – 隨機(jī)排列顯示
order
字符串型,設(shè)置升降序的排列方式
ASC (默認(rèn))
DESC
limit
整型,設(shè)置輸出鏈接條數(shù)的最大值。默認(rèn)值是”-1″,輸出全部。
between
字符串型,每個(gè)連接、圖片和描述之間的文字或代碼,默認(rèn)是 “n” 換行。
show_description
布爾型,是否允許顯示每個(gè)鏈接的描述。
show_rating
布爾型,是否允許顯示鏈接的等級(jí)。
show_updated
布爾型,是否允許顯示最近更新后的時(shí)間戳。
hide_invisible
布爾型,是否顯示所有的鏈接,甚至是被管理員設(shè)為不可見(jiàn)的鏈接,默認(rèn)允許顯示。
2.添加css美化,以下是個(gè)人的css,供大家參考
.lists {padding: 5px; margin: 25px auto auto 0;}.linkcat {font-size: 12px; font-weight: bolder; padding: 5px; margin-bottom: 15px; list-style: none; clear:both}.lists li h2 {font-size:14px; margin-bottom: 15px; color: #99CC33; }.listcat ul {margin-left: 20px;}.linkcat ul li {float: left; margin-bottom: 20px; margin-left: 20px; padding: 4px 0 4px 6px; width: 150px; border: 1px solid #d9d9d9;}.linkcat ul li a {color: #a4a4a4; text-decoration: none;}.linkcat ul li a img {margin-right: 3px;}.linkcat ul li a:visited {color: #a4a4a4;}.tips {font-size: 14px; margin-bottom: 18px; margin-left: 5px;}
使用jQuery
具體實(shí)現(xiàn)步驟分兩步:
1.加載jQuery庫(kù),可以直接調(diào)用google jQuery庫(kù)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
$(".linkpage a").each(function(e){$(this).prepend("<img src=http://www.google.com/s2/favicons?domain="+this.href.replace(/^(http:////[^//]+).*$/, '$1').replace( 'http://', '' )+">");});