您现在的位置是:首页 > cms教程 > WordPress教程WordPress教程
wordpress缩略图函数the_post_thumbnail
古驰2025-03-20 15:50:01WordPress教程已有6人查阅
导读很多WordPress主题,特别是那些杂志型的主题,会给每篇日志加上一张缩略图,这种展现方式一般用在首页,可能单独出现,或者和日志摘要一起。
很多WordPress主题,特别是那些杂志型的主题,会给每篇日志加上一张缩略图,这种展现方式一般用在首页,可能单独出现,或者和日志摘要一起。但是目前位置没有一个标准的方法去实现日志缩略图,很多主题是使用WordPress自定义字段来实现日志缩略图功能,这样的设置比较复杂,虽然我在制作的很多WordPress项目中都是用这个方法,并且设置了直接上传缩略图的方法,但是还是略显麻烦。
从 WordPress 2.9 开始,WordPress 开始内置了日志缩略图的功能,并且提供了详细的接口让主题的作者设置和调用日志的缩略图。
第一步:让主题支持缩略图功能
首先确保你的wordpress版本在2.9之上,然后在你的当前主题文件夹中找到并编辑functions.php文件,加入下面这句代码 (注:主题文件夹都保存在wp-content/themes/目录下)
这样当你在后台编辑文章的时候,右边的分类目录下面就会多出一个“文章缩略图”模块。
点击“设置缩略图”就可以该文章添加缩略图了。
记得在添加图片的时候要点击下面的“用作缩略图”。
第二步:使用缩略图
在需要显示缩略图的地方调用the_post_thumbnail函数,比如你想在首页为每篇文章显示缩略图,可以在index.php文件中加入下面这样的代码 这样就能显示缩略图了,其中参数”thumbnail”表示缩略图显示的大小。wordpress预置了4种大小,你可以使用下面的4个参数来替换’thumbnail’,当然不同的台数显示的图片大小也不同
Thumbnail (缩略图尺寸)
Medium (中等尺寸)
Large (大尺寸)
Full (原始尺寸)
具体尺寸大小可以在后台“设置”中的“媒体”选项中进行设置
你可以设置3种不同的大小,以方便在不同的情况下使用。
至此你的主题已经支持缩略图功能并可以灵活使用了。
下面我将介绍一下更高级的应用技巧。自定义缩略图尺寸的三种方法方法一:后台设置
就是上面提到的方法,不过这种方法只设置3种大小。方法二:自定义
在调用the_post_thumbnail函数的时候,可以直接指定缩略图的大小
the_post_thumbnail(array(200,200)); // 显示200X200尺寸的缩略图
这种方法的优点的灵活,可以随时通过代码的调用显示不同尺寸的图片,缺点是修改有点麻烦,如果你有多处这样的代码,修改起来就要把每一处代码都要修改掉。方法三:增加预置尺寸
通过前面的介绍我们已经知道,wordpress为我们预置了三种可以设置的尺寸。可不可以再增加一些预置的尺寸呢?当然可以,我们要用到的函数是add_image_size。比如我们想在首页和分类页面使用不同的缩略图大小,就可以先预置homepage-thumb和category-thumb这两大小。方法是在functions.php文件中加入以下代码 之后就可以在首页调用 显示220*180的缩略图
在分类页面调用 则显示200*200的缩略图。定义缩略图的样式
首先我们先来看一下the_post_thumbnail函数输出的html是什么样的 由此可以看出,我们可以用css定义类attachment-thumbnail的样式就可以了。
但是如果我想分别为首页和分类页面定义不同的样式,该怎么做呢?
方法一是增加一个div,针对不同的div定义不同的样式,在此不多做介绍。
我要介绍的是另一种方法:给缩略图添加属性
你可以测试一下,如果把the_post_thumbnail(“thumbnail”)修改为下面这样的代码,看看输出的html结果是什么? 我这边输出的html为 可以和之前的html对比一下,不难发现class属性变成了我们设置的’homepage-thumb’。可以通过这种方法,把首页缩略图和分类页面的缩略图设置为不同的class属性。改变the_post_thumbnail的html输出
我们可以使用filter来改变缩略图的html输出结果,下面的这段代码为缩略图加了一个文章链接 当你点击缩略图的时候就会跳转到相应的文章内页。检测文章是否有缩略图
一个良好的习惯就是在调用the_post_thumbnail函数之前,先检测一下该文章有没有设置缩略图,检测的方法是调用has_post_thumbnail函数,代码如下 结合本站之前的提取文章内图片做为缩略图的方法,现在可以合二为一:首先判断文章有没有设置缩略图,如果有就直接显示,如果没有再提取文章内的图片为缩略图。 有兴趣的朋友可以把以上代码复制到functions.php文件中,然后调用dm_the_thumbnail()即可。
从 WordPress 2.9 开始,WordPress 开始内置了日志缩略图的功能,并且提供了详细的接口让主题的作者设置和调用日志的缩略图。
第一步:让主题支持缩略图功能
首先确保你的wordpress版本在2.9之上,然后在你的当前主题文件夹中找到并编辑functions.php文件,加入下面这句代码 (注:主题文件夹都保存在wp-content/themes/目录下)
这样当你在后台编辑文章的时候,右边的分类目录下面就会多出一个“文章缩略图”模块。
点击“设置缩略图”就可以该文章添加缩略图了。
记得在添加图片的时候要点击下面的“用作缩略图”。
第二步:使用缩略图
在需要显示缩略图的地方调用the_post_thumbnail函数,比如你想在首页为每篇文章显示缩略图,可以在index.php文件中加入下面这样的代码 这样就能显示缩略图了,其中参数”thumbnail”表示缩略图显示的大小。wordpress预置了4种大小,你可以使用下面的4个参数来替换’thumbnail’,当然不同的台数显示的图片大小也不同
Thumbnail (缩略图尺寸)
Medium (中等尺寸)
Large (大尺寸)
Full (原始尺寸)
具体尺寸大小可以在后台“设置”中的“媒体”选项中进行设置
你可以设置3种不同的大小,以方便在不同的情况下使用。
至此你的主题已经支持缩略图功能并可以灵活使用了。
下面我将介绍一下更高级的应用技巧。自定义缩略图尺寸的三种方法方法一:后台设置
就是上面提到的方法,不过这种方法只设置3种大小。方法二:自定义
在调用the_post_thumbnail函数的时候,可以直接指定缩略图的大小
the_post_thumbnail(array(200,200)); // 显示200X200尺寸的缩略图
这种方法的优点的灵活,可以随时通过代码的调用显示不同尺寸的图片,缺点是修改有点麻烦,如果你有多处这样的代码,修改起来就要把每一处代码都要修改掉。方法三:增加预置尺寸
通过前面的介绍我们已经知道,wordpress为我们预置了三种可以设置的尺寸。可不可以再增加一些预置的尺寸呢?当然可以,我们要用到的函数是add_image_size。比如我们想在首页和分类页面使用不同的缩略图大小,就可以先预置homepage-thumb和category-thumb这两大小。方法是在functions.php文件中加入以下代码 之后就可以在首页调用 显示220*180的缩略图
在分类页面调用 则显示200*200的缩略图。定义缩略图的样式
首先我们先来看一下the_post_thumbnail函数输出的html是什么样的 由此可以看出,我们可以用css定义类attachment-thumbnail的样式就可以了。
但是如果我想分别为首页和分类页面定义不同的样式,该怎么做呢?
方法一是增加一个div,针对不同的div定义不同的样式,在此不多做介绍。
我要介绍的是另一种方法:给缩略图添加属性
你可以测试一下,如果把the_post_thumbnail(“thumbnail”)修改为下面这样的代码,看看输出的html结果是什么? 我这边输出的html为 可以和之前的html对比一下,不难发现class属性变成了我们设置的’homepage-thumb’。可以通过这种方法,把首页缩略图和分类页面的缩略图设置为不同的class属性。改变the_post_thumbnail的html输出
我们可以使用filter来改变缩略图的html输出结果,下面的这段代码为缩略图加了一个文章链接 当你点击缩略图的时候就会跳转到相应的文章内页。检测文章是否有缩略图
一个良好的习惯就是在调用the_post_thumbnail函数之前,先检测一下该文章有没有设置缩略图,检测的方法是调用has_post_thumbnail函数,代码如下 结合本站之前的提取文章内图片做为缩略图的方法,现在可以合二为一:首先判断文章有没有设置缩略图,如果有就直接显示,如果没有再提取文章内的图片为缩略图。 有兴趣的朋友可以把以上代码复制到functions.php文件中,然后调用dm_the_thumbnail()即可。
本文标签:
很赞哦! (1)
暂无内容 |
暂无内容 |
相关文章
暂无内容 |
暂无内容 |
随机图文
wordpress登录后台的方法,wordpress怎么登录后台
wordpress登录后台界面的方法:首先打开你用wordpress搭建出来的网站。WordPress主题制作之index.php制作方法
前面我们已经制作完成博客所有公用页面sidebar.php、footer.php和header.php,今天开始我们就要制作单独的页面了。现在我们要制作的是索引页index.phpwordpress怎么上传图片
生活中不少人有喜欢网站的朋友,更有的朋友可以通过一个小站来盈利补充自己的物质生活。多媒体时代,网站中添加一些音乐、图片wordpress乱码怎么办
php wordpress乱码的解决办法:首先打开“wp-config.php”文件;然后修改内容为“define(’DB_CHARSET’, ”);”;
留言与评论 (共有 0 条评论) |