wordpress 缩略图功能函数 the_post_thumbnail

yyn查看全部>> 04-28

人气 94

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!

以下文字转载自 http://www.cnblogs.com/bojuetech/p/4891470.html

使用缩略图

在需要显示缩略图的地方调用the_post_thumbnail函数,比如你想在首页为每篇文章显示缩略图,可以在index.php文件中加入下面这样的代码

<?
 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函数的时候,可以直接指定缩略图的大小

the_post_thumbnail(array(200,200)); // 显示200X200尺寸的缩略图  

这种方法的优点的灵活,可以随时通过代码的调用显示不同尺寸的图片,缺点是修改有点麻烦,如果你有多处这样的代码,修改起来就要把每一处代码都要修改掉。

方法三:增加预置尺寸

通过前面的介绍我们已经知道,wordpress为我们预置了三种可以设置的尺寸。可不可以再增加一些预置的尺寸呢?当然可以,我们要用到的函数是add_image_size。比如我们想在首页和分类页面使用不同的缩略图大小,就可以先预置homepage-thumb和category-thumb这两大小。方法是在functions.php文件中加入以下代码

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的缩略图大小  
}  

之后就可以在首页调用

the_post_thumbnail(‘homepage-thumb’); 

显示220*180的缩略图

在分类页面调用

the_post_thumbnail(‘category-thumb’);  

则显示200*200的缩略图。

定义缩略图的样式

首先我们先来看一下the_post_thumbnail函数输出的html是什么样的

<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结果是什么?

the_post_thumbnail(‘thumbnail’,array(‘class’ => ‘homepage-thumb’));

我这边输出的html为

<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输出结果,下面的这段代码为缩略图加了一个文章链接

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函数,代码如下

<?php if ( has_post_thumbnail() )  
    the_post_thumbnail( 'thumbnail' );?> 

结合本站之前的提取文章内图片做为缩略图的方法,现在可以合二为一:首先判断文章有没有设置缩略图,如果有就直接显示,如果没有再提取文章内的图片为缩略图。

/*  
  
* 缩略图 
  
*/ 
   
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:等您坐沙发呢!



会员登陆还没有账号 立即注册

用户登录

忘记密码 ?

用第三方帐号直接登录

微博账号登陆 QQ账号登陆