WordPress 设置文章缩略图方法有很多种,比如使用WordPress 自带的缩略图功能、直接调用文章内图片按比例缩略显示、使用自定义栏目添加缩略图、安装相关缩略图插件、使用timthumb.php脚本文件自动生成 等,下面介绍详细设置方法。
1、WordPress 自带缩略图功能使用
一些旧版本WordPress 没有这个功能,需2.9版本以上。设置前先确认你使用的WordPress 主题有无调用此功能,查看文章编辑页面上方“显示选项”里有无“特色图像”选项。如果没有,则说明你的主题没有调用此项功能,我们可以通过下面方法给加进来。
打开主题文件夹下的function.php文件(如果没有新建一个),在里面添加以下功能调用代码:
add_theme_support( ‘post-thumbnails’ );
add_theme_support( ‘post-thumbnails’ );
也可以这样添加,增加一个缩略图功能存在判断:
if ( function_exists( ‘add_theme_support’ ) ) {
add_theme_support( ‘post-thumbnails’ );
}
if ( function_exists( ‘add_theme_support’ ) ) {
add_theme_support( ‘post-thumbnails’ );
}
也可以为缩略图设置一个显示大小比例:
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 150, 90, true ); //宽度150像素,高度90像素。
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 150, 90, true ); //宽度150像素,高度90像素。
添加之后在文章编辑页面就会显示“特色图像”设置选项,如果没有查看一下上面的“显示选项”里有没有勾选“特色图像”功能。以后在编辑文章或页面时如要添加缩略图,只需点击特色图像里面的“设置特色图像”,在弹出图片选择窗口中选中图片,点击“作为特色图像”发布即可。
这时发布文章后还看不到缩略图显示,因为还没有将特色图像调用标签添加到相关文件内,比如首页、分类、归档页这些文件中,添加后就能显示了。
特色图像调用标签:
<?php the_post_thumbnail(); ?>
<?php the_post_thumbnail(); ?>
也可以改成这样,当文章没有设置缩略图时就显示一个默认图片:
<?php if ( has_post_thumbnail() ) { ?>
<?php the_post_thumbnail(); ?>
<?php } else {?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/thumb.gif” /> // 默认图片路径自己改。
<?php } ?>
<?php if ( has_post_thumbnail() ) { ?>
<?php the_post_thumbnail(); ?>
<?php } else {?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/thumb.gif” /> // 默认图片路径自己改。
<?php } ?>
也可以为缩略图添加class、alt这些属性:
<?php
the_post_thumbnail(‘thumbnail’,array(‘alt’ => trim(strip_tags(
$post->post_title )),’title’=> trim(strip_tags(
$post->post_title )),‘class’ =>‘thumb’ )); ?>
<?php
the_post_thumbnail(‘thumbnail’,array(‘alt’ => trim(strip_tags(
$post->post_title )),’title’=> trim(strip_tags(
$post->post_title )),‘class’ =>‘thumb’ )); ?>
2、使用WordPress 自定义栏目设置缩略图
使用自定义栏目设置缩略图是一个比较不错方法,灵活且容易使用,缺点就是麻烦了点,需要每篇文章制作一张缩略图,然后设置。
设置方法,打开文章编辑页面,在上方“显示选项”里勾选“自定义栏目”。然后在自定义栏目里输入一个缩略图使用的新栏目名称,如thumb,然后在值里输入 缩略图地址,比如http://www.xxzj51.com,为防止以后如果更换域名要修改这里,我们可以不写前面的域名,直接写/后面图片地址就行, 如/favicon.ico。以后写其它文章设置缩略图的时侯同样也是这样设置。
调用缩略图显示,在你需要显示缩略图的地方加入以下代码调用即可。
下面这段代码设置了缩略图加文章链接和class、alt这些属性,具体可以自己定制,当文章没有设置缩略图时会显示一张默认图片。
<?php
if ( $values = get_post_custom_values("thumb") ) { ?>
<a href="<?php the_permalink() ?>"><img class="thumb"
src="<?php $values = get_post_custom_values("thumb"); echo
$values[0]; ?>" alt="<?php the_title(); ?>" /></a>
<?php } else { ?>
<a href="<?php the_permalink() ?>"><img class="thumb"
src="/images/thumb.gif" alt="<?php the_title(); ?>"
/></a> // 默认图片路径自己改。
<?php } ?>
<?php
if ( $values = get_post_custom_values("thumb") ) { ?>
<a href="<?php the_permalink() ?>"><img class="thumb"
src="<?php $values = get_post_custom_values("thumb"); echo
$values[0]; ?>" alt="<?php the_title(); ?>" /></a>
<?php } else { ?>
<a href="<?php the_permalink() ?>"><img class="thumb"
src="/images/thumb.gif" alt="<?php the_title(); ?>"
/></a> // 默认图片路径自己改。
<?php } ?>
附送一句缩略图显示样式美化,对应上面的img class=”thumb”,在你的style.css文件中加上这么一句,可以设置缩略图显示位置和加上图片边框效果。
.thumb { float: left; margin: 10px 10px 10px 0px; padding: 4px; border: 1px solid #ccc; }
3、调用文章内图片按比例缩略显示
这个方法是最简单最省事的,无需生成和设置缩略图,直接调用文章内的第一张图片,然后按比例缩略显示。不过此方法的缺点也很明显,如果你文章内的图片很大,加载速度就会比较慢,如果图片尺寸比例不对,显示出来也会有挤压效果。
设置方法,将下面代码添加到你主题文件夹下的function.php文件里,如果文章里没有图片,将自动显示一张默认图片。
function catch_that_image() {
global $post, $posts;
$first_img = ”;
ob_start();
ob_end_clean();
$output = preg_match_all(‘/<imgs[^<>]*?src=['"]([^'"<>]+?)['"][^<>]*?>/i’, $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){
$first_img = “/images/thumb.gif”;
}
return $first_img;
}
然后将调用代码添加到你要显示的模板文件里即可:
<img src=”<?php echo catch_that_image(); ?>” alt=”<?php the_title(); ?>” title=”<?php the_title(); ?>” width=”150px” height=”150px” />
4、使用timthumb.php脚本文件设置缩略图
这个方法我没试过,只是在一些博客上看到有使用,感觉和WordPress 自带缩略图功能差不多,不过这个支持缓存和外链图片,如要了解,可网上搜索一下。
5、使用WordPress 缩略图插件解决
如果你觉得上面方法都太麻烦了,那就用插件解决吧。WordPress 的缩略图插件有很多,比如WP Thumbnails这款就很强大,支持缩略图、外链缩略图、视频缩略图等生成和设置。