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. 说道特色图像不得不提,那个特色图像,尺寸一定得选好,太大了,影响首页加载速度。

说点什么吧




wireless earbuds moscow mule mugs bluetooth speakers waterproof camera best wireless earbuds best vacuum cleaner best drugstore foundation best dishwasher best waist trainer wireless headphones best vacuum 0594918 best bluetooth earbuds waterproof bluetooth speaker tattoo cover up action camera
订阅本站