WordPress 日志缩略图功能
2012-04-22 10:22
141 查看
很多 WordPress 主题,特别是那些杂志型的主题,会给每篇日志加上一张缩略图,这种展现方式一般用在首页,可能单独出现,或者和日志摘要一起。但是目前位置没有一个标准的方法去实现日志缩略图,很多主题是使用 WordPress 自定义字段来实现日志缩略图功能,这样的设置比较复杂,虽然我在制作的很多 WordPress 项目中都是用这个方法,并且设置了直接上传缩略图的方法,但是还是略显麻烦。
从 WordPress 2.9 开始,WordPress 开始内置了日志缩略图的功能,并且提供了详细的接口让主题的作者设置和调用日志的缩略图。
WordPress 日志缩略图功能
上面的代码会同时给日志和页面开启缩略图功能,如果你想单独开启该功能,使用以下代码:
盒大小模式按照比例缩小图片直到适合指定的盒子,所以不会扭曲图片。盒大小模式可以指定长度和宽度,比如一张 100X50 的图片在指定的 50X50 的盒子中会被缩小为 50X25。这种模式的好处是可以显示整张图片,缺点是生成的图片并不是一样大的,有时候是长度一样,有时候是高度一样,如果你想限制缩略图到一定的宽度,而不在乎它的高度,你可以指定你的宽度,然后设置它的高度为 9999 或者任何你认为够大的一个数字。设置盒模式的代码如下:
第二种是硬裁剪模式(hard-crop),这种模式下,图片会被裁剪为指定的大小,这种方式的好处就是得到我们所希望的,比如你希望的到一张 50X50 的缩略图,我们就会得到 50X50 的缩略图,缺点就是你的图片会被裁减,并且在缩略图中只会显示图片的一部分。这种方式的代码是:
在
在
在主题的
这样就行了,
有时候你想自定义脚本,这个时候你可能获取缩略图的 ID,日志缩略图的 ID 是存在 meta key 为
获取日志缩略图而不是输出它
有时候,你可能在 PHP 代码中返回日志缩略图,而不是输出它,可以使用下面简单的代码:
从 WordPress 2.9 开始,WordPress 开始内置了日志缩略图的功能,并且提供了详细的接口让主题的作者设置和调用日志的缩略图。
WordPress 日志缩略图功能
开启 WordPress 日志缩略图功能
在当前 WordPress 主题的functions.php添加以下函数,这个函数会在 WordPress 后台编辑日志的界面开启设置日志缩略图的窗体。
add_theme_support( 'post-thumbnails' );
上面的代码会同时给日志和页面开启缩略图功能,如果你想单独开启该功能,使用以下代码:
add_theme_support( 'post-thumbnails', array( 'post' ) ); // 给日志启用日志缩略图 add_theme_support( 'post-thumbnails', array( 'page' ) ); // 给页面启用日志缩略图
设置日志缩略图大小
开启了 WordPress 日志缩略图功能之后,我们应该缩略图的大小,这里有两种方式:box-resize(盒大小模式)和 hard-crop(裁剪模式)。盒大小模式按照比例缩小图片直到适合指定的盒子,所以不会扭曲图片。盒大小模式可以指定长度和宽度,比如一张 100X50 的图片在指定的 50X50 的盒子中会被缩小为 50X25。这种模式的好处是可以显示整张图片,缺点是生成的图片并不是一样大的,有时候是长度一样,有时候是高度一样,如果你想限制缩略图到一定的宽度,而不在乎它的高度,你可以指定你的宽度,然后设置它的高度为 9999 或者任何你认为够大的一个数字。设置盒模式的代码如下:
set_post_thumbnail_size( 50, 50 ); // 50 像素宽和 50 像素高,盒大小模式(box resize mode)。
第二种是硬裁剪模式(hard-crop),这种模式下,图片会被裁剪为指定的大小,这种方式的好处就是得到我们所希望的,比如你希望的到一张 50X50 的缩略图,我们就会得到 50X50 的缩略图,缺点就是你的图片会被裁减,并且在缩略图中只会显示图片的一部分。这种方式的代码是:
set_post_thumbnail_size( 50, 50, true ); // 50 像素宽和 50 像素高,裁剪模式(hard crop mode)
在主题中显示日志缩略图
现在我们要在主题中使用模板函数来显示日志缩略图,这些函数应该在 WordPress 的主循环中使用。has_post_thumbnail()这个模板函数判断当前日志是否有缩略图,如果有返回 true,否则为 false:
<?php if ( has_post_thumbnail() ) { //当前日志有缩略图 } else { //当前日志没有设置缩略图 } ?>
the_post_thumbnail()这个模板函数输出日志缩略图,如果缩略图存在的话。
<?php the_post_thumbnail(); ?>
WordPress 日志缩略图具体使用案例
假设你想在首页使用一个比较小的 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 the_post_thumbnail(); ?>
在主题的
single.php(也是主循环中)添加如下代码:
<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
这样就行了,
set_post_thumbnail_size()调用
add_image_size( 'post-thumbnail' )— 默认的日志缩略图“handle”(处理函数)。但是我们可以通过调用
add_image_size( $handle, $width, $height, {$hard_crop_switch} );来增加额外的日志缩略图处理函数,然后通过传递 handle 给
the_post_thumbnail( $handle );来使用新的缩略图尺寸。
其他 WordPress 日志缩略图相关的函数
获取日志缩略图 ID有时候你想自定义脚本,这个时候你可能获取缩略图的 ID,日志缩略图的 ID 是存在 meta key 为
_thumbnail_id的值中,但是我们只需要使用下面简单的函数就可以获取日志的缩略图 ID:
$image_id = get_post_thumbnail_id();
获取日志缩略图而不是输出它
有时候,你可能在 PHP 代码中返回日志缩略图,而不是输出它,可以使用下面简单的代码:
$image = get_the_post_thumbnail( $post->ID, 'thumbnail' );
相关文章推荐
- WordPress日志缩略图功能深度剖析
- wordpress日志缩略图功能实现
- 自动获取wordpress日志中的第一张图片作为缩略图
- WordPress主题开发:开启文章缩略图功能
- wordpress 缩略图功能函数 the_post_thumbnail
- 关闭WordPress上传图片时自动生成缩略图功能
- WordPress实现长篇文章/日志/单页面分页功能效果
- wordpress日志中的全部图片以缩略图的形式显示在文章摘要底部
- wordpress使用timthumb和七牛云存储函数实现缩略图功能
- 自动获取wordpress日志中的第一张图片作为缩略图
- [wordpress技巧]屏蔽WordPress日志修订功能
- wordpress教程之自带缩略图功能
- 关闭WordPress发布日志的自动保存功能
- wordpress 文章缩略图功能
- WordPress纯代码纯静态开启七牛CDN并集成七牛缩略图和水印功能
- 关闭WordPress发布日志的自动保存功能
- wordpress如何批量关闭旧日志留言功能
- WordPress博客彻底关闭图片缩略图功能的方法
- 黄聪:如何使用WordPress 2.9内置文章缩略图功能(Post Thumbnail)
- 关闭WordPress发布日志的自动保存功能