WordPress教程：为上下篇文章链接添加缩略图

功能需求说明

你希望在WordPress文章页面中，为上一篇和下一篇文章的链接添加特色图像，使得链接更加醒目。以下是实现这一功能的代码，可以根据需要选择其中一种或者根据两种代码进行修改。

代码一：简单调用文章特色图像

这段代码会在上一篇和下一篇文章链接中显示100x100像素的特色图像。

PHP代码

<div id="post-nav" class="navigation">
    <?php $prevPost = get_previous_post(true);
    if($prevPost) : ?>
        <div class="nav-box previous">
            <?php previous_post_link('%link', '&laquo; Previous Post', true); ?>
            <?php $prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100)); ?>
            <?php previous_post_link('%link', "$prevThumbnail <p>%title</p>", true); ?>
        </div>
    <?php endif; ?>

    <?php $nextPost = get_next_post(true);
    if($nextPost) : ?>
        <div class="nav-box next" style="float:right;">
            <?php next_post_link('%link', 'Next Post &raquo;', true); ?>
            <?php $nextThumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100)); ?>
            <?php next_post_link('%link', "$nextThumbnail <p>%title</p>", true); ?>
        </div>
    <?php endif; ?>
</div>




CSS样式





#post-nav {
   clear: both;
   height: 100px;
   margin: 0 0 70px;
}
#post-nav .nav-box {
   background: #e9e9e9;
   padding: 10px;
}
#post-nav img {
   float: left;
   margin: 0 10px 0 0;
}
#post-nav p {
   margin: 0 10px;
   font-size: 11px;
   vertical-align: middle;
}
#post-nav .previous {
   float: left;
   vertical-align: middle;
   width: 300px;
   height: 120px;
}
#post-nav .next {
   float: right;
   width: 300px;
   height: 120px;
}

代码二：显示更多文章信息和自定义缩略图

这段代码不仅显示特色图像，还包括文章标题、发表时间等信息。

PHP代码





<div id="post-nav">
   <?php $prevPost = get_previous_post(true);
   if($prevPost) :
       $prevThumbnail = get_the_post_thumbnail($prevPost->ID, 'thumbnail');
   ?>
       <div class="post-previous">
           <a class="previous" href="<?php echo get_permalink($prevPost->ID); ?>">&laquo; Previous Story</a>
           <a href="<?php echo get_permalink($prevPost->ID); ?>"><?php echo $prevThumbnail; ?></a>
           <h4><a href="<?php echo get_permalink($prevPost->ID); ?>"><?php echo get_the_title($prevPost->ID); ?></a></h4>
           <small><?php echo get_the_date('F j, Y', $prevPost->ID); ?></small>
       </div>
   <?php endif; ?>

   <?php $nextPost = get_next_post(true);
   if($nextPost) :
       $nextThumbnail = get_the_post_thumbnail($nextPost->ID, 'thumbnail');
   ?>
       <div class="post-next">
           <a class="next" href="<?php echo get_permalink($nextPost->ID); ?>">Next Story &raquo;</a>
           <a href="<?php echo get_permalink($nextPost->ID); ?>"><?php echo $nextThumbnail; ?></a>
           <h4><a href="<?php echo get_permalink($nextPost->ID); ?>"><?php echo get_the_title($nextPost->ID); ?></a></h4>
           <small><?php echo get_the_date('F j, Y', $nextPost->ID); ?></small>
       </div>
   <?php endif; ?>
</div>

CSS样式

#post-nav {
    clear: both;
    height: 160px;
    margin: 0 0 70px;
}
#post-nav .post-previous, #post-nav .post-next {
    background: #f2f2f2;
    padding: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}
#post-nav img {
    float: left;
    margin-right: 10px;
}
#post-nav h4 {
    margin: 5px 0;
}
#post-nav small {
    color: #999;
    display: block;
    font-size: 11px;
}
#post-nav .previous {
    float: left;
}
#post-nav .next {
    float: right;
}




使用方法

将以上代码根据需要添加到你的WordPress主题的 single.php 文件中，以显示带有特色图像的上一篇和下一篇文章链接。根据实际情况调整样式和显示内容。