如何在Wordpress中添加特色图像标题

Question

I am hoping someone may be able to help me with a problem. I am building a news web site for a friend of mine. The site is starting to come together, but I cannot find out how to add captions to featured images. I have been looking all over the web today, there are loads of ways to do it by adding code to php sheets, but I am not sure what I am doing.

I have added so code to the functions.php code, but the everything goes pair shaped.

I am keeping my fingers crossed, someone will be able to help me by typing me through what to do.

Thank you in advance for your help.

Kind regards

John

Answer 1

First, you'll need to drop the following code in your functions.php file:

function the_post_thumbnail_caption() {
  global $post;

  $thumbnail_id    = get_post_thumbnail_id($post->ID);
  $thumbnail_image = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));

  if ($thumbnail_image && isset($thumbnail_image[0])) {
    echo '<span>'.$thumbnail_image[0]->post_excerpt.'</span>';
  }
}

Paste it right before the closing PHP tag in that file, if there isn't a closing PHP tag then make sure there's no empty lines below the code you paste as that can cause problems.

Then, where you'd like the caption to be displayed, you'll need to call it with this:

<?php the_post_thumbnail_caption(); ?>

If you're unsure where to put the call in your template files, you'll need to find where <?php the_post_thumbnail(); ?> <?php the_post_thumbnail(); ?> is being called. Just look for that line in your template file, and place the function call near it, where ever you'd like the caption to be displayed at. The function wraps the caption in a span tag automatically so you can target it with CSS, but you can also wrap the function call in any tag you'd like to.

So for example, if your template file is calling the featured image with this or something very similiar:

<?php 
    if ( has_post_thumbnail() ) {
        the_post_thumbnail();
} ?>

You'd want to add the caption call to it like this:

<?php 
    if ( has_post_thumbnail() ) {
        the_post_thumbnail();
} ?>
<?php the_post_thumbnail_caption(); ?>

Let me know if you need any other clarification.

Answer 2

I know this is an old question, but I wanted to offer another solution that others might prefer, if you would rather deal with data that is already available (less database calls) while using fields already available in WordPress.

Since the output of get_the_post_thumbnail() returns the entire img tag as a string with the alt tag pre-populated from the caption field, you can simply extract the alt tag of the image tag by using xml parser or regex.

I did this:

    <?php 
    if ( $featured = get_the_post_thumbnail( get_the_ID() ) ):

        echo $featured; 
        preg_match('/alt="(.*)"/i', $featured, $caption);

        if ($caption) {
            echo wpautop(array_pop($caption));
        }
    endif;
    ?>

If you want it in a function like the originally accepted answer, you pass the img tag directly to your function:

    function get_the_post_thumbnail_caption($img_tag) {
        preg_match('/alt="(.*)"/i', $img_tag, $caption);
        return array_pop($caption);
    }

And in the template:

    $img = get_the_post_thumbnail( get_the_ID() ); // or any id
    echo wpautop( get_the_post_thumbnail_caption( $img ) );

Note that if you populate the 'alt text' field, it will overwrite the caption field data when outputting the img tag. You can override that behavior with filters if necessary.

Answer 3

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('large');           // Large resolution (default 640px x 640px max)
the_post_thumbnail('full');            // Original image resolution (unmodified)

the_post_thumbnail( array(100,100) );  // Other resolutions