特色图片和文章缩略图

特色图片（有时也称为文章缩略图）是代表单个文章、页面或自定义文章类型的图片。当你创建主题时，可以以许多不同的方式输出特色图片，例如，在存档页上，在页眉上，或在文章上面。

启用对特色图片的支持

主题必须声明支持特色图片功能，才能在编辑界面上出现特色图片界面。支持的声明是在主题的 functions.php 文件中加入以下内容

add_theme_support( 'post-thumbnails' );

 

设置特色图片

一旦你添加了对特色图片的支持，特色图片元框将在相应的内容项目的编辑界面上可见。如果用户不能看到它，可以在他们的界面选项中启用它。

默认情况下，特色图片元框显示在"编辑文章"和"编辑页面"屏幕的侧边栏。

 

函数参考

add_image_size()– 注册新的图片尺寸
set_post_thumbnail_size() – 注册文章缩略图尺寸

has_post_thumbnail() – 检查文章是否附有图片
the_post_thumbnail() – 显示文章缩略图

get_the_post_thumbnail() – 检索文章缩略图
get_post_thumbnail_id() – 检索文章缩略图ID

 

图片尺寸

WordPress默认的图片尺寸为 "Thumbnail"、"Medium"、"Large"和 "Full Size"（上传图片的原始尺寸）。这些图片大小可以在WordPress管理的媒体面板上的>设置>媒体下进行配置。你也可以通过传递一个带有图片尺寸的数组来定义你自己的图片大小。

the_post_thumbnail(); // Without parameter ->; Thumbnail
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'medium_large' ); // Medium-large resolution (default 768px x no height limit max)
the_post_thumbnail( 'large' ); // Large resolution (default 1024px x 1024px max)
the_post_thumbnail( 'full' ); // Original image resolution (unmodified)
the_post_thumbnail( array( 100, 100 ) ); // Other resolutions (height, width)

 

添加自定义特色图片尺寸

除了使用：

the_post_thumbnail( array(  ,  ) );

你还可以在主题的functions文件中创建自定义的特色图片尺寸，然后在模板文件中调用：

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

下面是一个例子，说明如何在主题的functions.php文件中创建自定义的特色图片尺寸。

if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
    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)
 }

 

设置特色图片输出尺寸

用于当前主题的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()中的属性参数给特色图片提供自己的类。
以“alignleft”类显示特色图片。

the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft' ) );

 

示例

 

默认用法

// check if the post or page has a Featured Image assigned to it.
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}

// check for a Featured Image and then assign it to a PHP variable for later use
if ( has_post_thumbnail() ) {
    $featured_image = get_the_post_thumbnail();
}

 

链接到文章固定链接或大图片

例子1. 在一个特定的循环中把文章缩略图链接到文章固定链接，在主题的模板文件中使用以下内容：

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

例子2. 将网站上所有文章缩略图都链接到文章固定链接，请把这个放在当前主题的 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="' . get_permalink( $post_id ) . '">' . $html . '</a>';
  return $html;

}

这个例子链接到大尺寸的文章缩略图，必须在循环内使用。

 if ( has_post_thumbnail()) {
    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
    echo '<a href="' . $large_image_url&#91;0&#93; . '">';
    the_post_thumbnail('thumbnail');
    echo '</a>';
 }