D13Slideshow圖片展示文章外掛(附延伸使用)

作者 炮爺 - 發布 2009-11-17 21:47 - 更新 2010-02-20 11:03 - 閱讀 246 人次 (參考值)

這是WordPress的外掛之一,可用於使用圖片展示網站中的文章。本外掛播放文章可手動或是自動設置,但是圖片都必須手動添加才行。所以這代表,使用後打文章要多一個習慣,那就是一定要配一張圖片。

實際展示範例可以參考本站右上方最新文章展示區,可設置聯播五篇或是十篇,可自行設定高、寬、字色,功能並非非常完善,但對於基本的使用都綽綽有餘。

 

據我所知展示外掛還有五六款,但是經過這次測試與評比後,我還是選擇使用了D13Slideshow。它不是最方便的,最方便的有自動抓取圖片功能,它也不是最豐富的,最豐富的有如電影特效般的轉場特效。但是這一款是我使用過後最穩定,相容性最佳的,如果你正缺一個圖片展示文章外掛,別錯過它!

 

安裝與設定

 

開啟後台,進入「外掛>新增」。然後搜尋輸入「D13Slideshow」,找到後安裝並啟動。完成後到「設定」下找「D13Slideshow」,我們會看見如下的配置表。

 

 

設定完基本設置後,接著設定輸出什麼類型文章。如果想要指定輸出文章,請在「Featured story #1~10」中設定你希望輪播的文章(適用於公告等長期性文章)。

 

 

再來,到你希望顯示的地方貼上下列代碼即可。一切都完畢後你會發現你的輪剝都是黑色背景,那是因為你沒有替文章增加要顯示的圖片(本外掛缺點),你必須手動到正在播放、以後要打的文章添加自訂欄位,新增一個「promoimage」欄位,然後欄位內容必須是圖片連結。

 

 

延伸使用

 

多了一個增加自訂欄位「promoimage」的習慣後,你可以在你的文章列表中增加一個「圖片預覽」的功能。這樣可以豐富你的網站整體閱讀感。

添加的代碼如下,請加於index.php、search.php、archive.php中的「<?php the_content(''); ?>」上方,效果如下圖。另外CSS也可以利用一下,用它來限制最大圖片高與寬。

1
2
3
4
5
6
7
8
9
10
<div>
   <?php if (get_post_meta($post->ID, promoimage, $single = true)) : ?>
    <img src="< ?php echo get_post_meta($post->ID, promoimage, $single = true); ?>" alt="文章圖片預覽">
     <?php else : ?>
    <img src="請輸入無預覽圖片文章用的圖片連結" alt="無文章圖片預覽">
   <?php endif; ?>
</div>
 
.postimg{width:400px; height:120px; overflow:hidden;}
.postimg img{max-width:400px; max-height:120px; _width:400px; _height:120px;}

    

 

小結

 

這是一個能豐富視覺的插件,當初會想裝上是因為有人反應我的網站太多文字,看久了會找不到閱讀方向,不如多一些圖片來感受一下文章訊息,感覺也比較精彩一點。

裝上後效果還不錯,也成功的讓列表多出了預覽圖片。日後只要持續添加「promoimage」的圖片連結就可以了,雖然多了個小步驟,但是我相信這對於網站是有益的。

 


 

 

D13Slideshow

 

插件名稱:D13Slideshow

插件連結:http://wordpress.org/extend/plugins/d13slideshow/

《 2 個回應 》

  1. 鄔騏鴻 說 ..

    觀察了一下,用D13Slideshow在側邊欄,網站好像不會在換圖的時候重新讀取,
    之前用NextGEN Gallery 放側邊欄好像會一直讀取(雖然換圖特效好炫),很擔心會拖慢網站速度>"<
    而且下方還有圖片簡介,超吸引人.只能說,你選得很棒!
    感謝分享,麻煩外帶全家餐.

    [回應]

  2. 炮爺 說 ..

    NextGEN Gallery 沒用過,但這款D13Slideshow不錯
    吃資源是還好,也沒看到載入過慢或是載入不了過

    [回應]

《 發表回應 》

網站小工具

Page Ranking Tool Web Analytics Join My Community at MyBloglog! Creative Commons License 網站小貼紙80*15
Add to Google Reader or HomepageSubscribe in BloglinesAdd to Plusmo