WordPress thumbnail function Function the_post_thumbnail

Many WordPress themes, especially those of magazine type, will add a thumbnail to each log, which is typically used on the home page, may appear alone, or in conjunction with a log digest. But there is no standard way to implement the log thumbnail, many topics are using WordPress custom fields to implement the log thumbnail function, such a complex setup, although I have many WordPress projects in the production of this method, and set up a direct upload thumbnail image method , but it's still a little cumbersome.

Starting with WordPress 2.9, WordPress starts with a built-in log thumbnail feature and provides a detailed interface for the topic's author to set and invoke the log thumbnail.

First step: Let the theme support thumbnail function

First make sure your WordPress version is above 2.9, then find and edit the functions.php file in your current theme folder, add the following code

1234	<?phpif( function_exists( ‘add_theme_support‘ ) )      add_theme_support( ‘post-thumbnails‘); ?>

(Note: The theme folder is saved in the wp-content/themes/directory)

This way, when you edit the post in the background, there will be an "article thumbnail" module on the right side of the category directory.

Click "Set thumbnail" to add a thumbnail to the article.

Remember to click the "Use as thumbnail" button below when adding a picture.

Step Two: Use thumbnails

Call the The_post_thumbnail function where you want the thumbnail to appear, for example, if you would like to display thumbnails for each article on the home page, you can add the following code to the index.php file

1234	<? php if( function_exists( ‘the_post_thumbnail‘ ) )            the_post_thumbnail( ‘thumbnail‘); ?>

This will show the thumbnail, where the parameter "thumbnail" indicates the size of the thumbnail display. WordPress Pre-Set 4 sizes, you can use the following 4 parameters to replace ' thumbnail ', of course, different numbers show the picture size is different

Øthumbnail (thumbnail size)

Ømedium (medium size)

Ølarge (large size)

Øfull (original size)

The specific size can be set in the media option in the background settings

You can set up 3 different sizes to facilitate use in different situations.

Your theme now supports thumbnail functionality and is flexible to use.

I'll show you a bit more advanced application techniques.

Three ways to customize thumbnail size one: background settings

This is the method mentioned above, but this method only sets 3 sizes.

Method Two: Customize

When calling the The_post_thumbnail function, you can specify the size of the thumbnail directly

1	the_post_thumbnail(array(200,200)); // 显示200X200尺寸的缩略图

The advantages of this method of flexibility, you can at any time through the code of the call to display different size of the picture, the disadvantage is that the modification is a bit cumbersome, if you have more than this code, modify it will have to change every code.

Method Three: Increase the preset size

Through the previous introduction we already know, WordPress for us preset three kinds of size can be set. Can you add some more preset sizes? Of course, the function we're going to use is add_image_size. For example, we want to use different thumbnail sizes on the homepage and the category page, we can preset the size of Homepage-thumb and Category-thumb first. method is to include the following code in the functions.php file

1234	if( function_exists( ‘add_image_size‘) ){      add_image_size( ‘category-thumb‘, 200, 200 ); // 预置一个名为’category-thumb’,200*200的缩略图大小      add_image_size( ‘homepage-thumb‘, 220, 180); //预置一个名为’homepage-thumb’,220*180的缩略图大小  }

Then you can call it on the home page

1	the_post_thumbnail(‘homepage-thumb’);

Show thumbnails of 220*180

Called on the category page

1	the_post_thumbnail(‘category-thumb’);

The 200*200 thumbnail is displayed.

Define styles for thumbnails

First, let's take a look at what the HTML of the The_post_thumbnail function output looks like.

12	"150"height="150" src="http://domety.com/wp-content/uploads/2010/10/screenshot-150x150.png" class="attachment-thumbnail wp-post-image" alt="" title="screenshot"/>

As you can see, we can use CSS to define the style of the class Attachment-thumbnail.

But what if I want to define different styles for the home page and the category page separately?

Method one is to add a div, to define different styles for different Div, do not introduce much here.

I'm going to introduce another way: To add attributes to a thumbnail image

You can test, if you change the The_post_thumbnail ("thumbnail") to the following code, see the output of the HTML results?

1	the_post_thumbnail(‘thumbnail’,array(‘class’ => ‘homepage-thumb’));

The HTML I output here is

12	"150"height="150" src="http://domety.com/wp-content/uploads/2010/10/screenshot-150x150.png" class="homepage-thumb wp-post-image" alt="" title="screenshot"/>

Compared to the previous HTML, it is not difficult to find that the class attribute becomes the ' homepage-thumb ' we set. This way, the thumbnail of the homepage and the category page can be set to a different class attribute.

Changing the HTML output of The_post_thumbnail

We can use filter to change the HTML output of the thumbnail, and the following code adds an article link to the thumbnail image.

12345

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;  }

When you click on the thumbnail, you will be redirected to the corresponding article page.

Detect if an article has a thumbnail image

A good habit is to call the The_post_thumbnail function before the detection of the article has not set the thumbnail, the method of detection is to call the Has_post_thumbnail function, the code is as follows

12	<?php if( has_post_thumbnail() )      the_post_thumbnail( ‘thumbnail‘);?>

Combined with this site before the extraction of the image in the article as a thumbnail method, can now be integrated: first of all to determine whether the article has set thumbnails, if there is a direct display, if there is no re-extraction of the picture in the article for the thumbnail image.

1234567891011121314151617181920212223242526272829303132333435363738394041

/*   * 缩略图  */  function dm_the_thumbnail() {        global $post;        // 判断该文章是否设置的缩略图，如果有则直接显示        if ( has_post_thumbnail() ) {            echo ‘<a href="‘.get_permalink().‘" title="阅读全文">‘;            the_post_thumbnail(‘thumbnail‘);            echo ‘</a>‘;        } else { //如果文章没有设置缩略图，则查找文章内是否包含图片             $content = $post->post_content;            preg_match_all(‘//sim‘, $content, $strResult, PREG_PATTERN_ORDER);            $n = count($strResult[1]);            if($n > 0){ // 如果文章内包含有图片，就用第一张图片做为缩略图                 echo ‘<a href="‘.get_permalink().‘" title="阅读全文">.$strResult[1][0].‘" alt="缩略图" /></a>‘;            }else { // 如果文章内没有图片，则用默认的图片。                echo ‘<a href="‘.get_permalink().‘" title="阅读全文">.get_bloginfo(‘template_url‘).‘/imgs/default_thumbnail.jpg" alt="缩略图" /></a>‘;             }        }    }

Interested friends can copy the above code into the functions.php file, and then call Dm_the_thumbnail ().

WordPress thumbnail function Function the_post_thumbnail