WordPress添加友情鏈接頁面(自動獲取favicon.ico圖標)

如何為你的Wordpress博客添加一個自動獲取favicon.ico圖標的友情鏈接頁面？今天就和大傢分享一下這個方法，來自zwwooooo大師的 WordPress: 帶 favicon.ico 顯示的友情鏈接自定義頁面 ，效果如下圖所示：

1. 上傳一個 16×16 大小的圖片作為木有 favicon.ico 的網站默認 ico，把圖片上傳到所用主題的 images 目錄下，這裡示例中默認 ico 圖片是 links_default.gif

2. 復制一份你主題的 page.php，改名為 page-links.php

3. 在 page-links.php 找到文章內容輸出函數 <?php the_content(); ?>，在其下面加入下面的代碼，註意看代碼註釋：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class="page-links">
    <h3>頁內鏈接</h3>
    <ul>
        <?php
        $default_ico = get_template_directory_uri().'/images/links_default.gif'; //默認 ico 圖片位置
        $bookmarks = get_bookmarks('title_li=&orderby=rand'); //全部鏈接隨機輸出
        //如果你要輸出某個鏈接分類的鏈接，更改一下get_bookmarks參數即可
        //如要輸出鏈接分類ID為5的鏈接 title_li=&categorize=0&category=5&orderby=rand
        if ( !empty($bookmarks) ) {
            foreach ($bookmarks as $bookmark) {
            echo '<li><img src="', $bookmark->link_url , '/favicon.ico" onerror="javascript:this.src='' , $default_ico , ''" /><a href="' , $bookmark->link_url , '" title="' , $bookmark->link_description , '" target="_blank" >' , $bookmark->link_name , '</a></li>';
            }
        }
        ?>
    </ul>
</div>

<div class="page-links">
<h3>頁內鏈接</h3>
<ul>
<?php
$default_ico = get_template_directory_uri().’/images/links_default.gif’; //默認 ico 圖片位置
$bookmarks = get_bookmarks(‘title_li=&orderby=rand’); //全部鏈接隨機輸出
//如果你要輸出某個鏈接分類的鏈接，更改一下get_bookmarks參數即可
//如要輸出鏈接分類ID為5的鏈接 title_li=&categorize=0&category=5&orderby=rand
if ( !empty($bookmarks) ) {
foreach ($bookmarks as $bookmark) {
echo ‘<li><img src="’, $bookmark->link_url , ‘/favicon.ico" onerror="javascript:this.src=” , $default_ico , ”" /><a href="’ , $bookmark->link_url , ‘" title="’ , $bookmark->link_description , ‘" target="_blank" >’ , $bookmark->link_name , ‘</a></li>’;
}
}
?>
</ul>
</div>

4. 為瞭好看點，你可以給 page-links 這個class定義一下樣式，可以參考一下：

1
2
3
4
5
6

.page-links{overflow:hidden;margin:0 0 24px;padding:0;}
.page-links h3{border-bottom:1px solid #bfbebe;text-align:center;margin:0;}
.page-links ul{margin:0;padding:5px 0 0 0;}
.page-links ul li{float:left;width:150px;line-height:16px;height:16px;margin:5px 5px 0;padding:0;list-style-type:none;}
.page-links ul li:hover{background:#f2f2f2;}
.page-links ul li img{width:16px;height:16px;margin:0 5px -2px 0;padding:0;border:none;}

.page-links{overflow:hidden;margin:0 0 24px;padding:0;}
.page-links h3{border-bottom:1px solid #bfbebe;text-align:center;margin:0;}
.page-links ul{margin:0;padding:5px 0 0 0;}
.page-links ul li{float:left;width:150px;line-height:16px;height:16px;margin:5px 5px 0;padding:0;list-style-type:none;}
.page-links ul li:hover{background:#f2f2f2;}
.page-links ul li img{width:16px;height:16px;margin:0 5px -2px 0;padding:0;border:none;}

5. 建立一個頁面，別名（slug）為 links 即可。

註：WordPress 3.5以後取消瞭鏈接管理功能，如果沒辦法顯示鏈接，請試試 https://www.wpdaxue.com/link-manager.html