^ Back to top

WordPress调用文章中所有图片的缩略图

20160412155810

xiu主题最大的特点就是在首页可以调用文章中多张多略图,很适合做图片站、陌小雨发现很多人也拿来做淘宝客站或者色站,之前分享过一篇文章介绍WordPress xiu主题如何统计文章中图片数量,今天分享wordpress如何调用文章中所有图片的缩略图并在首页显示。

功能代码:

/*
*WordPress首页输出文章所有图片缩略图
*/
function all_img($soContent){
$soImages ='~<img [^\>]*\ />~';
preg_match_all( $soImages, $soContent, $thePics );
$allPics = count($thePics);
if( $allPics > 0 ){
foreach($thePics[0] as $v){
echo $v;
}
}
else {
echo "<img src='";
echo bloginfo('template_url');
echo "/images/thumb.gif'>";
}
}

上面的代码会导致最后输出的图片全部是原大小尺寸,所以我们需要在输出图片时为其加上大小style的限制,所以需要改动一些代码;将上面第16行的代码改为:

<echo “/images/thumb.gif’ style=”width:278px;height:122px;”>”;

但当给予了style限制之后,图片的大小虽然都固定了下来,但却出现了图片的失真,因此我们还是最好使用css的方法去限制输出图片的大小,css具体的代码就先不贴出来了,大家也可以自己去捯饬一下。

代码调用:

<
php all_img($post->post_content);
>

在模板文件中需要调用的地方使用上面的代码即可。

xiu主题是在该基础上添加了判断语句,图片大于等于1张小于4张就只输出1张图片、大于等于4张小于8张就输出4张图片,大于8张就输出8张,一共用到2个函数:

post excerpt

post thumbnail

有兴趣的朋友可以进一步折腾。

2016年4月12日更新

用了一段xiu主题后,发现很多代码改改还是蛮好用的。现在讲xiu主题实现方法分享出来,已经针对性的修改了,适用于其他主题

将下面代码加入到主题functions.php文件中

    function hui_get_thumbnail( $single=true, $must=true ) {
        global $post;
        $html = '';
        if ( has_post_thumbnail() ) {
            $domsxe = simplexml_load_string(get_the_post_thumbnail());
            $src = $domsxe->attributes()->src;
            $src_array = wp_get_attachment_image_src(hui_get_attachment_id_from_src($src), 'thumbnail');
            $html = sprintf('<li><img src="%s" /></li>', $src_array[0]);
        } else {
            $content = $post->post_content;
            preg_match_all('/<img.*(: |\\t|\\r|\\n)src=[\'"](.+)[\'"](:(: |\\t|\\r|\\n)+.*)>/sim', $content, $strResult, PREG_PATTERN_ORDER);
            $images = $strResult[1];
            $counter = count($strResult[1]);
            $i = 0;
            foreach($images as $src){
                $i++;
                $src2 = wp_get_attachment_image_src(hui_get_attachment_id_from_src($src), 'thumbnail');
                $src2 = $src2[0];
                if( !$src2 && true ){
                    $src = $src;
                }else{
                    $src = $src2;
                }
                $item = sprintf('<li><img src="%s" /></li>', $src);
                if( $single){
                    return $item;
                    break;
                }
                $html .= $item;
                if(
                    ($counter >= 4 && $counter < 8 && $i >= 4) ||
                    ($counter >= 8 && $i >= 8) ||
                    ($counter > 0 && $counter < 4 && $i >= $counter)
                ){
                    break;
                }
            }
        }
        return $html;
    }
    function hui_get_attachment_id_from_src ($link) {
        global $wpdb;
        $link = preg_replace('/-\d+x\d+(=\.(jpg|jpeg|png|gif)$)/i', '', $link);
        return $wpdb->get_var("SELECT ID FROM {$wpdb->posts} WHERE guid='$link'");
    }

在需要调用的地方:

<?php echo hui_get_thumbnail(false,true);>

陌陌评论 4

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. BanYuner
    可以的 一开始还没有意识到这个功能 现在觉得可以用来作为幻灯片使用啊回复
  2. 极速大蜗牛
    过来看看博主,小站做的不错!回复

站内搜索

其他人正在搜