wordpress 文章缩略图功能
2011-03-27 17:51
260 查看
You may have heard a bit of news about a new thumbnail feature for themes coming to WordPress 2.9. Yes, you’ll be able to easily upload a post thumbnail. However, it’s not just thumbnails. The image will have various sizes. So, I’m going to refer to this feature as the post image feature.
In this tutorial, I’ll be covering the various things you can do with the post image feature. Some things will be specific to end users while others will be useful for theme and plugin developers.
One important thing to note is that this new feature is an image-based representation of a post. The image itself is directly tied to your post. You shouldn’t think of it as something different than that.
To use this feature, you must be within the post editing screen of your WordPress admin. On this screen, you’ll see a new meta box labeled “Post thumbnail” (or “Page thumbnail” for pages). There’ll be a link to “Set thumbnail,” which will allow you to use the media uploader to load a new image.
By default, WordPress gives you several image sizes each time you upload an image. These image sizes are:
Thumbnail
Medium
Large
Full (the image you uploaded)
Some plugins even extend this by allowing more intermediate sizes. The important thing is that you understand that more than thumbnails can be used here.
The rest of this tutorial will focus on developer features and some options for using older images.
In this example, we’ll check if there’s an image. If there’s not, we’ll show a default image instead.
You only need to call the function in your code like so:
Here’s an example of that functionality:
Add this PHP code to your theme’s
Add this PHP code to your theme’s
I’ve got a solution for this problem: The Get the Image plugin.
Version 0.4 will be released when WordPress 2.9 is out. Not only will support be added for the new WordPress post image feature, but you won’t lose all of the hard work you’ve put in. The plugin will have the ability to check for post images in five different ways (in the below order):
Custom fields.
New post image feature.
Attached image.
Scan the post for images.
Default image.
For those of you already using this plugin or a theme of mine that includes the script, you’ll only have to upgrade the plugin or theme. The feature will be turned on for you by default, so you will be able to start using the new feature without touching anything but an upgrade button.
If you’re a user of my Get the Image plugin or Hybrid theme, look out for an update within a few days of WordPress 2.9. You’ll be able to start using the post image functionality soon.
In this tutorial, I’ll be covering the various things you can do with the post image feature. Some things will be specific to end users while others will be useful for theme and plugin developers.
One important thing to note is that this new feature is an image-based representation of a post. The image itself is directly tied to your post. You shouldn’t think of it as something different than that.
How does an end user make use of this feature?
First, your theme must add support for it. Otherwise, you won’t be able to use it. At this point, let’s assume that your theme does support it. I’ll go over instructions for theme authors later.To use this feature, you must be within the post editing screen of your WordPress admin. On this screen, you’ll see a new meta box labeled “Post thumbnail” (or “Page thumbnail” for pages). There’ll be a link to “Set thumbnail,” which will allow you to use the media uploader to load a new image.
It’s not just for thumbnails
Even though it is called “post thumbnails,” we can technically use the feature for all sorts of things (e.g., feature images, medium-sized images for the front page, etc.).By default, WordPress gives you several image sizes each time you upload an image. These image sizes are:
Thumbnail
Medium
Large
Full (the image you uploaded)
Some plugins even extend this by allowing more intermediate sizes. The important thing is that you understand that more than thumbnails can be used here.
How to add support for the post image feature in a theme
Theme authors, I’m going to make this simple for you. You only need one line of code to turn this feature on for your users. Add this to your theme’sfunctions.phpfile:
add_theme_support( 'post-thumbnails' );Or, you can register support for specific post types. For example, let’s suppose you wanted to add thumbnail support for both the
postand
moviepost type but not for the
pagepost type. You’d use this instead:
add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );Of course, that one line doesn’t actually add anything to the front end for you. You’ll need to call the image somewhere within The Loop in your template files. For example, you might want to add thumbnails to your category archives. You’d do this by adding this line of code:
<?php the_post_thumbnail( 'thumbnail' ); ?>Or, maybe you have a section on a special template that calls for medium-sized images:
<?php the_post_thumbnail( 'medium' ); ?>Or, a huge sliding feature area on your front page and need the full-sized image:
<?php the_post_thumbnail( 'full' ); ?>That’s all there is to it. As a theme author, you can hand over some powerful functionality to your users with just a couple of lines of code.
The rest of this tutorial will focus on developer features and some options for using older images.
Checking if the post has an image
Sometimes, you may need to check if a post has an image. There’s a function for that calledhas_post_thumbnail(), which will return
trueor
falsebased on whether there’s an image.
In this example, we’ll check if there’s an image. If there’s not, we’ll show a default image instead.
<?php if ( has_post_thumbnail() ) the_post_thumbnail( 'thumbnail' ); else echo '<img src="default-image.png" alt="Example Image" title="Example" />'; ?>
Getting the post image ID
Maybe you need to write your own custom script but still want to allow users to upload their own images. You can grab the post image ID and use it. This ID is saved as the meta value for the meta key_thumbnail_id. It is the ID of the attached file.
You only need to call the function in your code like so:
$image_id = get_post_thumbnail_id();
How to return the image instead of displaying it
In some scenarios, you might want to return the post image for use in your PHP code instead of displaying it.Here’s an example of that functionality:
$image = get_the_post_thumbnail( $post->ID, 'thumbnail' );
How to filter the image size
Some plugin developers may want to filter the image size (or maybe even child theme authors). Thepost_thumbnail_sizefilter hook is available for that. The filter function below is for changing the
thumbnailsize to
medium.
Add this PHP code to your theme’s
functions.phpfile or your plugin file:
add_filter( 'post_thumbnail_size', 'my_post_image_size' ); function my_post_image_size( $size ) { $size = 'medium'; return $size; }
Changing the HTML output of the post image
There may be some scenarios where you’ll want to change the HTML markup of the displayed image. In this example, I’ll show you how to wrap the image with a link to the post.Add this PHP code to your theme’s
functions.phpfile or your plugin file:
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_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>'; return $html; }
What happens to my old images/thumbnails?
If you’re like me and many others, you may have been using custom fields to add images to your posts for years. If you switch to this new method, everything will be lost.I’ve got a solution for this problem: The Get the Image plugin.
Version 0.4 will be released when WordPress 2.9 is out. Not only will support be added for the new WordPress post image feature, but you won’t lose all of the hard work you’ve put in. The plugin will have the ability to check for post images in five different ways (in the below order):
Custom fields.
New post image feature.
Attached image.
Scan the post for images.
Default image.
For those of you already using this plugin or a theme of mine that includes the script, you’ll only have to upgrade the plugin or theme. The feature will be turned on for you by default, so you will be able to start using the new feature without touching anything but an upgrade button.
Have fun with your new post images
I hope this tutorial has given you an in-depth look at the post image feature. There are some limitations, but on the whole, this feature will make things much easier for end users compared to the currently-available methods.If you’re a user of my Get the Image plugin or Hybrid theme, look out for an update within a few days of WordPress 2.9. You’ll be able to start using the post image functionality soon.
相关文章推荐
- 黄聪:如何使用WordPress 2.9内置文章缩略图功能(Post Thumbnail)
- WordPress主题开发:开启文章缩略图功能
- wordpress如何使用特色图像功能,wordpress文章缩略图的调用
- wordpress文章特色图片功能详解
- ECShop 文章添加缩略图功能
- wordpress日志缩略图功能实现
- 使用 WordPress 自定义字段功能为文章添加下载按钮
- WordPress日志缩略图功能深度剖析
- WordPress非插件添加文章浏览次数统计功能
- Wordpress 首页文章缩略图
- wordpress文章摘要功能
- WordPress中给文章添加自定义字段及后台编辑功能区域
- WordPress使用自定义字段设置缩略图和显示作者文章数量和评论数量代码
- wordpress3.8之文章自定义栏目功能的使用
- 8 款为 WordPress 文章生成缩略图的插件
- 代码实现WordPress文章浏览次数统计功能
- WordPress非插件添加文章浏览次数统计功能
- WordPress 关闭文章修订和指定自动保存时间功能
- WordPress 日志缩略图功能
- 去掉wordpress功能中的登录,文章,评论,.org链接