YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » WordPress » wp_get_attachment_image_src() 函数详解 – 如何函数获得 WordPress 中的特色图像路径

wp_get_attachment_image_src() 函数详解 – 如何函数获得 WordPress 中的特色图像路径

WordPress 中通常我们用 the_post_thumbnail() 函数打印特色图像(featured image)。但是在有些情况下,我们只需获得文章特色图像的路径。比如我的 BlueNight 主题中使用了 jQuery 的 lazyload 插件来异步加载图片,优化前端性能。这样在一开始我就不能直接使用 the_post_thumbnail() 输出特色图像,而需要自己输出一个占位的默认图片,然后再通过 lazyload 获取到特色图像的路径替换占位的图像(怎么使用 jQuery 的 lazyload 插件请查看《Lazy Load Plugin for jQuery》)。在这种情况下,我们如何获得之前发表文章时设置的特色图像的路径呢?

WordPress 的工程师们考虑的很周全,专门为我们提供了 wp_get_attachment_image_src() 函数来处理这个问题。

wp_get_attachment_image_src() 函数简介

Description

Returns an array with the image attributes “url”, “width” and “height”, of an image attachment file.
Note: For just the image src, use the first element in the returned array.

WordPress 的官方的 Description 里介绍的很清楚了,wp_get_attachment_image_src() 函数返回一个数组,有3个值分别是特色图像的路径(src)、宽度(width)和高度(height)。另外还特别提示了,如果只需要获得图片路径的话,需要输出返回数组的第一个值。这里就以我的主题显示特色图像的处理为例:

<?php
    // 获得特色图像相关的数据数组 
    $timthumb_src = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'imaj' ); 
    
    // 输出src路径,也就是数组的第一值
    echo $timthumb_src[0]; 
 ?>

wp_get_attachment_image_src() 函数的用法

<?php wp_get_attachment_image_src( $attachment_id, $size, $icon ); ?>

参数说明

wp_get_attachment_image_src() 函数接受3个参数:

  • $attachment_id:上传附件的 id 值。数值型的值,必选的参数,默认值:None。
  • $size:图片的尺寸。数组或字符窜类型的值,可选的参数,默认值:thumbnail。我们知道的 WordPress 特色图像string 类型的值有 thumbnail, medium, large or full(最小的缩略图、中等、大和原始尺寸)4个值。我们也可以使用数组参数自定义图片的大小:array(32(width),32(height))。WordPress 2.5 以前的版本是没有 $size 参数的,只能显示最小的缩略图。
  • $icon:替换附件的 icon 的路径,可选参数,默认值:false。

在我给出的 BlueNight 主题的例子中,我使用了 get_post_thumbnail_id(get_the_ID()) 来获取了 $attachment_id。而 $size 则使用了 imaj 作为值,这个是我的主题中自定义的缩略图的名称(是106*106的尺寸的)。而 $icon 参数我们基本上很少用到。

wp_get_attachment_image_src() 函数的返回值

返回一个 Array,数组类型的值:

  • [0] => url
  • [1] => width
  • [2] => height

wp_get_attachment_image_src() 函数完整的实例

WordPress 官方的用例

<?php 
$attachment_id = 8; // attachment ID

$image_attributes = wp_get_attachment_image_src( $attachment_id ); // returns an array
?> 
 
<img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>">

最后想说的是,如果你知道宽度和高度值,就直接给 img 标签设置 width 和 height,就不需要再 echo $image_attributes[1]; 让服务器处理。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:wp_get_attachment_image_src() 函数详解 – 如何函数获得 WordPress 中的特色图像路径

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)