特色图像(有时也称为Post Thumbnails)是表示单个Post,Page或Custom Post Type的图像。 当您创建主题时,您可以通过多种不同的方式,在您的存档页面,标题或上面的一个帖子中输出特色图像。
支持特色图像#启用特色图像支持
在“特色图像”界面将出现在“编辑”屏幕上之前,主题必须声明对“特色图像”功能的支持。 通过在主题的functions.php文件中放置以下内容来声明支持:
1 |
add_theme_support( 'post-thumbnails' ); |
注意:要仅针对特定的帖子类型启用特色映像,请参阅add_theme_support()
设置精选图像
一旦添加了对特色图片的支持,“精选图像”元框将在相应的内容项目的“编辑”屏幕上显示。 如果用户无法看到它们,则可以在屏幕选项中启用它。
默认情况下,wordpress主题特色图像元框显示在编辑帖子和编辑页面屏幕的侧栏中。
功能参考
- 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管理媒体面板的“设置”>“媒体”下配置。 您还可以通过传递具有图像尺寸的数组来定义自己的图像大小:
1 2 3 4 5 6 7 |
the_post_thumbnail(); // 没有参数 - >; 缩略图 the_post_thumbnail( 'thumbnail' ); // 缩略图(默认最大150px x 150px) the_post_thumbnail( 'medium' ); // 中等分辨率(最大300px x 300px) the_post_thumbnail( 'medium_large' ); // 中等大分辨率(默认768px x无高度限制) the_post_thumbnail( 'large' ); // 大分辨率(最大640x x 640像素) the_post_thumbnail( 'full' ); // 原始图像分辨率(未修改) the_post_thumbnail( array( 100, 100 ) ); // 其他分辨率(高,宽) |
添加自定义特色图像大小
除了单独使用定义图像大小外
1 |
the_post_thumbnail( array( , ) ); |
您可以在主题的功能文件中创建自定义的特色图像大小,然后可以在主题的模板文件中调用。
1 |
add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height) |
以下是在主题的functions.php文件中创建自定义精选图像大小的示例。
1 2 3 4 5 6 7 8 |
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) } |
设置特色图像输出尺寸
用于当前Theme的functions.php文件。
您可以使用set_post_thumbnail_size()通过按比例调整图像大小来设置默认的精选图像大小(即不扭曲图像):
1 |
set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode |
通过裁剪图像(从侧面或从顶部和底部)设置默认的精选图像尺寸:
1 |
set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, crop mode |
精选图片样式
精选图片被赋予一个类“wp-post-image”。 他们还根据显示的缩略图的大小获得一个类。 您可以使用这些CSS选择器对输出进行调整:
1 2 3 4 5 |
img.wp-post-image img.attachment-thumbnail img.attachment-medium img.attachment-large img.attachment-full |
您还可以使用the_post_thumbnail()中的attribute参数给精选图片自己的类。用“alignleft”类显示精选图像:
1 |
the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft' ) ); |
默认使用
1 2 3 4 |
// 检查帖子或页面是否分配有精选图片。 if ( has_post_thumbnail() ) { the_post_thumbnail(); } |
注意:要返回特色图像以用于PHP代码而不是显示它,请使用: get_the_post_thumbnail()
1 2 3 4 |
// 检查特色图像,然后将其分配给一个PHP变量供以后使用 if ( has_post_thumbnail() ) { $featured_image = get_the_post_thumbnail(); } |
链接发布固定链接或更大的图像
警报:不要在同一主题中一起使用这两个示例。
示例1.要在特定循环中将Post Thumbnails链接到Post固定链接,请在Theme的模板文件中使用以下内容:
1 2 3 4 5 |
<?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文件中:
1 2 3 4 5 6 7 8 |
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 ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>'; return $html; } |
此示例链接到“large”Post Thumbnail图像大小,必须在“循环”中使用。
1 2 3 4 5 6 7 8 |
<?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >'; the_post_thumbnail('thumbnail'); echo '</a>'; } ?> |
源文件
1 |
wp-includes/post-thumbnail-template.php |
外部资源
- 您需要了解有关WordPress 2.9的帖子图像功能的一切
- WordPress 2.9中的post_thumbnail的终极指南
- WordPress中的新功能2.9:发布缩略图