WordPress 主題製作學習筆記:幫你的主題加上「友...

今天要跟大家分享的主題製作學習筆記,就是友情連結頁面。大家或許會覺得奇怪,這有什麼好著墨的,畢竟我們只要新增一個網誌分頁就能得到友情連結頁面了,不是嗎?但是,你知道內容要怎麼寫嗎?又,我們該如何把友情連結頁面變得有特色呢?如果不明白,大家可以看看我的連結頁面,就知道我的意思了。

 

要跟大家先說明的是,這個技巧,是由大陸網友萬戈那裡看到的,在此先謝謝萬戈分享的教學,並且感謝原創朋友 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:這點很重要,就是讓該站的 圖示顯示出來
  • 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 樣式表裡的各項參數做個修改,以符合自己的主題。

 

 

 

文by覺非/WordPress 主題製作學習筆記.之九


 飛翔於文字國裡的蝴蝶,我是愛寫文的女子,不要看我的人,請你看看我的文,那裡面全是我的心.和我想對你說的話……

 StartOver.回。到。原。點 http://blogs.carrielis.com


【歷史上的今天】 相關文章外掛 for WordPress, Blogger...
本文目前有 27 則回應
  1. 挖~這個教學我找好久了喔~~
    一直羨慕人家為甚麼可以用成這樣
    還以為是外掛
    原來是要這樣用的~謝謝您的教學喔~~

    • 其實中國大陸的博客有好多都有寫過這個教學呢!我其實也是偷師來的 ;)

      你不用客氣,我也是本著與大家分享的心,才會寫的。不過最近連寫部落格文章的力氣都無了,很高興認識你喔 :lol:

      • 恩恩~大陸人真的太強了~很多很專業的技術~
        我也都是從大陸那邊看到的XD
        很多部落客都會經過這段低潮期啦~要加油耶~^^

  2. 不好意思 出現了一點問題..
    未使用前 是這樣子
    http://img541.imageshack.us/img541/2318/201007060833001.png
    使用後變成這個樣子
    http://img341.imageshack.us/img341/1834/201007060833.png

    functions.php程式碼 貼在最下面可以嗎??

    • 不好意思,我想請問一下,你真的有看懂我這篇文章嗎?

      functions.php 這個文件是要放在主題資料夾裡面的,不是用來貼在側邊欄裡的喔!

      這是要你新增一個連結頁面,而不能單獨存在側邊欄裡面的。

      • 我沒有放在側邊攔..

        我打開佈景主題的functions.php 把要貼的程式碼貼在
        functions.php的最下方…

        這樣可以嗎??
        我有新增一個分頁..

  3. 鸡冻啊,终于有人看懂我在写什么了,哈哈
    不过话说这个方法我已经弃用了,用更加简便的方法哟,用Jquery实现的,一句代码就可以解决了~

  4. 对我来说无所谓之的

  5. 雖然沒這麼多連結可添加,還是來學習下,已被不時之需了 :neutral:

  6. 这个以前看过了,获取的很多是默认图标
    实现这个一个不大的功能需要如此多的代码量不划算(可能这种价值观不太好)

    • 掉了一句:不过用来练习,提高一下理解还是很不错的

      • 之所以會獲取默認圖示,應該是該站沒有設定 Favicon 的關係。

        你說的對,其實這也只是用來練手的代碼,因為一般博客使用者,不太會需要這種功能,不過也因為如此,所以我把它集成在 SO-Personal 主題裏,這樣只要新建分頁,選取 Links 模板即可,使用者不用操心連結頁面如何形成 :mrgreen:

  7. 這個感覺蠻像日本那種動漫交換連結的設計,差別只在日本是用圖像banner來替代。:)

    • 是很像,不過我覺得這樣的顯示方式更加漂亮呢!因為每個部落格都不一定有製作專屬的 LOGO,就算有製作,每個 LOGO 大小也不同,顯示出來的樣式就不一定好看了,所以我覺得這種方式還蠻不錯的 :mrgreen:

4 Trackbacks/Pingbacks