wordpress logo大小

一文详解 WordPress 文章特色图片(缩略图)功能

现在绝大多数的 WordPress 主题,特别是那些杂志型的主题,比如 Autumn Pro,都会给每篇文章加上一张缩略图,一般会在首页或者其他列表页的时候,使用这种展现方式,缩略图可能单独出现,或者和文章摘要一起。

在 WordPress 2.9 之前,WordPress 没有提供一个标准的方法去实现文章缩略图,很多主题都是使用 WordPress 自定义字段来实现文章缩略图功能,这样的设置比较复杂。

从 WordPress 2.9 开始,WordPress 开始内置了文章缩略图的功能,后面又把名称改为特色图片(Featured Image),这里为了统计叫法,还是使用文章缩略图的名称,并且 WordPrss 还提供了详细的接口让主题的作者可以自定义设置和调用文章缩略图。

今天就讲解一下如何使用开启,自定义和使用文章缩略图。

开启文章缩略图功能

要使用文章缩略图功能,首先需要通过函数 add_theme_support() 来开启,具体是在当前 WordPress 主题的 functions.php 文件中添加以下代码:

add_theme_support( 'post-thumbnails' );

上面的代码会在 WordPress 后台编辑文章的界面开启设置文章缩略图的窗体,并且同时给文章和页面开启缩略图功能,如果想单独开启的话,使用以下代码:

add_theme_support( 'post-thumbnails', array( 'post' ) ); // 给文章启用文章缩略图功能add_theme_support( 'post-thumbnails', array( 'page' ) ); // 给页面启用文章缩略图功能设置文章缩略图大小

开启了 WordPress 文章缩略图功能之后,我们可以通过函数 set_post_thumbnail_size() 来设置缩略图的大小,这里有两种方式:盒大小(box-resize)模式和裁剪(hard-crop)模式。

盒大小模式(box-resize)按照比例缩小图片直到适合指定的盒子,所以不会扭曲图片。盒大小模式可以指定长度和宽度,比如一张 100X50 的图片在指定的 50X50 的盒子中会被缩小为 50X25。

这种模式的好处是可以显示整张图片,缺点是生成的图片并不是一样大的,它是按照最长边来设置的,所以有时候是长度一样,有时候是高度一样。如果我们想限制缩略图到一定的宽度,而不在乎它的高度,这时候我们可以指定缩略图的宽度,然后设置它的高度为 9999 或者其他任何认为够大的一个数字。代码如下:

set_post_thumbnail_size( 50, 50 ); // 50 像素宽和 50 像素高,盒大小模式

第二种是硬裁剪模式(hard-crop),这种模式下,图片会被裁剪为指定的大小,这种方式的好处就是得到我们所希望的,比如我们希望得到一张 50X50 的缩略图,就会得到 50X50 的缩略图,缺点就是图片会被裁减,缩略图中只会显示图片的一部分。这种方式的代码是:

set_post_thumbnail_size( 50, 50, true ); // 50 像素宽和 50 像素高,裁剪模式在主题中显示文章缩略图

现在我们要在主题中使用模板函数来显示文章缩略图,下面这些函数应该在 WordPress 的主循环中使用。

has_post_thumbnail():判断当前文章是否有缩略图,如果有返回 true,否则为 false:

<?php if ( has_post_thumbnail() ) { //当前文章有缩略图} else { //当前文章没有设置缩略图} ?>

the_post_thumbnail():输出文章缩略图,如果缩略图存在的话。

<?php the_post_thumbnail(); ?>一个具体的例子

假设我们想在首页使用一个比较小的 50X50 裁剪模式的缩略图,并且想在文章页面使用 400 像素宽(高度不限制)的图片?我们可以设置额外的自定义尺寸缩略图,代码如下:

在 functions.php 中添加如下代码:

add_theme_support( 'post-thumbnails' );set_post_thumbnail_size( 50, 50, true ); // 普通的缩略图add_image_size( 'single-post-thumbnail', 400, 9999 ); // 定义文章页面的缩略图大小

在当前主题的 index.php 或者 home.php(取决主题的结构)中的主循环添加如下代码:

<?php if ( has_post_thumbnail() ) { the_post_thumbnail();} else { //当前文章没有设置缩略图} ?>

在当前主题的 single.php (也是主循环中)添加如下代码:

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

通过函数 set_post_thumbnail_size() 可以生成默认的文章缩略图。

除此之外,我们还可以通过调用 add_image_size(); 来增加额外的文章缩略图尺寸,然后在文章页面通过 the_post_thumbnail( ); 调用新的缩略图尺寸来显示新的缩略图。

WPJAM Basic 的缩略图功能

如果没有缩略图怎么办?或者之前的版本把缩略图设置到了自定义字段怎么处理?

WPJAM Basic 针对这些情况都做了处理,首先我们可以选择是否自动将缩略图的设置应用到主题还是修改主题代码来实现。

然后可以设置默认文章缩略图,在各种情况都找不到缩略图之后默认的缩略图,可以设置多张,这样很多文章没有默认缩略图的时候,也不会太过单调。

最后就是定义文章缩略图顺序,首先使用文章特色图片,如果没有设置文章特色图片,可以定义获取文章缩略图的顺序。比如上图中,我就首先定义从标签缩略图中获取,如果没有,再从第一张图片,最后从分类缩略图中获取。

关于 WPJAM Basic 的缩略图设置更详细设置请点击这里。

更多文章缩略图的函数

作为一篇完整的教程,我们将其他文章缩略图相关函数也一起介绍一下:

get_post_thumbnail_id():获取文章缩略图 ID

有时候我们想获取缩略图的 ID,文章缩略图的 ID 是存在 meta_key 为 _thumbnail_id 的值中,但是我们只需要使用下面简单的函数就可以获取文章的缩略图 ID:

$image_id = get_post_thumbnail_id();

get_the_post_thumbnail_url():获取文章缩略图链接

获取到文章缩略图链接 ID 之后,我们可以使用 wp_get_attachment_image_url 函数获取图的链接,但是 WordPress 已经提供了现成的函数一步到位:

$thumbnail_url = get_the_post_thumbnail_url( $post = null, $size = 'post-thumbnail' );

the_post_thumbnail_url():这个函数直接显示文章缩略图链接,这个函数和上面函数类似,一个是返回,一个是直接输出,不具体详细讲解了。

get_the_post_thumbnail():获取文章缩略图而不是输出它

有时候,我们可能在 PHP 代码中返回文章缩略图,而不是输出它,可以使用下面简单的代码:

$image = get_the_post_thumbnail( $post->ID, 'thumbnail' );

WordPress多媒体缩略图设置

在Wordpress还没有缩略图功能的时候,模板开发的同学,基本都是用代码,直接调用文章第一张图片作为栏目列表缩略图。如果现在旧的模板,还没有更新,应还会保留着这个功能。但这个功能有个缺点就是调用原图作为缩略图,所以图片比较大,而且比例基本能不和列表页缩略图CSS比例一样,所以造成列表图片变形不清析。

1缩略图功能激活

现在模板基本都已经支持激活了这功能的了。那模板是如何激活这功能的呢,就是下面这行代码,放在functions.php文件里就可以了。

add_theme_support( 'post-thumbnails' ); 2缩略图大小设置

按上面设置的例子,生成缩略图:

宽度大于400,高度大于222时,缩略图大小为:400×222

宽度大于400,高度少于222时,缩略图大小为:400×原图片高度

宽度少于400,高度大于222时,缩略图大小为:原图片宽度×222

关于中等大小和大尺寸 ,也是缩略图,原理和上面一样,当都设成0时,则不生成。

2模板调用缩略图

<?php if ( has_post_thumbnail ) { ?>

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

<?php } else {?>

<img src="图片地址">

<?php } ?>

字符串参数:thumbnail ( 小尺寸 )、medium ( 中等尺寸 )、large ( 大尺寸 )、full ( 完整尺寸 )。

wordpress文章缩略图

在开发主题时,我们避免不了要使用文章的缩略图,也就是文章的特色图片,但是要使用此特色图片,需要先开启。

一、开启特色图片

在functions.php中加入代码:

add_theme_support( 'post-thumbnails' );

如果你仅想让文章信息开启缩略图功能,则使用以下代码:

add_theme_support('post-thumbnails', array('post'));

如果你仅想让页面信息开启缩略图功能,则使用以下代码:

add_theme_support('post-thumbnails', array('page'));

特别强调一下,上传的缩略图在 /wp-content/uploads下。

二、调用缩略图

判断一篇文章是否存在缩略图,如果有,则显示缩略图,否则显示默认缩略图。

<?php if ( has_post_thumbnail() ) : ?>

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

<?php else: ?>

//显示默认图片

<?php endif; ?>

the_post_thumbnail可以是字符串或数组

1、字符串参数是:thumbnail(小尺寸)、medium(中等尺寸)、large(大尺寸)、full(完整尺寸)

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

2、数组参数

the_post_thumbnail( array(60,60) ); //宽60高60

3、默认尺寸

the_post_thumbnail();

4、若是上面的尺寸都满足不了你的时候,可以自定义尺寸

add_image_size('viphper',148,100,$crop);

使用时

the_post_thumbnail('viphper' );

最后放出终极大招,可以使用aq_resize.php生成对应尺寸的缩略图,使用时只需要引入此文件,调用方法

aq_resize($url, $width);

注意这两个参数是必填项

下载地址: