在使用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的特色图像功能(详解)》
现在,你学会了吗?
(责任编辑:好模板) |