设置密码

验证码错误,请重新填写

免费建站旅程马上开始

开始建站
建站中

已有帐号?直接登录

首页>森动学院>网站建设教程 > WordPress 文章缩略图设置方法
WordPress 文章缩略图设置方法
发布时间: 2014-10-09
WordPress 设置文章缩略图方法有很多种,比如使用WordPress 自带的缩略图功能、直接调用文章内图片按比例缩略显示、使用自定义栏目添加缩略图、安装相关缩略图插件、使用timthumb.php脚本文件自动生成等,下面介绍详细设置方法。

1、WordPress 自带缩略图功能使用
一些旧版本WordPress 没有这个功能,需2.9版本以上。设置前先确认你使用的WordPress 主题有无调用此功能,查看文章编辑页面上方“显示选项”里有无“特色图像”选项。如果没有,则说明你的主题没有调用此项功能,我们可以通过下面方法给加进来。

打开主题文件夹下的function.php文件(如果没有新建一个),在里面添加以下功能调用代码:

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像素。

添加后在文章编辑页面就会显示“特色图像”设置选项,如果没有查看一下上面的“显示选项”里有没有勾选“特色图像”功能。以后在编辑文章或页面时如要添加缩略图,只需点击特色图像里面的“设置特色图像”,在弹出图片选择窗口中选中图片,点击“作为特色图像”发布即可。

这时发布文章后还看不到缩略图显示,因为还没有将特色图像调用标签添加到相关文件内,比如首页、分类、归档页这些文件中,添加后就能显示了。

特色图像调用标签:

<?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 } ?>

也可以为缩略图添加class、alt这些属性:

<?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.siqiboke.com/favicon.ico,为防止以后如果更换域名要修改这里,我们可以不写前面的域名,直接写/后面图片地址就行,如/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 } ?>

附送一句缩略图显示样式美化,对应上面的img class=”thumb”,在你的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这款就很强大,支持缩略图、外链缩略图、视频缩略图等生成和设置。


文章来源:森动网小鱼儿,转载请注明出处!