fbpx

《WP筆記》如何在首頁顯示文章第一張圖片縮圖

繼前陣子瘋狂的學習CSS之後,最近換PHP,也是日夜不停的學習,剛好前2天梅干桑在和我討論到首頁自動抓取文章第一張圖片顯示,他不知道為什麼有些圖片就是死不顯示,剛好這2天看完PHP矩陣的部份就研究了一下,花了一點時間自己寫了一段抓取文章第一張圖片的語法,並且加了一些判斷式,我想這應該也有其它人會想用,丫湯就順便也分享一下,需要的人也可以參考看看。

01

如同上圖那樣,在首頁的摘要中自動插入文章的第一張圖片縮圖,其實很多外掛都可以達成,不過有些需要另外產生縮圖,有些要自定義圖片,而能夠自動截取第一張圖片的又無法自定義,因為有時候第一張圖片難免不合口味。

所以如果平常預設為截取第一張圖片,但如果不喜歡的想自定義的話,可以參考丫湯的做法,但功力不夠高,寫的程式就請各位前輩們見笑了。

做法:

在首頁要顯示第一張圖片的地方插入以下語法

<?php include("firstimg.php") ;?>

然後下載這個檔案解壓上傳到你的佈景資料夾裡

檔案下載:請點我

這個程式寫的其實沒有很完美,客倌們加減用,預設的自動寬度比例是200px,高度會隨寬度縮圖,但有些圖片一定會過長,因此設成超過115px自動截斷而不是縮成115px,圖片就不會變形,另外首頁的縮圖加入了Title和Alt都是文章標題,如果你想修改寬度和高度請打開firstimg.php找到以下語法修改:

第30行(最大高度)

max-height:115px;

第39、48行(圖片寬度)
echo "\"><img src=\"".$thumb."\" width=\"200\" ";
echo "\"><img src=\"".$thePics[0][0]."\" width=\"200\" ";

使用解說:

平常不做任何設定的話,會自動抓取第一張圖片,當然如果你覺得第一張圖片不是你想要顯示的縮圖的話,那麼就可以手動自定義該篇文章的首頁縮圖,只要在編輯文章的下方加入自定義名稱『firstimg』,然後欄位內容輸入你想顯示的圖片就可以了,如此一來該篇文章在首頁顯示的圖片就會依你自定義顯示。

02




這樣的縮圖顯示方式就彈性許多,不用侷限一定要用第一張圖片,有興趣的就試試吧。

你可能對這些內容也有興趣

作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

21 個留言

  1. 易春木表示:

    請問此縮圖並未真正將圖檔變小, 導致loading會變慢
    可否請教若要真正縮小圖片, 要怎麼做呢? thanks

    阿湯 說:

    要另外用 php 程式縮圖

  2. Miyu表示:

    您好,请问『firstimg』那里要填入什么才能使单篇不显示缩图?
    比如这篇文章(http://blog.miyui.net/melody/shao-rong-milky-way/)
    原想将图片作为日志背景图的(用表格实现),但是这样就会使得首页既有缩图又有背景图。

    阿湯說:

    那你要用其它方法吧,比如寫文章時把要用的圖片設定在特色圖片,首頁縮圖再去抓特色圖片,文章頁面則是設定特色圖片為背景圖

  3. PP表示:

    「YA」请教如何在首页图片显示为瀑布流样式,CSS代码怎么改呢,钻研很久了还是没解决,拜谢

    阿湯說:

    不懂你的意思?

  4. ByRui Design表示:

    这里面能加参数吗,考虑到每个页面调用的尺寸不一样

    阿湯說:

    可以自行修改,依你的需求是OK的

  5. Alan表示:

    ㄚ湯您好~
    我有安裝 Facebook 的讚按鈕
    但是發現網友按讚或分享的時候
    Facebook 會隨機抓取網頁上的圖片當縮圖
    請問一下 wordpress應如何設定
    才能讓facebook 抓取指定的圖片??
    因為看了這篇文章以後 http://sofree.tw/thread-6619-1-1.html
    還是看不太懂? 甚麼是” 縮圖用圖片的網址”
    這是我的網址:http://blog.guitar.com.tw
    謝謝你 🙂

    阿湯說:

    就是指定你縮圖的網址要用哪一個

  6. james yo表示:

    了解! 非常感謝阿湯哥的熱情解惑!!
    我試著改看看^0^
    在這邊真是受益良多~謝謝^^

    阿湯說:

    不客氣,我喜歡自己嘗試的人

  7. james yo表示:

    你好:還有一個問題就是我如果不想要第一張圖當文章在首頁的圖,
    我想自己指定一張圖,那欄位名稱要打什麼呢?

    阿湯說:

    4.0沒有這個功能哦,要另外修改

  8. james yo表示:

    你好: 我是用scov4 這個佈景!

    阿湯說:

    寬度在thumb.php裡 width=XXX,高度在style.css裡搜尋115,一共有4個115都要取代掉

  9. james yo表示:

    你好:請問我使用您的布景,我要如何做修改呢?

    我想要指定圖片還有修改首頁第一張圖的大小!

    找了index跟thumb兩個文件,得不到解答!

    煩請阿湯哥解疑! 感謝

    阿湯說:

    請問你是用哪一個 ?

  10. 丫光表示:

    那如果剛好那一篇文章不想用縮圖該怎麼做!?

    阿湯說:

    那就得改成程式碼囉

  11. 丫光表示:

    不好意思…佔用了 3 個留言…

    我是想問 『在首頁要顯示第一張圖片的地方插入以下語法』下面的語法該放哪裡…

    阿湯說:

    看你要在首頁哪邊顯示就放在哪裡,每個佈景不同

  12. HK表示:

    阿湯:
    我也是用你的佈景
    在目前旳主要模板 index.php設定是
    我在編輯文章的下方加入自定義名稱『thumb』(己經有下拉選單可以選)
    連結我指定的圖片
    不過他還是抓第一張圖片
    不曉得是不是我操作有誤
    後來我又按照你本文的做法操作一次
    修改成
    將firstimg.php檔案上傳
    編輯文章的下方加入自定義名稱『firstimg』+圖片網址
    出現的圖片不是我指定的==!
    所以不曉得是那裡有問題
    請指教,謝謝

    阿湯說:

    已在email回覆

  13. 路人甲表示:

    firstimg.php 每次檢測完
    變數應該在下一次使清空一下
    不清空的話 下一篇文章如果沒有圖片 便會使用上一篇文章的圖片了
    $thumb = “”;
    $thePics=””;
    加在firstimg.php 的第一行

    阿湯說:

    感謝提供,不過我縮圖已經另外寫一支了…QQ

  14. 路人甲表示:

    $thumb = “”;
    $thePics=””;
    清空 對不對呢?

    阿湯說:

    蝦咪東東

  15. chaoxun.info表示:

    能否定义一下边框的颜色,蓝色边框太原生态了。

    阿湯說:

    可以自行加上css語法

  16. vincent表示:

    親愛的阿湯老大!!
    小弟駑鈍,有個問題請教,http://www.skinpress.com/demo/網站中,首頁的那張圖
    http://www.skinpress.com/thumbs/piczzz.gif
    是怎摩做的?用您上述方法也可以做到嗎?
    還有,小弟不太清楚,你上述中
    在首頁要顯示第一張圖片的地方插入以下語法

    是要把語法插入哪裡?請恕小弟功力不足,還請多多指教!感謝!!

    阿湯說:

    插入到你要顯示圖片的地方呀,就是佈景檔案裡

  17. Carrie表示:

    @丫湯:好的,多謝你這麼勤力用心呢 😉

    阿湯說:

    呵,要分享也是要先學習嘛,必經過程

  18. Carrie表示:

    沒辦法讓縮圖的尺寸照比例嗎?我的意思就是,如果是原本直立的圖片,照你 CSS 的尺寸一設定,就會變形了(變成橫向的)。不知道你瞭解我的意思嗎?

    阿湯說:

    原先技術不足(剛學php不到2週)這部份一直沒解決,我把今天做修改的版本放上去了,你試試看

  19. Harry表示:

    這個 plugin 感覺有點類似你所說的, 不知道你會不會有興趣看看:

    http://justintadlock.com/archives/2008/05/27/get-the-image-wordpress-plugin

    阿湯說:

    嗯嗯,是一樣的功能,只是能不用外掛就盡省掉囉

發表留言 »

姓名(*)
信箱(*)