允许每篇博文都有不同的精选图片

Question

I am using the Set featured Image in WordPress to display a image at the top of each blog post. The code I am using is simple but does the job

<?php get_header(); ?>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<div class="featured-image">
    <div class="featured-image-wrap">
                <!-- Post Thumbnail -->
            <?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                    <?php the_post_thumbnail(); // Fullsize image for the single post ?>
                </a>
            <?php endif; ?>
            <!-- /Post Thumbnail -->
    </div>
</div>

<!-- Section -->
<section class="blog">

    <!-- Article -->
    <article class="blog-post" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

        <!-- Post Title -->
        <h1>
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </h1>
        <!-- /Post Title -->

        <!-- Post Details -->
        <span class="date"><h2>Written By <?php the_author(); ?> on <?php the_time('F j, Y'); ?></h2></span>
        <!-- /Post Details -->

        <?php the_content(); // Dynamic Content ?>

        <br class="clear">

        <?php the_tags( __( 'Tags: ', 'html5blank' ), ', ', '<br>'); // Separated by commas with a line break at the end ?>

        <p><?php _e( 'Categorised in: ', 'html5blank' ); the_category(', '); // Separated by commas ?></p>

        <?php edit_post_link(); // Always handy to have Edit Post Links available ?>



    </article>
    <!-- /Article -->

<?php endwhile; ?>

<?php else: ?>

    <!-- Article -->
    <article>

        <h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>

    </article>
    <!-- /Article -->

<?php endif; ?>

</section>
<!-- /Section -->
    <div class="finished">
        <h2>Finished! Any Questions?</h2>
        <p>If you have any questions please feel free to email me or <a href="http://twitter.com/joshua_hornby">Tweet me</a>. If you learnt anything in this lesson or found it useful please share with your friends.</p>

        <a href="https://twitter.com/share" class="twitter-share-button" data-via="joshua_hornby" data-size="large">Tweet</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

    </div>
<div class="blog-footer">
    <aside class="footer-content">
            <div class="dark-btn-footer-twitter"><a href="http://twitter.com/joshua_hornby" target="_blank">@joshua_hornby</a></div>
            <div class="dark-btn-footer-twitter bottom"><a href="http://designer-school.com">More Posts</a></div>
    </aside>
</div>

Alhough when ever I change the image when editing a post it changes it on all posts. Is there a way to allow each post to have its own feature image?

Answer 1

I want to notice that the_post_thumbnail() function should be used inside of the loop of single.php:

if (have_posts()) :
   while (have_posts()) :
if ( has_post_thumbnail()) :  ?>
   <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
     <?php the_post_thumbnail(); ?>
   </a>
<?php endif; 
   endwhile;
endif;

If not (i.e outside of loop somewhere in the single.php file), use the same code but with the function get_the_post_thumbnail($id, $size, $attr ) and specify the id of the concerned post in the first parameter. the other 2 parameters are optional

I hope it helps, if not, it is better you send an edit showing more code of your single.php file.