今天要跟大家分享的主題製作學習筆記,就是友情連結頁面。大家或許會覺得奇怪,這有什麼好著墨的,畢竟我們只要新增一個網誌分頁就能得到友情連結頁面了,不是嗎?但是,你知道內容要怎麼寫嗎?又,我們該如何把友情連結頁面變得有特色呢?如果不明白,大家可以看看我的連結頁面,就知道我的意思了。
要跟大家先說明的是,這個技巧,是由大陸網友萬戈那裡看到的,在此先謝謝萬戈分享的教學,並且感謝原創朋友 Bronco 的代碼提供!
接下來第一個步驟,請你們新增一個 links.php 的模板檔案,請將以下代碼複製到你的檔案裡:
<?php /* Template Name: Links */ ?> <?php get_header(); ?> <div id="linkcontent"> <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <div class="linkpost" id="post-<?php the_ID(); ?>"> <div class="linkpage"> <?php my_list_bookmarks('categorize=1&category_orderby=id&before= <li>&after=</li> &show_images=1&orderby=name&title_before= <h4>&title_after=</h4> '); ?> </div> <div style="clear:both;"></div> </div> <?php endwhile; ?> <?php endif; ?> </div> <?php get_footer(); ?>
這裡順便講解連結頁面屬性(div class="linkpage")的那段代碼意思:
- categorize=1:顯示所有連結分類
- category_orderby=id:連結分類照 ID 排序
- before 和 after:用 li 參數前後包覆起來,方便我們在 CSS 裡設定 li 參數的樣式
- show_images=1:這點很重要,就是讓該站的 Favicon 圖示顯示出來
- orderby=name:所有連結根據名稱來排序
- title_before 和 title_after:連結分類使用 h4 這樣的標題字體樣式,你可以自己修改,並在 CSS 裡設定樣式
之後你若要新增網誌分頁,請記得選取「Links」模板,內容留空不需寫任何資訊,這樣你就有一個標準的連結分頁了。但是,這還不算完成,因為接下來,我們除了要修改頁面 CSS 之外,還要讓你所有的鍊結,都能自動獲取該站的 Favicon 圖示,所以請你跟我這樣做,打開佈景函式庫(functions.php)的檔案,添加以下代碼並存檔:
<?php /* 友情連結頁面設置+顯示網站的Favicon */ function my_bookmarks($bookmarks, $args = '' ) { $defaults = array( 'show_updated' => 0, 'show_description' => 0, 'show_images' => 1, 'show_name' => 0, 'before' => ' <li>', 'after' => '</li> ', 'between' => "\n", 'show_rating' => 0, 'link_before' => '', 'link_after' => '','nofollow' =>0 ); $r = wp_parse_args( $args, $defaults ); extract( $r, EXTR_SKIP ); $output = ''; // Blank string to start with. foreach ( (array) $bookmarks as $bookmark ) { if ( !isset($bookmark->recently_updated) ) $bookmark->recently_updated = false; $output .= $before; if ( $show_updated && $bookmark->recently_updated ) $output .= get_option('links_recently_updated_prepend'); $the_link = '#'; if ( !empty($bookmark->link_url) ) $the_link = clean_url($bookmark->link_url); $rel = ' rel="external'; if ($nofollow) $rel .= ' nofollow'; if ( '' != $bookmark->link_rel ) $rel .= ' ' . $bookmark->link_rel; $rel .= '"'; $desc = attribute_escape(sanitize_bookmark_field('link_description', $bookmark->link_description, $bookmark->link_id, 'display')); $name = attribute_escape(sanitize_bookmark_field('link_name', $bookmark->link_name, $bookmark->link_id, 'display')); $title = $desc; if ( $show_updated ) if ( '00' != substr($bookmark->link_updated_f, 0, 2) ) { $title .= ' ('; $title .= sprintf(__('Last updated: %s'), date(get_option('links_updated_date_format'), $bookmark->link_updated_f + (get_option('gmt_offset') * 3600))); $title .= ')'; } if ( '' != $title ) $title = ' title="' . $title . '"'; $alt = ' alt="' . $name . '"'; $target = $bookmark->link_target; if ( '' != $target ) $target = ' target="' . $target . '"'; $output .= '<a href="' . $the_link . '"' . $rel . $title . $target. '>'; $output .= $link_before; if ( $show_images ) { if ( $bookmark->link_image != null) { if ( strpos($bookmark->link_image, 'http') !== false ) $output .= "<img src=\"$bookmark->link_image\" $alt $title />"; else // If it's a relative path $output .= "<img src=\"" . get_option('siteurl') . "$bookmark->link_image\" $alt $title />"; } else {//否則顯示網站的Favicon if (preg_match('/^(https?:\/\/)?([^\/]+)/i',$the_link,$URI)) {//提取域名 $domains = $URI[2]; }else{//域名提取失敗,顯示默認小地球 $domains = "example.com"; } $output .= "<img src=\"http://www.google.com/s2/favicons?domain=$domains\" $alt $title />"; } } $output .= $name; $output .= $link_after; $output .= '</a>'; if ( $show_updated && $bookmark->recently_updated ) $output .= get_option('links_recently_updated_append'); if ( $show_description && '' != $desc ) $output .= $between . $desc; if ($show_rating) { $output .= $between . sanitize_bookmark_field('link_rating', $bookmark->link_rating, $bookmark->link_id, 'display'); } $output .= "$after\n"; } // end while return $output; } function my_list_bookmarks($args = '') { $defaults = array( 'orderby' => 'name', 'order' => 'ASC', 'limit' => -1, 'category' => '', 'exclude_category' => '', 'category_name' => '', 'hide_invisible' => 1, 'show_updated' => 0, 'echo' => 1, 'categorize' => 1, 'title_li' => __('Bookmarks'), 'title_before' => ' <h2>', 'title_after' => '</h2> ', 'category_orderby' => 'name', 'category_order' => 'ASC', 'class' => 'linkcat', 'category_before' => ' <li id="%id" class="%class">', 'category_after' => '</li> ','nofollow' => 0 ); $r = wp_parse_args( $args, $defaults ); extract( $r, EXTR_SKIP ); $output = ''; if ( $categorize ) { //Split the bookmarks into ul's for each category $cats = get_terms('link_category', array('name__like' => $category_name, 'include' => $category, 'exclude' => $exclude_category, 'orderby' => $category_orderby, 'order' => $category_order, 'hierarchical' => 0)); foreach ( (array) $cats as $cat ) { $params = array_merge($r, array('category'=>$cat->term_id)); $bookmarks = get_bookmarks($params); if ( empty($bookmarks) ) continue; $output .= str_replace(array('%id', '%class'), array("linkcat-$cat->term_id", $class), $category_before); $catname = apply_filters( "link_category", $cat->name ); $output .= "$title_before$catname$title_after\n\t <ul class='xoxo blogroll'>\n"; $output .= my_bookmarks($bookmarks, $r); $output .= "\n\t</ul> \n$category_after\n"; } } else { //output one single list using title_li for the title $bookmarks = get_bookmarks($r); if ( !empty($bookmarks) ) { if ( !empty( $title_li ) ){ $output .= str_replace(array('%id', '%class'), array("linkcat-$category", $class), $category_before); $output .= "$title_before$title_li$title_after\n\t <ul class='xoxo blogroll'>\n"; $output .= my_bookmarks($bookmarks, $r); $output .= "\n\t</ul> \n$category_after\n"; } else { $output .= my_bookmarks($bookmarks, $r); } } } $output = apply_filters( 'wp_list_bookmarks', $output ); if ( !$echo ) return $output; echo $output; } ?>
以上代碼是為了讓你的連結頁面自動抓取所有連結的 Favicon 小圖示,詳細結構以及代碼意義請連至原創者博客觀看,我就不在此贅述。
最後,是很重要的 CSS 樣式設定,以下提供 SO-Personal 主題的友情連結樣式代碼給大家做參考:
/*---------友情連結頁面樣式------*/ #linkcontent { list-style: none; margin-top:8px; width:960px; float:left; } #linkcontent ul li ol{ list-style: none; } #linkcontent h1 h2 h3 h4{ width: 960; } .linkpage ul { list-style: none; padding: 5px 6px; overflow:auto } * html .linkpage ul{ height:1%;} .linkpage ul li { list-style: none; color: #333; margin-bottom: 5px; font-size: 12px; } .linkpage ul li ul li { list-style: none; float:left; line-height:180%; margin-bottom:3px; margin-left:3px; margin-right:3px; margin-top:3px; text-align:center; width:141.3px; } .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; } .linkpost { list-style: none; display:inline; float:left; margin:0 20px; padding:0 5px; width:920px; } .linkpost ul li ul li { float:left; line-height:180%; margin-bottom:3px; margin-left:3px; margin-right:3px; margin-top:3px; text-align:center; width:141.3px; } .linkcat li{ background-color:#FFFFFF; border-bottom-color:#CCCCCC; border-bottom-style:solid; border-bottom-width:1px; border-left-color:#CCCCCC; border-left-style:solid; border-left-width:1px; border-right-color:#CCCCCC; border-right-style:solid; border-right-width:1px; border-top-color:#CCCCCC; border-top-style:solid; border-top-width:1px; float:left; line-height:180%; margin-bottom:3px; margin-left:3px; margin-right:3px; margin-top:3px; text-align:center; width:141.3px; } .linkcat img{ float:left; margin-bottom:3px; margin-left:3px; margin-right:3px; margin-top:3px; }
大家記得將 CSS 樣式表裡的各項參數做個修改,以符合自己的主題。
【本文代碼教學來源】
- 個性化 WordPress 友情鏈接頁面: http://wange.im/diy-wordpress-links-page.html
- 獲取 Favicon 服務美化友情鏈接: http://wange.im/get-google-favicon-automatically.html
- 自動獲得Favicon(原創): http://heybronco.net/tech/wordpress/get-favicon-automatically/
文by覺非/WordPress 主題製作學習筆記.之九
飛翔於文字國裡的蝴蝶,我是愛寫文的女子,不要看我的人,請你看看我的文,那裡面全是我的心.和我想對你說的話……
StartOver.回。到。原。點 http://blogs.carrielis.com
【歷史上的今天】
- 心境的轉變 - 2011
- 新奇│365BlogLink博鄰的T恤 - 2007
- 求救│WP順利升級至2.2最新版~但UTW卻出錯!?請所有WP格友們幫忙找原因~ - 2007

好复杂啊
仔細研究一下,其實並沒有很複雜的。
挖~這個教學我找好久了喔~~
一直羨慕人家為甚麼可以用成這樣
還以為是外掛
原來是要這樣用的~謝謝您的教學喔~~
其實中國大陸的博客有好多都有寫過這個教學呢!我其實也是偷師來的
你不用客氣,我也是本著與大家分享的心,才會寫的。不過最近連寫部落格文章的力氣都無了,很高興認識你喔
恩恩~大陸人真的太強了~很多很專業的技術~
我也都是從大陸那邊看到的XD
很多部落客都會經過這段低潮期啦~要加油耶~^^
低潮期?現在沒有了啦~其實心態調整好就好,所以我目前比較能夠專注於工作上的事物,多謝你的打氣
不好意思 出現了一點問題..
未使用前 是這樣子
http://img541.imageshack.us/img541/2318/201007060833001.png
使用後變成這個樣子
http://img341.imageshack.us/img341/1834/201007060833.png
functions.php程式碼 貼在最下面可以嗎??
不好意思,我想請問一下,你真的有看懂我這篇文章嗎?
functions.php 這個文件是要放在主題資料夾裡面的,不是用來貼在側邊欄裡的喔!
這是要你新增一個連結頁面,而不能單獨存在側邊欄裡面的。
我沒有放在側邊攔..
我打開佈景主題的functions.php 把要貼的程式碼貼在
functions.php的最下方…
這樣可以嗎??
我有新增一個分頁..
鸡冻啊,终于有人看懂我在写什么了,哈哈
不过话说这个方法我已经弃用了,用更加简便的方法哟,用Jquery实现的,一句代码就可以解决了~
呵呵,萬戈,你的方法不難懂啊,我就是看你那裏的教學才學會的呢!這個方法你已經棄用?你那裡有說是怎麼用 jQuery 實現的嗎?咦,難道我漏看了?好,等等再去爬文!
你可以看看这篇:
http://immmmm.com/friend-links-add-favicon.html
啊,我剛去爬文看到了,是這篇吧?呵呵~的確簡潔明瞭,學習了!
哈哈,是的,就是这篇
对我来说无所谓之的
呵,還是有朋友需要的
雖然沒這麼多連結可添加,還是來學習下,已被不時之需了
或許你日後可以用上呢
这个以前看过了,获取的很多是默认图标
实现这个一个不大的功能需要如此多的代码量不划算(可能这种价值观不太好)
掉了一句:不过用来练习,提高一下理解还是很不错的
之所以會獲取默認圖示,應該是該站沒有設定 Favicon 的關係。
你說的對,其實這也只是用來練手的代碼,因為一般博客使用者,不太會需要這種功能,不過也因為如此,所以我把它集成在 SO-Personal 主題裏,這樣只要新建分頁,選取 Links 模板即可,使用者不用操心連結頁面如何形成
這個感覺蠻像日本那種動漫交換連結的設計,差別只在日本是用圖像banner來替代。:)
是很像,不過我覺得這樣的顯示方式更加漂亮呢!因為每個部落格都不一定有製作專屬的 LOGO,就算有製作,每個 LOGO 大小也不同,顯示出來的樣式就不一定好看了,所以我覺得這種方式還蠻不錯的