WordPress缩略图函数the_post_thumbnail

我们在用wordpress做企业站的时候,经常会在页面调用带缩略图的文章。特别是 “展品展示” 栏目。我们需要在首页或列表页调用带缩略图的文章。

如何调用缩略图(以下为首页或列表页带缩略图的循环代码,带有详细标注)

上述代码中<?php the_post_thumbnail('thumbnail'); ?> 代表缩略图。

激活/开启wordpress缩略图功能。

在你的functions.php文件中添加如下代码

添加完以上代码后,我们去wordpress后台,点击“添加文章”或随便“编辑一篇文章”。我们会发现页面的右下角多了一个“特色图片”的选项

wordpress特色图片

这就代表我们把wordpress的缩略图功能激活了。

给图片添加css/alt等信息:在需要调用缩略图的地方添加如下代码

 

增加缩略图预置尺寸:在functions.php中添加如下代码

然后在需要的地方添加如下代码来调用:

现在我们详细说一下缩略图函数:the_post_thumbnail

简介

显示当前日志的缩略图(Post Thumbnail)。

这个模板函数必须使用在主循环中,如果要获取任意日志的缩略图,使用 get_the_post_thumbnail($id, $size, $attr ) 函数代替。

用法

参数

$size
(string/array) (Optional) 图片大小,可以是以下几个关键字:thumbnail, medium, large, full,或者通过函数 add_image_size() 自定义尺寸的关键字。或者宽和高的一个大小,比如:(32,32).
Default: 'post-thumbnail',当前主题通过函数 set_post_thumbnail_size 设置的。

$attr
(array) (Optional) 属性/值的一个数组,the_post_thumbnail 传递给函数 wp_get_attachment_image用来获取图。
Default: None

返回值

无返回值,直接显示当前日志缩略图的 HTML 代码。

基本用法

获取日志缩略图的 HTML 代码而不是显示出来,请使用 get_the_post_thumbnail($id, $size, $attr ) 函数代替

缩略图的大小

WordPress 默认的图片大小关键字有:"thumbnail", "medium", "large" 和 "full" (你上传图片的大小),这小图片的大小可以在 WordPress 后台多媒体管理面板设置,下面就是你如何在函数 the_post_thumbnail() 中使用这些默认的图片大小:

使用函数 add_image_size() 自定义图片尺寸。
使用函数 set_post_thumbnail_size() 设置默认缩略图尺寸。

日志缩略图链接到当前日志

注意:下面两个例子不能一起使用。

例子1:在主题中使用下面的代码:

例子2:使用 hook:

日志缩略图链接到大图

下面的代码必须在主循环中使用:

样式化日志缩略图

日志缩略图默认就会有 class:"wp-post-image",另外他们还会根据缩略图的大小还有不同的 class:

我们还能给日志缩略图添加自定义的 class:比如加上 "alignleft":

源文件

wp-includes/post-thumbnail-template.php

相关函数

add_image_size(), get_post_thumbnail_id(), get_the_post_thumbnail(), has_post_thumbnail(), set_post_thumbnail_size(), the_post_thumbnail(),

Views: 2,337 Tags: ,
飞鱼

发表评论

电子邮件地址不会被公开。 必填项已用*标注