在 WordPress 文章內顯示如 Facebook 鏈結預覽效果 – 安裝 Visual Link Preview 插件

Visual Link Preview

我經常在網路上查找特定主題的文章,當看到內容還不錯的,就會將之儲存到我使用 Notion 建立的閱讀清單,或使用 Hypothes 可以對網頁內容作摘記。當某篇文章我可能想分享個人的評論或重點文摘時,若是軟體本業的類型,我會分享到「FB 社團-軟體設計鮮思維」。如果是一般或生活性,我可能也會分享到個人FB或特定主題的社團。

我覺得分享文章鏈結在 Facebook 或 Tweet 時,所顯現的鏈結預覽效果挺不錯,同時我現在也打算將我在 FB 所分享的文章鏈結,以及心得摘要等,同步在 WordPress 文章內。不過我也希望能有鏈結預覽這種美觀又醒目的效果。查找外掛 (plugin) 資訊,找到這款還算不錯用的 Visual Link Preview。以下就是我使用其外掛所產生的預覽效果。

閱讀全文 »

[電玩] Minecraft 從三合院聊到伺服器架設 (Spigot)

利用中秋假日期間,打算暢玩精神時光屋的電玩。前兩個禮拜連續好幾個晚上時間,已經把 Starbound 破關,再來應該是自由創建在這個星際邊際的2D沙盒世界。但我突然失去動力,一則沒有具體的遊戲目標,再則自己真的沒啥建築創意,只得暫時擱下。

說起建築,好些年以前曾利用 Minecraft 蓋過「三合院」,但當時卡在屋頂不知該如何利用區塊 (block) 的結構,來模擬中式的磚瓦造型,所以放棄續建。 (這裡有篇巴哈網友分享的三合院建築,真可謂之經典。)

不過這幾年 Minecraft 相關建築的參考資訊如雨後春筍般可茲參照,甚至我還買了本「Minecraft 建築大百科」給我家妹妹 (小女兒),借來翻閱裡面內容就有談及關於中式建築甚而三合院都有範本。這太好啦,我又找到可以作為消遣休閒時玩遊戲的目標。 🙂

Minecraft 被微軟併購後好像更為積極,遊戲功能與穩定性作得更好,挺意外的。最近釋出的版本為 1.10.2,但透過官方的 Launcher,倒是可以創建多個 profile,並對應遊戲版本個別下載,方便很多。喔,必備的 MODs 如 Forge、Optifine HD 等核心模組那是一定要安裝的。關於 MOD、材質包、地圖等,我大都在下列幾個網站參考與下載:Minecraft MODs, PLANET Minecraft

閱讀全文 »

Vim 打造 Linux C++ 編程環境-vimrc 基本設定

打算採用 Vim 作為 Linux C++ 程式開發環境的原因有兩個:

  • CodeLite IDE 工具的專案目錄實在編得蠻糟糕的。
  • Vim 的佔用資源小 (在我的 Chromebook/Ubuntu 就可以命列列模式執行並編譯 C++),可攜性高 (任何一種 Linux 系統下載馬上可以執行),擴展彈性高 (透過 plugin)。

而 Vim 的主要缺點就是 學習曲線高!

不過它比較能如倒吃甘蔗般,當習慣那些鍵盤操作後 (可能要好幾年),撰寫如 C++ 程式可塑性高太多了。

Vim 所有設定資訊均在於 .vimrc 檔案 (位於如 Home目錄下)。該設定檔的設定主要有兩個重點:

  • 編輯器的基本屬性設定。 (如語法高亮、顯示行號、狀態顯示...等。)
  • 外部擴展功能 (透過 3rd party plugin),如 nerdtree/taglist 插件的目錄結構/程式源碼的展現。

關於安裝多種 Plugin 的管理,一般會透過如 Vundle 這類插件管理工具來統籌管理所有插件。

個人目前的初始 .vimrc 設定內容,全係參考對岸所撰寫的文章:
 o Vim改變生活,插件改變Vim (1) — 認識Vim
 o Vim改變生活,插件改變Vim (2) — 認識Vim

執行 Vim 後所呈現的效果如下圖:
.vimrc plugn & 環境建置 版本一

閱讀全文 »

[WordPress] 幾個主要版面功能的設定備忘註記

一、側邊欄列出 RSS 訂閱方式 :

跟隨潮流與為了網站訂閱功能的可攜性,所以也申請了 "Google FeedBurner",讓自己的網站有一個唯一 (unique)的訂閱網址。

透過 FeedBurner 訂閱的方式有兩種: 以 Email 訂閱,或直接以 RSS 閱讀器訂閱。

另外我仍提供了 wordpress 預設的 RSS 訂閱方式。兩者的差別好像 (我也不清楚)是後者在遇到 {閱讀全文} 的標籤前,都可以列出本文的內容,而不像 feedburner 需事先設定本文的長度。

我的 RSS 訂閱網址為:
 o FeedBurner: http://feeds.feedburner.com/kenming
 o WordPress: http://www.kenming.idv.tw/feed

實現的效果參考下圖:
Sidebar RSS 訂閱提供

閱讀全文 »

{wp plugin} 讓舊網址鍊結自動導向到新網址的利器— Redirection

當初考慮從 b2evolution 轉移到 wordpress 系統時,其中一個讓我猶豫遲未轉移的主要原因是,包括 Google 等搜尋網站與其它諸多網站均有指向我諸多文章的固定鍊結 (permalink),一旦轉移後,自然地原有這些文章的鍊結就會失連了。 除了對支持貼上我文章鍊結的網友們感到抱歉外,同時也會影響到所謂的 SEO (Search Engine Optimization)。

不過衡量諸多利弊得失後,還是長痛不如短痛,咬著牙給轉移到 wordpress 系統來了。 結果有一個驚喜是,發現到 wordpress 可以自行設定可讀性較高的固定鍊結 (permalink)格式,所以從 b2evolution 轉檔的時候,我就有個想法,可以把原來舊文章的固定鍊結給寫入到 wp_posts Table 的 Post_name 欄位內,它其實對應的就是文章所謂的 Slug,文章標題的代稱 (Alias)。 原來是打算當在 wordpress 設定固定網址的格式為 %postname% 時,就會在網址列 (url)顯示這個 Slug 內的鍊結名稱,這樣的話舊有的文章鍊結就可以保存了。 但是事與願違,儲存在 Slug 欄位的舊文章鍊結格式例如為這樣:

am_ac_acce_fa_mc_a_fc_a_af_ac_acc

當你設固定鍊結格式為 %postname% 時,該篇文章的完整 URL 鍊結為:

http://www.kenming.idv.tw/am_ac_acce_fa_mc_a_fc_a_af_ac_acc

但其實其它網站所指向本站舊文章的 URL 鍊結為:

http://www.kenming.idv.tw/index.php?title=am_ac_acce_fa_mc_a_fc_a_af_ac_acc&more=1&c=1&tb=1&pb=1

多了 “title=” 以及 “&more=1&c=1&tb=1&pb=1″。 所以除非我當初在轉檔時是轉成這樣的格式並儲存在 Slug 欄位才可以。

再繼續爬文研究,才瞭解到舊網址鍊結是可以經過一些設定後,給重新導向 (redirect)到新網址的鍊結來的。 主要的原理就在於所謂的 301 條款,可以參考 Wikipedia 這一篇的說明: URL redirection。 簡單的說就是將舊網址的鍊結,透過 HTTP 301 的永久轉移 (moved permanently),而可以重新導向到新的網誌鍊結。 在 Apache 的具體作法就是更改 .htaccess 檔案,例如,當你在 wordpress 後台將固定網址 (permalink)設定為自訂結構 (如 %postname%)後,在 wordpress 根目錄下就會自動產生一個 .htaccess 檔案,其內容如下:
閱讀全文 »

{Hack} this day plugin of wordpress

我想要能在讀者閱讀某一篇文章時,在文章區的底部能提供其他相關文章的額外資訊,諸如 延伸閱讀、歷史上的今天等。

延伸閱讀 我採用了 Yet Another Related Posts Plugin (YARPP),功能應該是同類型的外掛中最強的。 它可以依據 標題、本文、標籤(Tag)、類別(Category) 等來找出在部落格內的其它相關連的文章。 大陸網友有寫了篇該插件(plugin)的使用說明,相當詳細。 可惜,透過 “標題” 來找出相關連的文章,對於中文字詞並沒有什麼效果。 反之,透過 “標籤(Tag)” 效果是最好也是最簡單的方式了,但是,前提就是每一篇的文章在下標籤關鍵字時要多更用心些才可。

歷史上的今天,我則是採用了 This Day Plugin,非常簡單,只有一支 PHP 程式而已,就是可以顯示同一部落格內同一日但不同年份的其它文章。

插件啟動後,就會直接把其它年份的 “This Day” 列表在本文內容的底部。 這我可不喜歡,我比較傾向上述這些算是 “額外的資訊”,我是會把這些給獨立放在另一個區塊的,再以 CSS 來調整 layout。 但是,稍稍可惜的是,原作者就是直接內建這個插件功能,並沒有提供可以直接呼叫的函數(function),這就不同於那個 YARPP 插件,可直接將其函數任意放在你想要的 template 位置上。

所以,追蹤了該支 PHP 程式,在最下面有一行把它給註解(comment)掉:

//add_filter('the_content', 'ddtd_generate');

這一行的功能就是屬於對本文內容的 “rendering”,對其本文後面再加上 This Day 的相關資訊而已。

再來,找到 ddtd_show_posts() 函數,在最底下的一行:

return $the_output;

改為:

echo $the_output;

然後,在你所使用的 theme template 目錄下 (wp-content/themes/XXX),利用文字編輯器(如 notepad++) 打開 single.php 檔案,在你想要顯示的位置上插入:

<?php ddtd_show_posts(); ?>

像我,就是把上述兩個額外的相關文章資訊,放在底部(foot)的下一個區塊,並利用 table 給排列成左右兩欄各別的參考資訊。

<div id="extra-info">		<!-- 延伸參考資訊 -->
  <table width= "98%">
    <tr valign="top" align="left">
      <td width= "50%"><?php related_posts(); ?></td>
      <td width= "50%"><?php ddtd_show_posts(); ?></td>
    </tr>
  </table>
</div>

至於為何使用 Table 而不使用 CSS float 來設定呢? 只能說,這比想像得還要難,只要放大縮小瀏覽器視窗,經常就會跑掉排列位置,不勝其擾。而使用 Table 排一版只花兩分鍾即可,所以在這種小地方,也就不想太講究、多花這些無謂的研究功夫了。

軟體思維顧問

專職軟體輔導與教育訓練的獨立顧問。輔導企業資訊單位如何有效組織系統開發與維護;輔導開發人員達成有效的專業分工。傳授如何把軟體作軟 (Keeping Software Soft)的技能,得以提昇系統的彈性/延展,並進而創造系統的再利用價值。

Personal