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

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

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

 

要跟大家先說明的是,這個技巧,是由大陸網友萬戈那裡看到的,在此先謝謝萬戈分享的教學,並且感謝原創朋友 Bronco 的代碼提供!

接下來第一個步驟,請你們新增一個 links.php 的模板檔案,請將以下代碼複製到你的檔案裡:

這裡順便講解連結頁面屬性(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)的檔案,添加以下代碼並存檔:

以上代碼是為了讓你的連結頁面自動抓取所有連結的 Favicon 小圖示,詳細結構以及代碼意義請連至原創者博客觀看,我就不在此贅述。

 

最後,是很重要的 CSS 樣式設定,以下提供 SO-Personal 主題的友情連結樣式代碼給大家做參考:

大家記得將 CSS 樣式表裡的各項參數做個修改,以符合自己的主題。

 

 

 

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


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

 StartOver.回。到。原。點 https://carrielis.com


This Post Has 27 Comments

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

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

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

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

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

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

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

    1. 或許你日後可以用上呢 😎

    1. 呵,還是有朋友需要的 :mrgreen:

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

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

    2. 啊,我剛去爬文看到了,是這篇吧?呵呵~的確簡潔明瞭,學習了!

      1. 哈哈,是的,就是这篇

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

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

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

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

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

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

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

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

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

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

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

    1. 仔細研究一下,其實並沒有很複雜的。

發表迴響

Close Menu