WordPress主题开发 — 特色图像或缩略图

特色图像（有时也称为Post Thumbnails）是表示单个Post，Page或Custom Post Type的图像。 当您创建主题时，您可以通过多种不同的方式，在您的存档页面，标题或上面的一个帖子中输出特色图像。

支持特色图像＃启用特色图像支持

在“精选图像”界面将出现在“编辑”屏幕上之前，主题必须声明对“特色图像”功能的支持。 通过在主题的functions.php文件中放置以下内容来声明支持：

add_theme_support( 'post-thumbnails'%20<span%20class="token punctuation">);

注意：要仅针对特定的帖子类型启用特色映像，请参阅add_theme_support()

设置精选图像

一旦添加了对特色图片的支持，“精选图像”元框将在相应的内容项目的“编辑”屏幕上显示。 如果用户无法看到它们，则可以在屏幕选项中启用它。

默认情况下，精选图像元框显示在编辑帖子和编辑页面屏幕的侧栏中。

功能参考

• add_image_size()– 注册新图片大小...
• set_post_thumbnail_size() – 注册文章缩略图的图片大小...
• has_post_thumbnail() – 检查帖子是否附加了图片...
• the_post_thumbnail() – 显示帖子缩略图...
• get_the_post_thumbnail() – 检索Post Thumbnail ...
• get_post_thumbnail_id() – Retrieve Post Thumbnail ID…

Image Sizes

WordPress的默认图像大小是“Thumbnail”，“Medium”，“Large”和“Full Size”（您上传的图像的原始大小）。 这些图像大小可以在WordPress管理媒体面板的“设置”>“媒体”下配置。 您还可以通过传递具有图像尺寸的数组来定义自己的图像大小：

the_post_thumbnail(); // 没有参数 - >; 缩略图
the_post_thumbnail( 'thumbnail'%20<span%20class="token punctuation">); // 缩略图（默认最大150px x 150px）
the_post_thumbnail( 'medium'%20<span%20class="token punctuation">); // 中等分辨率（最大300px x 300px）
the_post_thumbnail( 'medium_large'%20<span%20class="token punctuation">); // 中等大分辨率（默认768px x无高度限制）
the_post_thumbnail( 'large'%20<span%20class="token punctuation">); // 大分辨率（最大640x x 640像素）
the_post_thumbnail( 'full'%20<span%20class="token punctuation">); // 原始图像分辨率（未修改）
the_post_thumbnail( array( 100, 100 ) ); // 其他分辨率（高，宽）

添加自定义特色图像大小

除了单独使用定义图像大小外

the_post_thumbnail( array(  ,  ) );

您可以在主题的功能文件中创建自定义的特色图像大小，然后可以在主题的模板文件中调用。

add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height)

以下是在主题的functions.php文件中创建自定义精选图像大小的示例。

if ( function_exists( 'add_theme_support'%20<span%20class="token punctuation">) ) {
    add_theme_support( 'post-thumbnails'%20<span%20class="token punctuation">);
    set_post_thumbnail_size( 150, 150, true ); // default Featured Image dimensions (cropped)
 
    // additional image sizes
    // delete the next line if you do not need additional image sizes
    add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height)
 }

设置特色图像输出尺寸

用于当前Theme的functions.php文件。
您可以使用set_post_thumbnail_size()通过按比例调整图像大小来设置默认的精选图像大小（即不扭曲图像）：

set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode

通过裁剪图像（从侧面或从顶部和底部）设置默认的精选图像尺寸：

set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, crop mode

精选图片样式

精选图片被赋予一个类“wp-post-image”。 他们还根据显示的缩略图的大小获得一个类。 您可以使用这些CSS选择器对输出进行调整：

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

您还可以使用the_post_thumbnail()中的attribute参数给精选图片自己的类。用“alignleft”类显示精选图像：

the_post_thumbnail( 'thumbnail', array( 'class'%20<span%20class="token operator">=> 'alignleft'%20<span%20class="token punctuation">) );

默认使用

// 检查帖子或页面是否分配有精选图片。
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}

注意：要返回特色图像以用于PHP代码而不是显示它，请使用： get_the_post_thumbnail()

// 检查特色图像，然后将其分配给一个PHP变量供以后使用
if ( has_post_thumbnail() ) {
    $featured_image = get_the_post_thumbnail();
}

链接发布固定链接或更大的图像

警报：不要在同一主题中一起使用这两个示例。

示例1.要在特定循环中将Post Thumbnails链接到Post固定链接，请在Theme的模板文件中使用以下内容：

<?php if ( has_post_thumbnail()) : ?>
   <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
   <?php the_post_thumbnail(); ?>
   </a>
 <?php endif; ?>

示例2.要将您网站上的所有Post Thumbnails链接到Post的固定链接，请将其放在当前的Theme的functions.php文件中：

add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
 
function my_post_image_html( $html, $post_id, $post_image_id ) {
 
  $html = '<a href="'%20<span%20class="token punctuation">. get_permalink( $post_id ) . '" title="'%20<span%20class="token punctuation">. esc_attr( get_the_title( $post_id ) ) . '">'%20<span%20class="token punctuation">. $html . '</a>';
  return $html;
 
}

此示例链接到“large”Post Thumbnail图像大小，必须在“循环”中使用。

<?php
 if ( has_post_thumbnail()) {
    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
    echo '<a href="'%20<span%20class="token punctuation">. $large_image_url[0] . '" title="'%20<span%20class="token punctuation">. the_title_attribute('echo=0') . '" >';
    the_post_thumbnail('thumbnail');
    echo '</a>';
 }
 ?>

源文件

wp-includes/post-thumbnail-template.php

外部资源

• 您需要了解有关WordPress 2.9的帖子图像功能的一切
• WordPress 2.9中的post_thumbnail的终极指南
• WordPress中的新功能2.9：发布缩略图