WordPress 主題製作學習筆記:幫你的主題加上「友情連結」頁面並「自動獲取連結Favicon」

分享本文

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

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

 

要跟大家先說明的是,這個技巧,是由大陸網友萬戈那裡看到的,在此先謝謝萬戈分享的教學,並且感謝原創朋友 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 = ''; https:// 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 https:// If it's a relative path $output .= "<img src=\"" . get_option('siteurl') . "$bookmark->link_image\" $alt $title />"; } else {https://否則顯示網站的Favicon if (preg_match('/^(https?:\/\/)?([^\/]+)/i',$the_link,$URI)) {https://提取域名 $domains = $URI[2]; }else{https://域名提取失效,顯示預設小地球 $domains = "example.com"; } $output .= "<img src=\"https://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"; } https:// 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 ) { https://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 { https://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.回。到。原。點 https://carrielis.com


飛翔於文字國裏的蝴蝶,我是愛寫文的女子,不要看我的人,請你看看我的文,那裡面全是我的心.和我想對你說的話……
StartOver.回。到。原。點 https://carrielis.com

分享本文

分享在 facebook
分享在 twitter
分享在 linkedin
分享在 whatsapp
分享在 telegram

“WordPress 主題製作學習筆記:幫你的主題加上「友情連結」頁面並「自動獲取連結Favicon」” 有 27 則留言

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

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

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

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

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

    1. 呵呵,萬戈,你的方法不難懂啊,我就是看你那裏的教學才學會的呢!這個方法你已經棄用?你那裡有說是怎麼用 jQuery 實現的嗎?咦,難道我漏看了?好,等等再去爬文!

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

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

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

      1. 我沒有放在側邊攔..

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

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

  3. 挖~這個教學我找好久了喔~~
    一直羨慕人家為甚麼可以用成這樣
    還以為是外掛
    原來是要這樣用的~謝謝您的教學喔~~

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

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

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

        1. 低潮期?現在沒有了啦~其實心態調整好就好,所以我目前比較能夠專注於工作上的事物,多謝你的打氣 😉

請留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

相關文章

捲動至頂端