wordpress自動調用文章第一張圖為縮略圖或顯示隨機圖

 曉兔   2017-09-25 16:56   5,352 人飄過  6 條評論

現在的wordpress主題大多都集成了首頁和列表頁自動調用文章內第一張圖片作為縮略圖進行展示的功能,文內沒有圖片的話也會顯示隨機圖片,以提高用戶體驗度。曉兔今天在整理以前幾個老網站的時候,發現很多低版本的wordpress主題沒有這些集成功能,又不想升級wordpress版本,于是只好手動添加代碼來實現自動調用文章首圖為縮略圖的功能。

本以為是個很簡單的功能,因為網上類似的教程很多,但是發現試了幾個代碼都無效,甚至語法錯誤,大概是很多年前的代碼版本了,有些不太兼容。

以下是曉兔親測可用的一個版本:

首先在主題文件夾下找到functions.php文件,添加一段代碼:

//支持外鏈縮略圖
if ( function_exists('add_theme_support') )
add_theme_support('post-thumbnails');
function catch_first_image() {
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)){ //Defines a default image
$random = mt_rand(1, 20);
echo get_bloginfo ( 'stylesheet_directory' );
echo '/images/random/tb'.$random.'.jpg';
}
return $first_img;
}

在random文件夾內放入文件名如tb1.jpg,tb2.jpg,tb10.jpg等隨機圖片。

然后新建一個thumbnail.php文件,內容為:

<div class="thumbnail">
<?php if ( get_post_meta($post->ID, 'thumbnail', true) ) : ?>
<?php $image = get_post_meta($post->ID, 'thumbnail', true); ?>
<a href="<?php the_permalink() ?>" rel="nofollow" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /></a>
<?php else: ?>
<a href="<?php the_permalink() ?>" rel="nofollow" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php echo catch_first_image() ?>" width="140px" height="100px" alt="<?php the_title(); ?>"/></a>
<?php endif; ?>
</div>

最后在首頁或文章列表頁相應位置插入:

<?php include('includes/thumbnail.php'); ?>

一定要仔細注意代碼內的文件夾路徑和名稱是否正確,方可確保正常抓取和展示縮略圖。

歷史上的今天:

本文地址:http://www.stamina-metal.com/post/631.html
版權聲明:本文為原創文章,版權歸 曉兔個人博客 所有,歡迎分享本文,轉載請保留出處!

 發表評論


表情

  1. 綠軟吧
    綠軟吧 【農民】 @回復

    感謝分享,謝謝站長

  2. 廣州網站建設
    廣州網站建設 【村長】 @回復

    這個不錯,學習了 [贊]

  3. 你好這個怎么弄
    你好這個怎么弄 【農民】 @回復

    “最后在首頁或文章列表頁相應位置插入:” 我怎么不明白這個意思啊。。我是WordPress新手,你說的首頁或文章頁,是那個文件呀。。

  4. 衍帝
    衍帝 【農民】 @回復

    前幾天我也寫過一個asp代碼的獲取文章第一張圖片做縮略圖的文章,雖然和php有些差別,不過道理都一樣

  5. 大事記
    大事記 【農民】 @回復

    學習了,博主棒棒噠