懶人縮圖產生器

大家現在WordPress玩的花樣越來越多了,已經有許多人部落格的首頁長得就像入口網站一樣,除了最新的文章之外還會有各種的區塊,每一個區塊展示著不同屬性的文章,這樣子就是把WordPress推向了CMS的領域了。

就像最近高登幫忙設立的一個「房屋網」為例,這個站的許多文章本來就有照片,客戶要求首頁展示的時候文章的最前面要有縮圖,就像下面這一張圖的這個樣子:

WordPress 自動產生文章縮圖

這是一個付費的版型,你點圖片就可以進入預覽的頁面,在這個版型中的縮圖是內建好的,要每一篇文章去選文章中的照片、然後裁剪,雖然功能有了但總是麻煩了一點。所以客戶就要求:「能不能簡單一點?我只要自動把第一張照片作成縮圖就好了」,而這個需求的答案就是:

Thumbnail For Excerpts 外掛

  • 外掛WordPress官網下載網址:http://wordpress.org/extend/plugins/thumbnail-for-excerpts/
  • 外掛作者網址:http://www.cnet.ro/wordpress/thumbnailforexcerpts/
  • 外掛安裝方法:由WordPress後台搜尋並自動安裝外掛,或是下載外掛檔案解壓之後上傳到主機的 wp-content/plugins 目錄之下,再由後台啟用外掛
  • 這個外掛最近才更新到2.0版,設定的方式跟舊版的完全不一樣,但是新版的縮圖位置會跑掉,所以如果你還沒用的話請先暫緩,等作者推出修正的版本或是我再來找解決的辦法,如果已經在使用舊版的人就請你先不要升級,切記!
Thumbnail For Excerpts

這個 Thumbnail For Excerpts 外掛在後台沒有任何設定的地方,所有的設定是直接在PHP程式的最前面改預設值,可以設定哪些項目請看說明:

Thumbnail For Excerpts 外掛設定

請用文字編輯程式打開外掛PHP程式檔:thumbnailforexcerpts.php ,最前面的8個 define() 就是設定外掛參數的地方:

  • define("TFE_ALIGN","left");:設定縮圖靠左(left)或是靠右(right)。
  • define("TFE_SIZE","100");:設定縮圖尺寸,如果設為 0 就是WP後台內定的繒圖尺寸 150x150 。
  • define("TFE_MAXSIZE","no");:設為 "yes" 時圖片的寬度跟高度都會考慮,也就是說寬或高一定不會超過上面的設定值,內定值為 "no" 則是只有考慮圖片的寬度而已。
  • define("TFE_SPACE","5");:設定圖片CSS的 "hspace" (圖片左右的留白距離)。
  • define("TFE_LINK","yes");:是否加上文章連結 "yes" 的話點圖片也可以進到文章。
  • define("TFE_CLASS","imgtfe");:縮圖的CSS定義,如果你的版型在CSS裡面對繒圖有更詳細的定義的話,把這裡的 "imgtfe" 換成成你的CSS class。
  • define("TFE_CREATETH","no");:自動產生縮圖檔案,如果是設 "yes" 的話,會再自動產生一個縮圖的檔案,如果是 "no" 的話只是抓第一張圖片來當縮圖(加上寬高等參數讓圖片變小而已),會需要設為 yes 是你的圖片都很大用另一張小號的縮圖載入時間會比較快,不然是不用動它的。
  • define("TFE_TITLE","no");:要不要在縮圖加上 title 的文字敘述。

一般而言你只要設定一下圖片的尺寸就好了,其他的不用動就有不錯的效果。

注意事項

一定會有很多人裝了這個外掛但是還是不會出現縮圖,在作者的網站回答的很有趣:請看一下外掛的名稱 Thumbnail For Excerpts 所以一定是你的版型沒有用 excerpt() 來顯示文章,你只要版型首頁的PHP檔(一般為 index.php)裡面顯示文章的程式碼 the_content() 改成 the_excerpt() 就一切搞定了。

而且厲害的是不管你的圖片是從WordPress後台上傳的,還是從FTP上傳的,甚至是別的網站的圖片連結,都會自動產生縮圖,神奇吧?