WordPress.個性友情鏈接頁面的建立及美化

公元2011年07月15日博主被65人群毆打醬油看熱鬧的有:11,891 views

WordPress.個性友情鏈接頁面的建立及美化

最近要添加的友鏈慢慢多了,首頁頂不住,所以尋思著放到內頁去,這樣來講可能對有些友鏈首頁黨不太友好,不過本人在此聲明一下:

本人做友鏈是為了互訪,最起碼做了友鏈後基本上博友有新文章和新動態我都會去支持和回復,也就是友鏈對我來說就是個互動的傳送門,不存在什麼處心積慮的優化,如果哥們是為了優化自身而做友鏈的,請刪除本博客鏈接後過來通知聲就好了,好聚好散嘛!如果哥們是為了博客互動,增進彼此間的交流,放心,不管鏈接在哪?我都會在你的博客裏留下拉風的身影!這個可以放心!

下面說回正題,曾經看到過很多人做友鏈頁面,美化的挺好的,但是當時因為自己友鏈都是在首頁,也沒太在意,現在用到了才想到去研究,貌似都有臨時抱佛腳的心態,呵呵,於是找了個比較相熟的博友:!詢問友鏈頁面的實現方法,在得其幫助下,終於建立好了自己的友鏈頁面,並且做了簡單的美化,效果如下:點擊查看

下面把具體實現的步驟和方法曬出來:由此想法的可以按照下列步驟操作

首先找到自己使用模板下的page.php頁面,直接復制出來!然後名字改為link.php(link可以換,隨便你起什麼名字)

然後打開這個改名後的php文件,在最上面添加如下代碼:

1
2
3
4
5
<?php
/*
Template Name: Links Page Template PAGE
*/
?>

接著在這個文件中繼續找到下面的這段代碼:

1
2
3
4
5
<?php
<div class="entry">
<?php the_content(); ?>
</div><!--/entry -->
?>

將其替換為:

1
2
3
4
5
6
<?php
<div class="entry">
<?php wp_list_bookmarks('categorize=1&category=XX,YY,ZZ&
category_orderby=id&before=<li>&after=</li>&show_images=0&
show_description=1&orderby=name&title_before=<h3>&title_after=</h3>'); ?>
</div><!--/entry -->

因為有些主題的寫入習慣不同,沒有以上那段代碼,那麼可以嘗試找出下面這段代碼:

1
2
3
4
<?php
<div class="post-content">
<?php the_content(__(''));?>
</div>

將其替換為:

1
2
3
4
5
6
<?php
<div  class="linkpage">
<ul><?php wp_list_bookmarks('categorize=1&category_orderby=id&before=<li>&after=
</li>&show_images=0&show_description=0&orderby=name&title_before=
<h3>&title_after=</h3>'); ?></ul>
</div>

這樣基本就完成了,將修改好的這個php文件保存,然後上傳至服務器主題文件夾的根目錄下,傳好後返回wordpress管理後臺,新建一個頁面,並在右側的頁面模板中選擇剛剛新建立的:"Links Page Template PAGE",然後點保存即可

下面對設置的一些參數進行標註和解釋下,希望有想個性化顯示的朋友能夠有個參考,具體如下:

categorize=1 — 顯示所有 Blogroll 的分類;
category=XX,YY,ZZ — 指定顯示 ID 為 XX YY ZZ 的 Blogroll 分類,
如果您的 Blogroll 沒有一個總的大分類話,這個參數可以去掉,
因為上一個參數已經指定了顯示所有分類;
category_orderby=id — 分類按照 ID 號進行排列,
假如 XX>ZZ>YY 那麼最終顯示的順序就是:XX 分類下的鏈接、ZZ 分類下的鏈接、YY 分類下的鏈接;
before 和 after — 每個連接前後都用 li 標簽套起來;
show_images=0 — 不顯示鏈接的圖片;
show_description=1 — 顯示連接的描述;
orderby=name — Blogroll 的鏈接根據其名稱排序;
title_before 和 title_after — 分類標題前後用 h3 標簽套起來(這個因站而異)。

如果想給這個新建的友鏈鏈接頁面進行美化的話,就在主題的style裏加入以下css美化代碼,然後根據自己的偏好進行設置就好了:

1
2
3
4
5
6
7
8
9
10
<?php
.linkpage ul {padding: 5px 6px;list-style-type: none;overflow:auto}
* html .linkpage ul{ height:1%;}
.linkpage ul li {color: #333;margin-bottom: 5px;font-size: 12px;}
.linkpage ul li ul li {float: left;width: 141px;text-align: 
center;margin: 3px 3px;line-height: 180%;
background-color: #FFFFFF;border: 1px solid #dadada;}
.linkpage ul li ul li a {color: gray;display: block;}
.linkpage ul li ul li a:hover {
background-color: gray;color: #FFFFFF;font-weight:bold;}

這樣就算是完成了友情頁面的簡歷及其美化,當然,如果想更炫還能加入JQ特效,這個調用後加載特效代碼就好了,具體問題具體搞定,基本上沒什麼難的,生命不息,折騰不止,恩,大概就是這樣了,Over!手工!在操作工程中如遇問題請留言溝通,祝君好運!

65 位最佳損友留下了真知見解!
  1. CHINA 留言于:2011年09月22日00:49 #41℃ @Ta

    哈哈,累了,不想折騰了,這個功能我就用我家的墻來代替吧!!
    呵呵

  2. CHINA 留言于:2011年09月12日19:40 #42℃ @Ta

    這個怎麼用,一頭霧水

  3. CHINA 留言于:2011年09月09日22:11 #43℃ @Ta

    這麼專業啊,給我也來一個友鏈?(*^__^*) 嘻嘻……

    • 留言于:2011年09月09日22:22 @Ta

      @雨帆 :
      好的
      站點名稱
      站點描述
      站點地址
      搞起~!

      • CHINA 留言于:2011年09月09日23:33 @Ta

        @心淡若水 :
        站點名稱:雨帆
        站點描述:一個愛好文學的小博客
        站點地址:http://yufan.me/

  4. CHINA 留言于:2011年08月30日09:13 #44℃ @Ta

    剛好需要調整另一個站的友情鏈接,就在你這找到方法了!謝謝分享!