欢迎您光临爱永设计官网!
电话图标 服务热线/微信:13436537174 QQ咨询:276583799

新闻资讯

news

wordpress开启文章特色图片及其使用方法

发表日期:2012-10-11 文章作者:爱永设计  浏览次数:14759 次

一、让你的博客拥有此功能:在主题functions.php中声明即可

add_theme_support( ‘post-thumbnails’ );

这种方式可以让你的文章和页面都拥有该功能。你也可以用下面这两条中的一条,至于他们的意思,你应该一看就清楚了吧。

add_theme_support( ‘post-thumbnails’, array( ‘post’ ) ); // 在单篇文章中开启该功能
add_theme_support( ‘post-thumbnails’, array( ‘page’ ) ); //在页面文章中开启该功能

通过上面操作,可以看看后台是否有此功能了。这里要声明的是,特色图片上传后会经过缩略,即调用的图片是原始上传图片的缩略图。为了控制缩略图大小,我们还可以用下面的这些代码来控制,将这些代码放置在上面刚添加的代码后面。

set_post_thumbnail_size( 155, 110, true ); // 设置默认的缩略图大小尺寸
add_image_size( ‘one’, 155, 110, true ); // 设置标记为”one”的缩略图尺寸,这里的one应该是数组下标
add_image_size( ‘two’, 350, 248, true );
add_image_size( ‘big’, 546, 387, true );

如果你的主题已经支持特色图片功能,你可以直接在主题文件夹的functions.php或相关文件中查找上面的这些函数,以修改默认值或添加自己喜欢的尺寸等。

二、前台显示对应的特色图片:将下面代码放置在文章调用循环内

<?php if ( has_post_thumbnail() ) { ?>
<?php the_post_thumbnail(); ?>
<?php } else {?>
没有特色图片
<?php } ?>

上面这一段应该很简单,即判断是否有特色图片,有的话就显示出来。不过在上文中不是设置了不同的缩略图大小么?怎么调用呢?用下面的代码替换上面的the_post_thumbnail()就可以了:

<?php the_post_thumbnail( ‘big’ ); ?>

或者

<?php $thumbID = get_the_post_thumbnail( $post->ID, ‘two’, $imgsrcparam ); ?>
<?php echo “$thumbID”;//调用了上面设置的标记为two的那张缩略图 ?>

然而,即使通过上面的调用,显示出来的图片只是单调的一张图,连title,alt属性都没有,可以用下面的代码来解决:

<?php the_post_thumbnail(‘thumbnail’, array( ‘alt’ => trim(strip_tags( $post->post_title )), ‘title’    => trim(strip_tags( $post->post_title )),‘class’ => ‘homepage-thumb’ )); ?>

输出后的html代码为

<img width=”350″ height=”233″ src=”http://www.utubon.tk/wp-uploads/2010/07/2009_08_107-350×233.jpg” class=”homepage-thumb wp-post-image” alt=”饰品” title=”饰品” />

三、声明注意项、涉及函数、图片大小控制:

1、wordpress版本是否够高来拥有此功能,2.6之前的好像不能,所以在上文第一步时,请换成下面的代码

if ( function_exists( ‘add_theme_support’ ) ) { // Added in 2.9
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 50, 50, true ); // Normal post thumbnails
add_image_size( ‘single-post-thumbnail’, 400, 9999 ); // Permalink thumbnail size
}

2、该功能涉及的函数:

  • Function Reference/add theme support
  • Function Reference/get the post thumbnail
  • Function Reference/add image size
  • Function Reference/has post thumbnail
  • get_post_thumbnail_id()

另外,你还可以用$thumb_img_src=wp_get_attachment_image_src($attemtend-> ID);(附件对应的ID)来获取特色图片的src。但这种方法对于我们来说几乎起不到太大的最用,我们几乎不会用到附件的ID,附件ID可以通过进入相 册查看该图片获得的网址中获取。于是我们可以用一种内容截取的办法来获取图片地址:

preg_match(‘/<img.+src=[‘”]([^'”]+)[‘”].* />/i’,$thumb_img, $index_piclink);
$thumb_img_src[$i]=$index_piclink[1];

通过研究发现在wordpress数据库表的postmeta表中,存在meta_key=’_thumbnail_id’的记录,该记录即为thumbnail对应的附件记录,可以先用get_post_thumbnail_id()获取该文章的thumbanail_id,然后用wp_get_attachment_image_src($thumbanail_id,$size)获取图片的src,其中$size参数即上文的one,two,big这样的标记号。这样你就可以根据自己的喜好呈现出自己想要的样式了。乌徒帮首页幻灯片就是采用这种方法获取的特色图片作为幻灯图片的。例如,在loop循环中用下面的代码显示特色图片的地址。

<?php
$post_ID=$post->ID;
$post_thumbnail_id = get_post_thumbnail_id( $post_ID );
$post_thumbnail_src = wp_get_attachment_image_src($post_thumbnail_id,’Full’);
echo $post_thumbnail_src[0];
?>

3、如何获取不同大小的图

wordpress特色功能在上传特色图片时默认保存为小中大图、特色图(高198px)、原始图(这指在没有进行上文第一步的设置的时候),那么如何调用这几种图呢?

  • 缩略图(Thumbnail)
  • 小图(Small)
  • 中等图(Medium)
  • 大图(Large)
  • 原图(Full)

在上文的调用代码<?php the_post_thumbnail(  ); ?>中,()内无内容或为thumbnail时为默认状态,调用的是特色图特色图(高198px),换为其他几个我想您已经知道效果了吧。

还有一点是,如何设置这些大图小图的尺寸呢?在后台“设置》媒体”内就有。如果将大小图内全部填写0的话,那么就不生成大小图了,在文章插入图片的时候,也不能选择大小图,只有特色图和原图了。

将文章分享到..
相关资讯
最新主题模板
随机新闻
最新网站案例
  • 更多 +我们能做什么

    致力于互联网品牌建设与网络营销,专业领域包括网站建设、网站模板、移动互联网营销、wordpress平台开发等,服务范围涵盖基础的域名服务、主机 服务;企业邮箱、云服务器、网络营销等应用服务,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。

  • 更多 +网站模板优势

  • 更多 +关于爱永设计

    爱永设计工作室一直致力于品牌精美的网页设计、网页制作DIV+CSS布局、JS效果、精美网站模板、标志设计、专业仿站, 低廉的价格,真诚的服务,我们拥有全国各地的客户群体和各行业的成功案例。以一流的服务,出色的网页设计和制作能力,认真严谨的工作态度为客户提供优质满意的服务。期待与您的合作!

Copyright © 2012 - 2024 aysheji.com All Rights Reserved 爱永设计 版权所有
邮箱:aysheji@163.com 在线客服:276583799 模板演示地址:www.aymoban.com 备案号:京ICP备13060102号-3
服务内容: 网页设计 网站建设 网站制作 网站模板 婚庆网站模板 摄影网站 手机网站制作 自适应网站制作