WordPress 佈景:如何擷取文章內第一張圖片作為縮圖?

WordPress 佈景教學系列來瞜,

第一篇是要教大家如何在首頁、文章列表處加上縮圖,

而這個縮圖會從文章內的第一張圖擷取出來,並且顯示,

至於要如何達成呢?趕快來看看吧~

這個方法是需要添加代碼到 functions.php 內,再呼叫出圖片網址就行了。

 

添加代碼

首先請先將下方代碼放進 functions.php ,注意若頭尾沒有 <?php / ?> 包起來請自行加上。

感謝小逢提供錯誤回報,代碼修正!
//取得文章內第一張圖片網址
function get_first_img(){
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];
	if(empty($first_img)){
		$first_img = "預設圖片網址";
	}
	return $first_img;
}

函數說明:

這個方法會截取出每篇文章內第一張圖片的「網址」,若是該文章內完全沒有圖片,

則會使用 $first_img 所設定的圖片,因此 $first_img 後的圖片網址就是當沒有圖片時所顯示的預設圖片。

 

添加完之後接著就是要呼叫了。

 

呼叫圖片網址

請將以下代碼放製在欲呈現圖片的位置即可(通常是 index.phparchive.php )

<img src="<?php echo get_first_img(); ?>" />

沒錯,

<?php echo get_first_img(); ?>

就是輸出圖片的網址,因此需要加上 img 來完成圖片顯示,

若是要順道加上文章連結,則可以使用以下代碼

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo get_first_img(); ?>"></a>

這樣就可以完成了添加喔!

想隨時追蹤最新資訊?歡迎使用 RSS 訂閱最新文章 »

您或許會感興趣的文章

隨機推薦

共有 12 則迴響

  1. 仔仔

    #1 @

    如果又不想用預設圖又沒有圖片應該如何修改啊? :thinking: :heart_eyes:

    • Brownsugar

      # @

      請問是指沒圖片就不顯示嗎?

      • 仔仔

        # @

        是...
        因為現在是如果文章沒圖片就會出現死圖或者預設圖....

        就是如果沒有圖片就什麼都沒有....
        如果有圖片就想要第一張圖...應該怎麼做? :frown:

        • Brownsugar

          # @

          你可以試試看:

          if(empty($first_img)){
            $first_img = "";
          }
          

          整段移除

          接著呼叫時

          <?php if(get_first_img()){ ?>
            <a href="<?php the_permalink(); ?>"><img src="<?php echo get_first_img(); ?>" /></a>
          <?php } ?>
          

          或是直接顯示圖片不要連結

          <?php if(get_first_img()){ ?>
            <img src="<?php echo get_first_img(); ?>" />
          <?php } ?>
          
          • 仔仔

            # @

            那這樣不是都有東西在圖片位置嗎?

            我的意思是,當文章只有文字沒有圖片又不想有任何死圖或連結...只出現文字....@@ :thinking:

          • Brownsugar

            # @

            你好,剛剛回覆 code 有問題,我重新編輯過了。
            移除那段主要目的是,當沒有圖片時,$first_img 為空白,
            呼叫時,判斷 get_first_img() 有沒有東西,如果沒有就不顯示,
            如果有(if(get_first_img())),才執行圖片輸出,所以如果沒有圖片那邊就等於沒作用。

  2. 仔仔

    #2 @

    謝謝你的幫助.......我現在試試看先~...

    不過之前加入時見到你的CODE...多了「」一行東西那~是不是打多了?

    • 仔仔

      # @

      因為加了最尾這個...「」有錯誤用不了... :sleeping:

      • Brownsugar

        # @

        是 } 後面 img 那串嗎,那個不知道為什麼常常跑出來...

    • 仔仔

      # @

      YEAH~ :thumbsup: ,弄好了... :heart_eyes: :heart_eyes:
      我又多一個地方可以常上來啦 :laughing:

  3. 朱小逢

    #3 @

    請問一下黑糖大大
    $first_img = "預設圖片網址";
    這段圖片網址如果不要使用固定位置
    如果要調用佈景內的圖片要如何改寫呢?
    謝謝 :laughing:

    • Brownsugar

      # @

      為啥要我回兩次 XDD
      設定成這樣就行了:

      	$first_img = get_bloginfo('template_directory') . '/path/hi.jpg'; // 佈景目錄下的圖片
      

Brownsugar 發表迴響

點擊這裡以取消回覆
*