WordPress 博客使用内置缩略图功能的方法
作者:xlnxin发布时间:2021-04-15分类:WordPress教程浏览:536
在前面的教程中,介绍了《WordPress 博客自定义字段实现日志缩略图》,其实在 WordPress 2.9+版本的新功能中,WP开发人员已给 WP 加入了缩略图(Post thumbnail)功能,只是这个功能默认是没有开启的,要想使用的话需要激活和使用主题函数输出。下面是转载的一篇关于开启 WordPress 内置缩略图功能的教程。
如何使用 WordPress 内容缩略图功能:
- 编辑主题中的functions.php文件,在文件中加入下面的代码,在主题中注册缩略图功能
<?php add_theme_support( 'post-thumbnails' ); ?>
也可以选择指定文章类型激活该功能,文章类型有post和page两种,默认是在两者里都激活的。激活后,在你的post或page编辑页面的侧边栏底部,就能看到该功能的设置模块了。
<?php add_theme_support( 'post-thumbnails', array( 'post', 'page' ) ); ?>
- 激活缩略图功能后,在发布文章或编辑文章时可以看到下图
- 对使用的主题首页,存档页进行编辑,在LOOP中加入以下代码来输出上传的缩略图到主题中
<?php the_post_thumbnail( 'thumbnail' ); //调用缩略图 ?> <?php the_post_thumbnail( 'medium' ); //调用中等尺寸 ?> <?php the_post_thumbnail( 'large' ); //调用大尺寸 ?> <?php the_post_thumbnail( array(100,100) ); // 自定义尺寸 ?>
以上几种输出方式,根据你的需求选择。
上面的wordpress特色图像Post Thumbnail最基本的使用,如果需要更加强大的功能,请继续往下看:
开启了 WordPress 日志缩略图功能之后,可以通过函数 set_post_thumbnail_size() 来设置缩略图的大小,这里有两种方式:box-resize(盒大小模式)和 hard-crop(裁剪模式)。
盒大小模式按照比例缩小图片直到适合指定的盒子,所以不会扭曲图片。盒大小模式可以指定长度和宽度,比如一张 100X50 的图片在指定的 50X50 的盒子中会被缩小为 50X25。
这种模式的好处是可以显示整张图片,缺点是生成的图片并不是一样大的,它是按照最长边来设置的,所以有时候是长度一样,有时候是高度一样。如果我们想限制缩略图到一定的宽度,而不在乎它的高度,这时候我们可以指定缩略图的宽度,然后设置它的高度为 9999 或者其他任何认为够大的一个数字。代码如下:
1 | set_post_thumbnail_size( 50, 50 ); // 50 像素宽和 50 像素高,盒大小模式(box resize mode)。 |
第二种是硬裁剪模式(hard-crop),这种模式下,图片会被裁剪为指定的大小,这种方式的好处就是得到我们所希望的,比如我们希望的到一张 50X50 的缩略图,就会得到 50X50 的缩略图,缺点就是图片会被裁减,缩略图中只会显示图片的一部分。这种方式的代码是:
1 | set_post_thumbnail_size( 50, 50, true ); // 50 像素宽和 50 像素高,裁剪模式(hard crop mode) |
文章中调用缩略图:
1 2 3 4 5 6 7 | <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } else { //当前日志没有设置缩略图,可以设置默认图片 } ?> |
WordPress 日志缩略图具体使用案例
如果想在首页使用一个比较小的 50X50 裁剪模式的缩略图,但在日志页面使用 400 像素宽(高度不限制)的图片,可以设置额外的自定义尺寸缩略图,在 functions.php 中添加如下代码:
1 2 3 | add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 50, 50, true ); // 普通的缩略图 add_image_size( 'single-post-thumbnail', 400, 9999 ); // 定义日志页面的缩略图大小 |
在当前主题的 index.php 或者 home.php(取决主题的结构)中的主循环添加如下代码:
1 | <?php the_post_thumbnail(); ?> |
在当前主题的 single.php (也是主循环中)添加如下代码:
1 | <?php the_post_thumbnail( 'single-post-thumbnail' ); ?> |
通过函数 set_post_thumbnail_size() 可以生成默认的日志缩略图。
除此之外,还可以通过调用 add_image_size(); 来增加额外的日志缩略图尺寸,然后在日志页面通过 the_post_thumbnail( ); 调用新的缩略图尺寸老显示新的缩略图。
其他 WordPress 日志缩略图相关的函数
get_post_thumbnail_id():获取日志缩略图 ID
有时候我们想获取缩略图的 ID,日志缩略图的 ID 是存在 meta_key 为 _thumbnail_id 的值中,但是我们只需要使用下面简单的函数就可以获取日志的缩略图 ID:
1 | $image_id = get_post_thumbnail_id(); |
get_the_post_thumbnail():获取日志缩略图而不是输出它
有时候,我们可能在 PHP 代码中返回日志缩略图,而不是输出它,可以使用下面简单的代码:
1 | $image = get_the_post_thumbnail( $post->ID, 'thumbnail' ); |
提示:文章主要内容转自我爱水煮鱼博客
相关推荐
- WordPress教程排行
- 最近发表