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()即可。

时间： 2024-10-03 18:46:18

wordpress 缩略图功能函数 the_post_thumbnail的相关文章

wordpress教程之自带缩略图功能

首页你要看下你所用的主题有没有开启文章缩略图功能,如果看起的话,会在wordpress后台编辑页面或者文章时在右下角的地方看到一个特色图像的设置,如下图: 如果没有说明你还没有激活这功能.我们需要在你主题functions.php里面加一段代码. <?php add_theme_support( 'post-thumbnails' ); //激活文章和页面的缩略图功能. //如果你想分别激活它们,可以使用下面的代码: add_theme_support( 'post-thumbnails', a

wordpress教程之函数讲解

wordpress函数收集 is_home() : 是否为主页is_single() : 是否为内容页(Post),   是否是单篇文章  is_page() : 是否为内容页(Page),   是否是 页面文章 is_category() : 是否为Category/Archive页,  是否是 标签页  is_tag() : 是否为Tag存档页is_date() : 是否为指定日期存档页is_year() : 是否为指定年份存档页is_month() : 是否为指定月份存档页is_day()

基于线性表的功能函数大全

顺序表 一:线性表的存储结构 顺序表的顺序存储是指一组地址连续的存储单元依次存储线性表中的各个元素,使得线性表中在逻辑结构中相邻的元素存储在连续的物理存储单元中.采用顺序存储结构存储的线性表通常简称顺序表,可将顺序表归纳为:关系线性化,结点顺序存. 用C语言定义线性表的顺序存储表示 #define MAXSIZE 100 Typedef struct { ElemType elem[MAXSIZE]; int last; } 二:线性表顺序存储结构上的基本运算 (1)查找操作 查找可采用顺序查找

jQuery基础之（三）jQuery功能函数前缀及与window.onload冲突

1.jQuery功能函数前缀 在javascript中,开发者通常会编写一些小函数来处理各种操作细节,例如在用户提交表单时,要将文本框最前端和最末端的空格内容清理掉.而javascript中没有类似trim()功能,在师院jQuery后,便可以使用trim()函数. trim()函数是jQuery对象的一个方法,使用以下例子 <script type="text/javascript"> var sString = " 1234567890"; sStr

04微信公众平台 - 实现【翻译】功能函数，返回一个文本字符串。

一.功能代码函数实现 private function _baiduDic($keyword) { $tranurlaip = "http://openapi.baidu.com/public/2.0/bmt/translate?client_id=9peNkh97N6B9GGj9zBke9tGQ&q={$keyword}&from=auto&to=auto"; //翻译URLapi地址 $transtr = file_get_contents($tranurl

05微信公众平台 - 实现【点歌】功能函数，返回一个文本字符串。

一.功能代码函数实现 /* * 功能5:根据歌名点歌功能,输入歌名即可,传入参数为输入对象$postObj */ private function _listenMusic($postObj) { $ret= "<xml> <ToUserName><![CDATA[%s]]></ToUserName> <FromUserName><![CDATA[%s]]></FromUserName> <CreateTi

03微信公众平台 - 实现【天气查询】功能函数，返回一个文本字符串。

一.功能代码函数实现 private function _weather($city) { include("weather_cityId.php"); $c_name=$weather_cityId[$city]; if(!empty($c_name)){ $json=file_get_contents("http://m.weather.com.cn/data/".$c_name.".html"); $data = json_decode($

【C语言】请编写实现以下功能函数：实现对一个8bit数据（unsigned char）的指定位（例如第8位）的置0或置1操作，并保持其他位不变

/*请编写实现以下功能函数:实现对一个8bit数据(unsigned char)的指定位(例如第8位)的置0或置1操作,并保持其他位不变. 函数原型:void bit_set(unsigned char *p_date,unsigned char position,int flag). 函数参数说明:p_date是指定数据源,position是指定位(1~8),flag是置0或置1. */ #include <stdio.h> void bit_set(unsigned char *p_dat

Powershell 功能函数大全（Sharepoint 2013/2010）

Powershell 功能函数大全 说明: 本文章讲述powershell操作大全,是笔者多时积累完成.一步步从底层网站架构搭建,到网页内容的呈现, 均由powershell完成. 考虑到网站内容框架的移植,比如从开发环境到测试环境,再到产品环境,底层框架内容可由Powershell一键部署,这样更加方便以及可维护性.考虑到项目架构搭建的异同,初步分为以下步骤: 1. Poweshell 对 Site Column的完整操作 2. Powershell 对 Content Type的完整操作 3