wordpress 缩略图功能函数 the_post_thumbnail
很多 WordPress 主题,特别是那些杂志型的主题,会给每篇日志加上一张缩略图,这种展现方式一般用在首页,可能单独出现,或者和日志摘要一起。但是目前位置没有一个标准的方法去实现日志缩略图,很多主题是使用 WordPress 自定义字段来实现日志缩略图功能,这样的设置比较复杂,虽然我在制作的很多 WordPress 项目中都是用这个方法,并且设置了直接上传缩略图的方法,但是还是略显麻烦。
从 WordPress 2.9 开始,WordPress 开始内置了日志缩略图的功能,并且提供了详细的接口让主题的作者设置和调用日志的缩略图。
第一步:让主题支持缩略图功能
首先确保你的wordpress版本在2.9之上,然后在你的当前主题文件夹中找到并编辑functions.php文件,加入下面这句代码
1
2
3
4
|
<?php if ( function_exists( 'add_theme_support' ) ) add_theme_support( 'post-thumbnails' ); ?> |
(注:主题文件夹都保存在wp-content/themes/目录下)
这样当你在后台编辑文章的时候,右边的分类目录下面就会多出一个“文章缩略图”模块。
点击“设置缩略图”就可以该文章添加缩略图了。
记得在添加图片的时候要点击下面的“用作缩略图”。
第二步:使用缩略图
在需要显示缩略图的地方调用the_post_thumbnail函数,比如你想在首页为每篇文章显示缩略图,可以在index.php文件中加入下面这样的代码
1
2
3
4
|
<? php if ( function_exists( 'the_post_thumbnail' ) ) the_post_thumbnail( 'thumbnail' ); ?> |
这样就能显示缩略图了,其中参数”thumbnail”表示缩略图显示的大小。wordpress预置了4种大小,你可以使用下面的4个参数来替换’thumbnail’,当然不同的台数显示的图片大小也不同
Ø Thumbnail (缩略图尺寸)
Ø Medium (中等尺寸)
Ø Large (大尺寸)
Ø Full (原始尺寸)
具体尺寸大小可以在后台“设置”中的“媒体”选项中进行设置
你可以设置3种不同的大小,以方便在不同的情况下使用。
至此你的主题已经支持缩略图功能并可以灵活使用了。
下面我将介绍一下更高级的应用技巧。
自定义缩略图尺寸的三种方法
方法一:后台设置
就是上面提到的方法,不过这种方法只设置3种大小。
方法二:自定义
在调用the_post_thumbnail函数的时候,可以直接指定缩略图的大小
1
|
the_post_thumbnail( array (200,200)); // 显示200X200尺寸的缩略图 |
这种方法的优点的灵活,可以随时通过代码的调用显示不同尺寸的图片,缺点是修改有点麻烦,如果你有多处这样的代码,修改起来就要把每一处代码都要修改掉。
方法三:增加预置尺寸
通过前面的介绍我们已经知道,wordpress为我们预置了三种可以设置的尺寸。可不可以再增加一些预置的尺寸呢?当然可以,我们要用到的函数是add_image_size。比如我们想在首页和分类页面使用不同的缩略图大小,就可以先预置homepage-thumb和category-thumb这两大小。方法是在functions.php文件中加入以下代码
1
2
3
4
|
if ( function_exists( 'add_image_size' ) ){ add_image_size( 'category-thumb' , 200, 200 ); // 预置一个名为’category-thumb’,200*200的缩略图大小 add_image_size( 'homepage-thumb' , 220, 180); //预置一个名为’homepage-thumb’,220*180的缩略图大小 } |
之后就可以在首页调用
1
|
the_post_thumbnail(‘homepage-thumb’); |
显示220*180的缩略图
在分类页面调用
1
|
the_post_thumbnail(‘category-thumb’); |
则显示200*200的缩略图。
定义缩略图的样式
首先我们先来看一下the_post_thumbnail函数输出的html是什么样的
1
2
|
<img width= "150" height= "150" src= "http://domety.com/wp-content/uploads/2010/10/screenshot-150x150.png" class = "attachment-thumbnail wp-post-image" alt= "" title= "screenshot" /> |
由此可以看出,我们可以用css定义类attachment-thumbnail的样式就可以了。
但是如果我想分别为首页和分类页面定义不同的样式,该怎么做呢?
方法一是增加一个div,针对不同的div定义不同的样式,在此不多做介绍。
我要介绍的是另一种方法:给缩略图添加属性
你可以测试一下,如果把the_post_thumbnail(“thumbnail”)修改为下面这样的代码,看看输出的html结果是什么?
1
|
the_post_thumbnail(‘thumbnail’, array (‘ class ’ => ‘homepage-thumb’)); |
我这边输出的html为
1
2
|
<img width= "150" height= "150" src= "http://domety.com/wp-content/uploads/2010/10/screenshot-150x150.png" class = "homepage-thumb wp-post-image" alt= "" title= "screenshot" /> |
可以和之前的html对比一下,不难发现class属性变成了我们设置的’homepage-thumb’。可以通过这种方法,把首页缩略图和分类页面的缩略图设置为不同的class属性。
改变the_post_thumbnail的html输出
我们可以使用filter来改变缩略图的html输出结果,下面的这段代码为缩略图加了一个文章链接
1
2
3
4
5
|
add_filter( 'post_thumbnail_html' , 'my_post_image_html' , 10, 3 ); function my_post_image_html( $html , $post_id , $post_image_id ) { $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title' , $post_id ) ) . '">' . $html . '</a>' ; return $html ; } |
当你点击缩略图的时候就会跳转到相应的文章内页。
检测文章是否有缩略图
一个良好的习惯就是在调用the_post_thumbnail函数之前,先检测一下该文章有没有设置缩略图,检测的方法是调用has_post_thumbnail函数,代码如下
1
2
|
<?php if ( has_post_thumbnail() ) the_post_thumbnail( 'thumbnail' );?> |
结合本站之前的提取文章内图片做为缩略图的方法,现在可以合二为一:首先判断文章有没有设置缩略图,如果有就直接显示,如果没有再提取文章内的图片为缩略图。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
/* * 缩略图 */ function dm_the_thumbnail() { global $post ; // 判断该文章是否设置的缩略图,如果有则直接显示 if ( has_post_thumbnail() ) { echo '<a href="' .get_permalink(). '" title="阅读全文">' ; the_post_thumbnail( 'thumbnail' ); echo '</a>' ; } else { //如果文章没有设置缩略图,则查找文章内是否包含图片 $content = $post ->post_content; preg_match_all( '/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim' , $content , $strResult , PREG_PATTERN_ORDER); $n = count ( $strResult [1]); if ( $n > 0){ // 如果文章内包含有图片,就用第一张图片做为缩略图 echo '<a href="' .get_permalink(). '" title="阅读全文"><img src="' . $strResult [1][0]. '" alt="缩略图" /></a>' ; } else { // 如果文章内没有图片,则用默认的图片。 echo '<a href="' .get_permalink(). '" title="阅读全文"><img src="' .get_bloginfo( 'template_url' ). '/imgs/default_thumbnail.jpg" alt="缩略图" /></a>' ; } } } |
有兴趣的朋友可以把以上代码复制到functions.php文件中,然后调用dm_the_thumbnail()即可。
wordpress 缩略图功能函数 the_post_thumbnail的更多相关文章
- wordpress教程之自带缩略图功能
首页你要看下你所用的主题有没有开启文章缩略图功能,如果看起的话,会在wordpress后台编辑页面或者文章时在右下角的地方看到一个特色图像的设置,如下图: 如果没有说明你还没有激活这功能.我们需要在你 ...
- WordPress主题开发:开启文章缩略图功能
安装wordpress后,默认的主题里编辑文章都会看见这个缩略图功能,那么我们自己开发的新主题怎么有这个功能呢? 目录: 一.开启缩略功能 二.设置缩略图大小 三.编辑文章,上传缩略图 四.调用缩略图 ...
- 一行代码彻底禁用WordPress缩略图自动裁剪功能
记得在博客分享七牛缩略图教程的时候,提到过 WordPress 默认会将上传的图片裁剪成多个,不但占用磁盘空间,也会拖慢网站性能,相当闹心! 当时也提到了解决办法: ①.关闭主题自带缩略图裁剪功能(若 ...
- wordpress教程之函数讲解
wordpress函数收集 is_home() : 是否为主页is_single() : 是否为内容页(Post), 是否是单篇文章 is_page() : 是否为内容页(Page), 是否 ...
- php文字、图片水印功能函数封装
一直在做有关php文字图片上传方面的工作,所以把此功能函数整理了一次,现在分享给大家. <?php class image { var $g_img; var $g_w; var $g_h; v ...
- Elastic Image Slider 带缩略图功能的幻灯片
今天我们要为您展示如何创建一个简单的弹性幻灯片,带有缩略图预览功能.Elastic Image Slider 这款幻灯片能够自动调整以适应到其父容器,我们可以通过幻灯片使用缩略图预览或幻灯片的自动播放 ...
- WordPress的body_class()函数详解
wordpress的body_class()函数,顾名思义,这个函数根据不同的页面类型为body标签生成class选择器,从而让设计人员可以各方便灵活的控制不同页面中的各个元素.本文对这一函数进行了详 ...
- php实现数字格式化,数字每三位加逗号的功能函数
原地址:http://www.jb51.net/article/73781.htm php实现数字格式化,数字每三位加逗号的功能函数,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 ...
- jQuery基础之(三)jQuery功能函数前缀及与window.onload冲突
1.jQuery功能函数前缀 在javascript中,开发者通常会编写一些小函数来处理各种操作细节,例如在用户提交表单时,要将文本框最前端和最末端的空格内容清理掉.而javascript中没有类似t ...
随机推荐
- Jenkins学习二:Jenkins安装与配置
安装前关注: Q:应该选择哪个版本的Jenkins? A:如果你是公司正式使用推荐长期支持版(LTS),原因:稳定.如果你是学习,随便哪个版本都可以. Q:JDK应该安装哪个版本的? A:推荐安装JD ...
- 十种MySQL报错注入
1.floor() select * from test where id=1 and (select 1 from (select count(*),concat(user(),floor(rand ...
- C语言操作文件
#include <stdio.h> struct stu{ ]; int num; int age; ]; }boya[],boyb[]; struct stu *pa,*pb; mai ...
- PL/SQL Block Structure
[顶]ORACLE PL/SQL编程详解之二: PL/SQL块结构和组成元素(为山九仞,岂一日之功) 继上四篇:ORACLE PL/SQL编程之八:把触发器说透 ORAC ...
- Yeo 17-ROI parcellation
Reference Buckner R L, Krienen F M, Castellanos A, et al. The organization of the human cerebellum e ...
- python执行linux shell管道输出内容
干净不留痕,用过都说好. echo "print 1+1" |python
- .NET 4.0 任务(Task)
随着 .NET 4.0的到来,她与以前各版本的一个明显差别就是并行功能的增强,以此来适应这个多核的世界.于是引入了一个新概念---任务,作为支持并行运算的重要组成部分,同时,也作为对线程池的一个补充和 ...
- 无法连接windows虚拟机oracle的解决办法
在mac机上玩基于oracle db的开发真心不容易,oracle公司死活不出oracle express edition for mac OS,曾经发布过的oracle 10 for mac下载地址 ...
- Python2.6-原理之类和oop(上)
来自<python学习手册第四版>第六部分 一.oop:宏伟蓝图(26章) 在这之前的部分中,经常会使用"对象"这个词,其实,到目前为止都是以对象为基础的,在脚本中传递 ...
- 开源Asp.Net Core小型社区系统
源码地址:Github 前言 盼星星盼月亮,Asp.Net Core终于发布啦!! Asp.Net发布时我还在上初中,没有赶上.但是Asp.Net Core我从beta版本便一直关注.最初项目名叫As ...