如何获取文章中第一张图片并显示图片

在写wordpress模板的时候，一般为了布局合理而且显示的较为美观，作者会考虑加入此项功能：获取wordpress文章中的第一张图片并显示出来。有些wordpress模板加入了缩略图功能，有些设置特色图片，虽然方法不同，但效果一样。比如暗淡的黑IT网络现用主题wpdaxue，采取第三方文件timthumb.php来获取缩略图，效果如下图。下面暗淡的黑在这提供两种代码方法实现wordpress取文章中第一张图片功能。

实现方法

此文代码预留地址：https://gist.github.com/andandehei/8928266

方法1.无视任何设置，直接获取文章中第一张图片并显示；如果文章无图片，获取自定义图片并显示。

此方法翻译自http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it

①将以下代码粘贴到functions.php文件中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function catch_that_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
$first_img = "/images/default.jpg";
 
//请自行设置一张default.jpg图片
}
 
return $first_img;
}

②在需要显示图片的地方输出图片：

1

<?php echo catch_that_image() ?>

方法2.如果我们手动设置了特色图像，而且文章中又有图片，那该如何显示呢？我们自此可以使用逻辑判断，给他们一个优先条件。此方法网上代码重复太多，已经不知道原创是谁了...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function catch_that_image( $id ) {
// global $post, $posts;
$first_img = '';
 
// 如果设置了缩略图
$post_thumbnail_id = get_post_thumbnail_id( $id );
if ( $post_thumbnail_id ) {
    $output = wp_get_attachment_image_src( $post_thumbnail_id, 'large' );
    $first_img = $output[0];
}
else { // 没有缩略图，查找文章中的第一幅图片
    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 = "/images/default.jpg";
    }
}
 
return $first_img;
}