WP笔记

WordPress附件函数总结

WordPress附件可以是图片、视频、文本文件等类型,但大部分WordPress附件函数都是针对图片的,本文总结了常用的附件函数使用方法。

WordPress附件函数

简单列举9个和附件相关的函数。

wp_get_attachment_image_src()

当你需要获取一张图片的不同尺寸版本的URL时,用这个函数。

wp_get_attachment_image_src( $attachment_id, $size, $icon );

用于图片类附件时,根据附件id和指定的尺寸($size,默认是thumbnail)获取图片的url、width、height,以数组形式返回结果,数组形式如下

Array
(
    [0] => 图片url
    [1] => 图片宽度width
    [2] => 图片高度 height
    [3] =>  $is_intermediate的值 //true表示返回了缩放后的图片,false表示返回了原始图片
)

关于$is_intermediate参考image_downsize

关于第三个参数$icon

如果要获取的附件不是一张图片,而是,比如说视频,让$icon为真可以返回代表视频(mime type:video)的图标,否则只能返回空值。这些代表不同mime type的图片在wordpress wp-includes/images/crystal目录下,如下图所示

代表不同mime类型的图标

wp_get_attachment_image()

wp_get_attachment_image( $attachment_id, $size, $icon, $attr );

用于图片类附件时,根据附件ID和指定的尺寸($size,默认是thumbnail)返回完整的img标签,属性包括宽度、高度、alt等。如果是非图片类附件,$icon为true时返回代表该附件类型的图片,具体参考上面图片的说明。

关于第四个参数$attr

这个参数可以给图片标签增加更多的属性,属性用数组来指定,例如给图片增加一个title属性

wp_get_attachment_image(
    $attachment_id,
    'thumbnail',
    false,
    array('title'=>'图片标题')
 );

wp_get_attachment_url()

当你要获取原始图片的地址时,使用该函数。经剪裁产生的图片地址无法通过此函数获取,要使用 wp_get_attachment_image_src() 。

wp_get_attachment_url( $attachment_id );

//返回 https://www.solagirl.net/wp-content/uploads/2012/12/image.jpg

wp_get_attachment_link()

wp_get_attachment_link( $id, $size, $permalink, $icon, $text );

以超链接形式返回附件,链接包括:

  • 如果是图片,以img标签形式返回某个尺寸的图片
  • 如果不是图片,且$icon为true,以img标签形式返回代表该类型文件的图标
  • 如果不是图片,且$icon为false,返回附件标题
  • 由$text指定的文字

例如:

echo wp_get_attachment_link( 1 );

/*输出
<a title="图片标题" href="https://www.solagirl.net/wp-content/uploads/2012/12/image.jpg">
    <img width="150" height="150" alt="misuzu-air" class="attachment-thumbnail"
    src="https://www.solagirl.net/wp-content/uploads/2012/12/image.jpg">
</a>
*/

如果指定了$text参数,则图片将被替换成文字。

the_attachment_link()

the_attachment_link( $id, $fullsize, $deprecated, $permalink );

以超链接形式打印附件,与wp_get_attachment_link()基本类似,前者直接输出结果,后者返回结果。第二个参数不太一样,$fullsize是布尔值,只能选择true or false,表示是使用原始图片(true)还是使用WordPress产生的缩略图(false)。

get_attachment_link()

$attachment_page = get_attachment_link($attachment_id);

以字符串形式返回专门用于显示该附件的页面的url,这个页面的模版通常是attachment.php。与wp_get_attachment_url()的区别,后者以超链接形式返回附件的真实路径。

wp_get_attachment_metadata()

wp_get_attachment_metadata( $attachment_id, $unfiltered );

获取图片类附件的meta信息,附件与post一样存储在wp_posts表中,只是类型不同。attachment meta与post meta类似,存储了有关该附件的全部信息。attachment meta可以告诉我们:

  • 图片的宽度、高度、原始文件路径,
  • 图片会根据多媒体设定生成其它尺寸,这些不同尺寸的宽高等信息
  • 包括图片本身的信息,例如copyright、iso等

wp_get_attachment_thumb_url()

wp_get_attachment_thumb_url( $attachment_id );

获取附件图像的缩略图url,缩略图尺寸在多媒体中设置(缩略图大小一项),上传图片时会自动产生缩略图。

wp_get_attachment_thumb_file()

wp_get_attachment_thumb_file( $attachment_id );

此函数和上面那位很像,唯一的区别是它返回的是附件缩略图的绝对路径,例如

/home/user/www/wp-content/uploads/2012/12/image-150x150.jpg

在使用这个函数时,发现无法正常返回结果,修复的方法是找到这个函数,修改成下面这样,函数位于wp-includes/post.php line 4234

if ( !empty($imagedata['thumb']) && ($thumbfile = str_replace(basename($file), $imagedata['thumb'], $file)) && file_exists($thumbfile) )
        return apply_filters( 'wp_get_attachment_thumb_file', $thumbfile, $post->ID );

替换成

if ( !empty($imagedata['sizes']['thumbnail']['file']) && ($thumbfile = str_replace(basename($file), $imagedata['sizes']['thumbnail']['file'], $file)) && file_exists($thumbfile) )
        return apply_filters( 'wp_get_attachment_thumb_file', $thumbfile, $post->ID );

如何获取WordPress所有可用的image sizes

WordPress允许创建自定义的image sizes,上传的图片会根据尺寸数量创建出很多版本,除了WordPress内置的尺寸,主题和插件都可以创建尺寸,使用下面的代码可以获取所有注册的尺寸。

add_action( 'wp_footer', function(){
    echo '<pre> ', var_dump( wp_get_registered_image_subsizes() ) ,'</pre>';
});

WordPress默认的图片的尺寸有:

  • thumbnail
  • medium
  • medium_large
  • large
  • post-thumbnail
  • 1536×1536
  • 2048×2048

WooCommerce默认的尺寸有:

  • woocommerce_thumbnail
  • woocommerce_single
  • woocommerce_gallery_thumbnail
  • shop_catalog
  • shop_single
  • shop_thumbnail

20条评论

  1. Hi Sola,

    我在wordpress默认媒体编辑器里面插入了多张图片(每张图片使用fullimg尺寸),前端想调用这个尺寸做一个带缩略图的图像滑块,类似效果
    想请教如果调用编辑器里图片对应的缩略图?

    1. media library里的图片可以根据attachment id,通过调用wp_get_attachment_image_src()函数知道图片路径,该函数第二个参数就是制定尺寸的。
      至于如何获取attachment id,就要看你的具体使用环境了。

  2. Hi Sola,

    我使用Advanced Custom Fields这款插件后台创建了一个自定义字段,可以添加媒体,字段名叫huxing_jiesao,
    想请教下如何获取自定义字段huxing_jiesao中添加的图片attachment ID?
    谢谢

    1. 如果你使用的是Image类型,则可以定义Return Value,
      Return Value选择Image ID,那么get_field调用后直接返回attachment ID。
      如果选择Image Object,则返回一个数组,$image = get_field(‘huxing_jiesao’); ID为$image[‘id’];
      以后遇到这种情况,直接打印一下返回值就明白了,比如Image Object返回的数组如下

      Array
      (
          [id] => 216
          [alt] => 
          [title] => 1614575_3634530
          [caption] => 
          [description] => 
          [mime_type] => image/jpeg
          [url] => http://localhost/woocommerce/wp-content/uploads/2014/05/1614575_3634530.jpg
          [width] => 950
          [height] => 632
          [sizes] => Array
              (
                  [thumbnail] => http://localhost/woocommerce/wp-content/uploads/2014/05/1614575_3634530-150x150.jpg
                  [thumbnail-width] => 150
                  [thumbnail-height] => 150
                  [medium] => http://localhost/woocommerce/wp-content/uploads/2014/05/1614575_3634530-300x199.jpg
                  [medium-width] => 300
                  [medium-height] => 199
                  [large] => http://localhost/woocommerce/wp-content/uploads/2014/05/1614575_3634530.jpg
                  [large-width] => 625
                  [large-height] => 415
                  [shop_thumbnail] => http://localhost/woocommerce/wp-content/uploads/2014/05/1614575_3634530-90x90.jpg
                  [shop_thumbnail-width] => 90
                  [shop_thumbnail-height] => 90
                  [shop_catalog] => http://localhost/woocommerce/wp-content/uploads/2014/05/1614575_3634530-150x150.jpg
                  [shop_catalog-width] => 150
                  [shop_catalog-height] => 150
                  [shop_single] => http://localhost/woocommerce/wp-content/uploads/2014/05/1614575_3634530-300x300.jpg
                  [shop_single-width] => 300
                  [shop_single-height] => 300
                  [post-thumbnail] => http://localhost/woocommerce/wp-content/uploads/2014/05/1614575_3634530-624x415.jpg
                  [post-thumbnail-width] => 624
                  [post-thumbnail-height] => 415
              )
      )
      
  3. Hi Sola,
    我使用你的方法成功输出了图片,我的代码结构是图片外面还包含了一个LI标签,我想给每个LI标签添加一个宽度,这个宽度就是里面包含的这一张图片的宽度,希望能指导下,谢谢

    1. wp_get_attachment_image_src可以获取图片宽度,在输出li前应该会调用这个函数吧,把宽度加到li上就好啦。

  4. SOLA你好,请问你有没有一些好的插件,文章置顶,天气,WooCommerce产品动态图库,防机器人注册等相关插件呢?谢谢

      1. 你好,wordpress中 如何让POST在该Categories置顶呢?比如我想让文章3在MUSIC这个Categories置顶,有没有这种插件呢?谢谢

        1. 不行啊,因为它只是放一条文章在第一,那第二,第三就不行了,只能第一

        2. 所有置顶文章都会排在前面, 多篇置顶文章按照发布时间先后顺序排列。

  5. 你好在,wordpress 中的发布portfolio后 page not found,是什么意思?URL 是对的,内容也有,但是显示不出来,在网页的标题上显示page not found,如何解决谢谢

    1. page not found 说明url是不对的,portfolio是你主题创建的custom post type吧,重新保存一下固定链接试试,再不行一个一个禁用插件。还不行,就是你主题的问题了。

  6. Pingback: WordPress附件函数 | 点滴记忆Every memory blog
  7. Pingback: WordPress附件函数:获取附件url | Gimhoy's Blog - 免费资源 | 域名优惠 | 云空间 | WordPress

评论已关闭。