首页» IT互联网 » wordpress自带的缩略图功能全解析

wordpress自带的缩略图功能全解析

in IT互联网 | 2 条评论
文章目录

上篇(优化缩略图组件timthumb.php)说了外置缩略图组件timthumb.php的优化。接下来说一说如何利用wordpress2.9版本以上自带的缩略图功能:

1.添加功能

在function.php中插入代码

add_theme_support( ‘post-thumbnails’ );

或者你也可以增加个函数判断缩略图功能是否存在:
if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

插入之后会在后台编辑文章的页面的右下角出现特色图片,(有的版本可能是或者是文章缩略图)


点击设定特色图像后出来的就是和插入图片相同的界面,但是仔细看会发现在本地上传图片后,或者从媒体里打开文件下面会多了作为特色图像的选项

点击后等它显示完成便可以把小窗口关掉了~

2.如何调用

在要显示的 地方加入代码

<?php the_post_thumbnail(); ?>

既可以调用,例如插入入在首页的大循环中。

3.后续改进

(1)如果没有缩略图时调用其他图片
<?php
if ( has_post_thumbnail() ) { ?>
<?php the_post_thumbnail(); ?>
<?php } else {?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/xx.jpg” />
<?php } ?>

把下面的那个改成你自己图片的地址就可以了~

(2)控制缩略图大小

在function.php中刚刚插入的add_theme_support( ‘post-thumbnails’ ); 后面添加

set_post_thumbnail_size( 50, 50, true );

尺寸的设置顺序是: 宽度、高度(以像素为单位)

(3)一张图片,要有多种大小的缩略图

在function.php中刚刚插入的add_theme_support( ‘post-thumbnails’ ); 后面添加

set_post_thumbnail_size( 155, 110, true ); // 305 pixels wide by 380 pixels tall, set last parameter to true for hard crop mode
add_image_size( ‘one’, 155, 110, true ); // Set thumbnail size
add_image_size( ‘two’, 350, 248, true ); // Set thumbnail size
add_image_size( ‘big’, 546, 387, true ); // Set thumbnail size

其中第一个为默认的缩略图大小,后面三个是特殊的大小,可以根据实际情况使用。引号中的one,big,two也可以换成自己想要的名称。

调用,以调用350px*248px的为例,

<?php
$thumbID = get_the_post_thumbnail( $post->ID, ‘two’, $imgsrcparam ); ?>
<?php echo “$thumbID”; ?>

配合之前的那个,最后的代码就是:

<?php
if ( has_post_thumbnail() ) { ?>
<?php
$thumbID = get_the_post_thumbnail( $post->ID, ‘two’, $imgsrcparam ); ?>
<?php echo “$thumbID”; ?>

<?php } else {?>
<img src=”<?php bloginfo(‘template_url’); ?>”/>
<?php } ?>

另:

自定义缩略图尺寸的三种方法
方法一:后台设置
就是上面提到的方法,不过这种方法只设置3种大小。
方法二:自定义
在调用the_post_thumbnail函数的时候,可以直接指定缩略图的大小

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

这种方法的优点的灵活,可以随时通过代码的调用显示不同尺寸的图片,缺点是修改有点麻烦,如果你有多处这样的代码,修改起来就要把每一处代码都要修改掉。
方法三:增加预置尺寸
通过前面的介绍我们已经知道,wordpress为我们预置了三种可以设置的尺寸。可不可以再增加一些预置的尺寸呢?当然可以,我们要用到的函数是add_image_size。比如我们想在首页和分类页面使用不同的缩略图大小,就可以先预置homepage-thumb和category-thumb这两大小。方法是在functions.php文件中加入以下代码

  1. if ( function_exists( ‘add_image_size’ ) ){  
  2. add_image_size( ‘category-thumb’, 200, 200 ); // 预置一个名为’category-thumb’,200*200的缩略图大小  
  3. add_image_size( ‘homepage-thumb’, 220, 180); //预置一个名为’homepage-thumb’,220*180的缩略图大小  
  4. }

之后就可以在首页调用
the_post_thumbnail(‘homepage-thumb’);
显示220*180的缩略图
在分类页面调用

  1. the_post_thumbnail(‘category-thumb’);

则显示200*200的缩略图。
定义缩略图的样式
首先我们先来看一下the_post_thumbnail函数输出的html是什么样的

  1. <img width=”150″ height=”150″ src=”http://127.0.0.1/wpblog/wp-content/uploads/2011/01/152532ccz.png”  
  2. 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. <img width=”150″ height=”150″ src=”http://127.0.0.1/wpblog/wp-content/uploads/2011/01/152532ccz.png”  
  2. class=”homepage-thumb wp-post-image” alt=”” title=”screenshot” />

可以和之前的html对比一下,不难发现class属性变成了我们设置的’homepage-thumb’。可以通过这种方法,把首页缩略图和分类页面的缩略图设置为不同的class属性。
改变the_post_thumbnail的html输出
我们可以使用filter来改变缩略图的html输出结果,下面的这段代码为缩略图加了一个文章链接

  1. add_filter( ‘post_thumbnail_html’, ‘my_post_image_html’, 10, 3 );  
  2. function my_post_image_html( $html, $post_id, $post_image_id ) {  
  3. $html = ‘<a href=”‘ . get_permalink( $post_id ) . ‘” title=”‘ . esc_attr( get_post_field( ‘post_title’, $post_id ) ) . ‘”>’ . $html . ‘</a>’;  
  4. return $html;  
  5. }

当你点击缩略图的时候就会跳转到相应的文章内页。
检测文章是否有缩略图
一个良好的习惯就是在调用the_post_thumbnail函数之前,先检测一下该文章有没有设置缩略图,检测的方法是调用has_post_thumbnail函数,代码如下

  1. <?php if ( has_post_thumbnail() )  
  2. the_post_thumbnail( ‘thumbnail’ );?>

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

  1. view plaincopy to clipboardprint?
  2. /*  
  3. * 缩略图 
  4. */  
  5. function dm_the_thumbnail() {  
  6. global $post;  
  7. // 判断该文章是否设置的缩略图,如果有则直接显示  
  8. if ( has_post_thumbnail() ) {  
  9. echo ‘<a href=”‘.get_permalink().'” title=”阅读全文”>’;  
  10. the_post_thumbnail(‘thumbnail’);  
  11. echo ‘</a>’;  
  12. } else { //如果文章没有设置缩略图,则查找文章内是否包含图片  
  13. $content = $post->post_content;  
  14. preg_match_all(‘/<img.*?(?: |t|r|n)?src=[‘”]?(.+?)[‘”]?(??: |t|r|n)+.*?)?>/sim’, $content, $strResult, PREG_PATTERN_ORDER);  
  15. $n = count($strResult[1]);  
  16. if($n > 0){ // 如果文章内包含有图片,就用第一张图片做为缩略图  
  17. echo ‘<a href=”‘.get_permalink().'” title=”阅读全文”><img src=”‘.$strResult[1][0].'” alt=”缩略图” /></a>’;  
  18. }else { // 如果文章内没有图片,则用默认的图片。  
  19. echo ‘<a href=”‘.get_permalink().'” title=”阅读全文”><img src=”‘.get_bloginfo(‘template_url’).’/imgs/default_thumbnail.jpg” alt=”缩略图” /></a>’;  
  20. }  
  21. }  
  22. }

有兴趣的朋友可以把以上代码复制到functions.php文件中,然后调用dm_the_thumbnail()即可。

关键词:

发表评论 » 共有2 条评论
  • 西门

    找相关的资料,Google过来了,可是楼主的排版实在是看得吃力啊

  • Black Tomy

    学习了,这个很有用,同楼上,这排版确实需要改进呀