wordpress主题建站,选择WEB主题公园中文原创企业网站模板!

WordPress技术博客 news
您现在的位置:首页 > WordPress技术博客 > 多重判断,给wordpress添加略缩图

本周推荐网站模板

WordPress主题视频教程

最近更新的WordPress主题
最新更新过的网站模板

多重判断,给wordpress添加略缩图

发布时间:2013/09/19 WordPress技术博客 wp应用技术 2539 1

thumbnails-wordpress-themepark

在使用wordpress的时候,有的文章列表页是图文并茂的模式,这样的模式更容易阅读,也更好的吸引用户点击,那么今天我们就来说一说wordpress的略所图。

大部分拥有图文列表的wordpress主题,使用略所图时,都会使用到2个方法,第一就是利用wordpress的特色图像功能,另一个即是截取文章的第一张图片,当然,还有的主题使用自定义字段来给出略所图,今天,我们介绍一种方法,结合几种常用的略所图方式,给你的wordpress添加多重判断的略所图功能,让你在维护网站更加得心应手。

今天我们所介绍的方式,其实也是非常简单的php判断,首先判断文章是否设置了特色图片,如果没有则截取文章第一张图片,如果结合自定义字段,那么就可以做出3重判断,保证略所图从各种方式获得。

 

第一种判断,如果没有特色图片,那么截取第一张图片,第一张图片没有,则使用默认的图片替代

特色图片

开启特色图片功能(如果主题没有开启的话,具体可以在后台文章编辑中打开显示选项,查看是否有特色图片的选项,如果没有则在functions.php添加一下代码:

if ( function_exists( 'add_theme_support' ) ) {add_theme_support( 'post-thumbnails' );}

 

特色图片的尺寸(添加在functions.php中):

if ( function_exists( 'add_image_size' ) ) {add_image_size( 'top-post-thumb', 148, 136,true );}    //添加固定的尺寸148*136

这里我们所输出的代码是 使用148*136尺寸的特色图片,调用时 名称为top-post-thumb

 

你也可以使用wordpress自带的三种特色图片尺寸,这三种尺寸需要在wordpress后台-设置 -多媒体种设置具体的尺寸,下面的代码可以直接在循环中使用

<?php the_post_thumbnail( 'Thumbnail'); ?>

上面代码中红色的文字代表一种尺寸,下面有不同尺寸的说明,替换即可
缩略图(Thumbnail)

    小图(Small)

    中等图(Medium)

    大图(Large)

    原图(Full)

 

截取第一张图片:

将下面的代码添加到functions.php中:

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
$homeee= bloginfo('template_url');
$first_img = $homeee."/images/fistmig.jpg";//这里填写你的默认图片相对路径
}
return $first_img;
}

这里的代码会调用文章第一张图片,如果文章没有图片,则调用默认的图片fistmig.jpg(上文橙色注释段落)

 

 

循环判断

现在我们在functions.php中的准备已经做好了,我们要去循环中写一下判断:

1. 如果没有特色图片,截图第一张图,如果文章中没有图片,使用默认图片:

<?php if ( has_post_thumbnail()):?> //判断是否有特色图片
<?php the_post_thumbnail( 'small-post-thumb'); ?>//如果有输出特色图片,尺寸上文介绍过,自己可修改
<?php else : ?>
<img id="catch" src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" /> //没有特色图片,调用第一张图,如果没有,这里会自动调用默认图片
<?php  endif; ?>

2.如果用自定义字段输出的内容,使用自定义字段,没有使用特色图片,没有特色图片使用第一张图,文章内没有图片,调用默认图片:

<?php if(get_post_meta($post->ID, "vidio",true)):   ?> //检查是否输出自定义栏目“vidio”
<?php  echo stripslashes(get_post_meta($post->ID, "music_value",true));?>//有则输出
<?php elseif(  has_post_thumbnail()):?>//没有则检查是否有特色图片
<?php the_post_thumbnail( 'small-post-thumb'); ?>//有则输出
<?php else : ?>//如果以上条件均未存在
<img id="catch" src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" /> //调用第一张图,如果没有,这里会自动调用默认图片
<?php  endif; ?>

 

介绍了以上的方法,不过小编还是推荐大家使用wordpress的特色图片功能,拥有的好处请参阅这边文章《为什么要使用wordpress的特色图像功能(详解)》

现在,你学会了吗?

 

 

 

WordPress原创主题,高端网站模板建站,网站模板建站资源以及开发知识分享,尽在WEB主题公园

如未标明出处,所有文章均为WEB主题公园原创,如需转载,请附上原文地址,感谢您的支持和关注。

============关于WEB主题公园=============

WEB主题公园致力于开发适合中国人习惯的中文WordPress网站模板,并提供全程视频教程,让您能够轻松的使用网站模板建立好自己的网站!

分享WordPress开发,网站维护经验,分享更多有用的WordPress知识

WEB主题公园--做最好的中文原创WordPress主题,网站模版。

  1. 请教一个问题,我用的这个主题有两种发图片的方法:外链图片和上传。
    做了七牛镜像以后,
    上传图片发文,首页缩略图不显示,src位置没有图片链接。
    用外链形式发图片,首页缩略图正常显示。
    二者发文以后,进入文章页都可以看到图片。
    这是怎么造成的?有什么解决办法吗?

    2014年2月28日 15:59来自新浪微博 回复