• Work Team


    奕捷創意(股)公司 EJ-Idea Inc.

    奕捷創意(股)公司 EJ-Idea Inc. 專精 iPhone, iPad , Android 行動平板應用程式開發,亦與多家出版社及 e-Learning 廠商與廣告公司合作,開發出許多手機與平板應用,互動式電子童書,平面電子型錄等等。2011 年開始結合 WordPress 平台創作出更多精采作品!
    了解更多……

  • 版權宣告


    網摘、引用、連結,不轉載

    Creative Commons License
    姓名標示您必須保留原作姓名標示
    非商業性您不得為商業使用本著作
    禁止改作您不得改變或改作本著作

  • 最新評論

  • 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