WordPress主题(模板)修改教程(十一):使用文章缩略图功能

十二月 03
磊子 2011年 11 条评论

今天磊子说的这个缩略图功能,其实网上已经传烂了,不知道大家有没有看过。今儿拿出来原因是,感觉网上说的不是很具体,一些设置没有提到,所以先给大家提前说一下。

首页你要看下你所用的主题有没有开启文章缩略图功能,如果看起的话,会在wordpress后台编辑页面或者文章时在右下角的地方看到一个特色图像的设置,如下图:

文章缩略图设置如果没有说明你还没有激活这功能。我们需要在你主题functions.php里面加一段代码。

<?php

add_theme_support( 'post-thumbnails' ); //激活文章和页面的缩略图功能。

//如果你想分别激活它们,可以使用下面的代码:

add_theme_support( 'post-thumbnails', array( 'post' ) ); // 激活文章缩略图功能

add_theme_support( 'post-thumbnails', array( 'page' ) ); // 激活页面缩略图功能

?>

这样你的缩略图功能就激活了,然后我们添加图片或者直接点击设置特色图片的时候,你会发现多了一个设置如图。

文章缩略图选择我们单击作为特色图像,这样你就可以将这个图片作为特色图片显示了。

文章缩略图显示效果

做好之后我们就要对它进行调用然后在前台显示出来,代码是:

<?php

the_post_thumbnail(); 

//需要将这段代码放在你的主循环中比如:

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<?php the_post_thumbnail(); ?>
<?php endwhile; ?>

?>

这样缩略图就可以显示了。这个基本的方法掌握好之后,下面是一些它的其他使用方法。

1.自定义缩略图的大小(放在主题functions.php里面add_theme_support()的下面)

<?php set_post_thumbnail_size( $width, $height, $crop ); ?> 

//$width 是图片的宽度,可以直接填数字

//$height 是图片的高度,也可以直接填数字

//$crop 是否进行裁剪,默认是false不裁剪,如果填写true 你的图片将会裁剪成你设置的大小。

不过set_post_thumbnail_size()磊子在用的时候不起作用,不知道大家有没有试过。试过后如果可以使用的记得和磊子说下哈。

我这边使用的是直接规定缩略图大小(直接在主循环里面输出)

<?php

the_post_thumbnail('thumbnail');       // 缩略图(最大默认 宽150px高150px)

the_post_thumbnail('medium');          // 中等大小(最大默认 宽300px 高300px)

the_post_thumbnail('large');           // 大图 (最后默认宽1024px高1024px)

the_post_thumbnail('full');            // 原图

the_post_thumbnail( array(100,100) );  // 自己定义宽高

?>

这里需要多讲一下,设置默认缩略图大小是在wordpress后台 设置->媒体 里面。

文章缩略图大小设置
2.判断文章是否含有缩略图

<?php
has_post_thumbnail();

//用法是,通过if如果进行判断

if ( has_post_thumbnail() )
{
	//显示缩略图
}
else
{
	//没有缩略图( 这里可以放一张默认的图片 )
}

?>

3.创建新的缩略图大小(放在主题functions.php文件add_theme_support()下面)

我们看到上面设置的图片大小都是等比例缩小的。不管你怎么设置它都是按比列来进行缩小的。如果想设置宽高不等的。便可以使用下面这个函数。

<?php

 add_image_size( $name, $width, $height, $crop ); 

//这里的第一个参数$name是新创建缩略图的名称,其他的参数和上面说的是一样的

//使用方法

add_image_size('home-thumb','200','120');

?>

然后我们在显示的时候只需要在填上新的缩略图名称如:the_post_thumbnail(‘home-thumb’);这样就可以显示了。

4.获取缩略图ID号

<?php  get_post_thumbnail_id();  ?>  //放在主循环中

以上便是今天主要讲的内容,大家如果以后有需要的可以来看看。

» 版权所有©转载必须以链接形式注明作者和原始出处:磊子的博客 » WordPress主题(模板)修改教程(十一):使用文章缩略图功能
» 地址:( Ctrl+C 复制 )
» 如果对本站感兴趣,请到网站右下方订阅本站,将为你带来更多精彩和实用的文章
» 如果您对这篇文章感兴趣,不妨小小的 捐助(Donate)一下博主吧,不管多少都是对博主最大的支持和鼓励哟,博主-磊子感谢大家的支持!!!

11 条留言 其中:访客:5 条, 博主:2 条

  1. Joychao说:

    貌似3.5中启用后发布文章时右栏并没有那个特色图像的区域

  2. Pingback: WordPress将文章第一张图片作为缩略图代码 | 神鹰在线

  3. Pingback: WPGS » WordPress主题使用文章缩略图功能

  4. Pingback: Wordpress主题修改教程:使用文章缩略图功能 | FKBlog

  5. Vanish说:

    不错!看来很多功能是可以自己改造出来的。 :grin:

  6. Pingback: Wordpress主题修改:使用文章缩略图功能 - 蓝枫博客

  7. simple说:

    【做好之后我们就要对它进行调用然后在前台显示出来,代码是:….】

    这句话下面的代码插入什么地方呢?我的主题发布文章时有添加特色图像,但是添加后在首页不显示 :sad: ,不知道怎么弄啊

    • 磊子说:

      继续往下内容,【//需要将这段代码放在你的主循环中比如: 】下面这段代码就是添加的例子。放在主循环里面!

      • simple说:

        哦 主循环是什么?你说下插入哪个文件,文件哪行代码上面或下面就行啦 :oops:

  8. 说道特色图像不得不提,那个特色图像,尺寸一定得选好,太大了,影响首页加载速度。

说点什么吧




订阅本站