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

  • 酉灿
  • WordPress
  • Jul 23, 2021

大部分WordPress主题都会在正文下面添加上下篇文章的链接,可以通过下面的代码给这个链接再加个缩略图,让其更醒目。

将下面代码添加到正文模板文件的适当位置即可。

代码一

默认调用文章100×100的特色图像。


 
  1. <div id="post-nav" class="navigation">
  2. <?php $prevPost = get_previous_post(true);
  3. if($prevPost) ?>
  4. <div class="nav-box previous">
  5. <?php previous_post_link('&laquo; &laquo; Previous Post:', 'yes'); ?>
  6. <?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>
  7. <?php previous_post_link('%link',"$prevthumbnail <p>%title</p>", TRUE); ?>
  8. </div>
  9. <?php $nextPost = get_next_post(true);
  10. if($nextPost) ?>
  11. <div class="nav-box next" style="float:right;">
  12. <?php previous_post_link('&raquo; &raquo; Next Post:', 'yes'); ?>
  13. <?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); ?>
  14. <?php next_post_link('%link',"$nextthumbnail <p>%title</p>", TRUE); ?>
  15. </div>
  16. <?php ?>
  17. </div>

 

配套样式


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

 

代码二

除了调用特色图像,并显示文章发表时间,稍加修改还可以添加更多的文章信息,包括自定义缩略图、文章简要等。


 
  1. <div id="post-nav">
  2. <?php $prevPost = get_previous_post(true);
  3. if($prevPost) {
  4. $args = array(
  5. 'posts_per_page' => 1,
  6. 'include' => $prevPost->ID
  7. );
  8. $prevPost = get_posts($args);
  9. foreach ($prevPost as $post) {
  10. setup_postdata($post);
  11. ?>
  12. <div class="post-previous">
  13. <a class="previous" href="<?php the_permalink(); ?>">&laquo; Previous Story</a>
  14. <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
  15. <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
  16. <small><?php the_date('F j, Y'); ?></small>
  17. </div>
  18. <?php
  19. wp_reset_postdata();
  20. } //end foreach
  21. } // end if
  22.  
  23. $nextPost = get_next_post(true);
  24. if($nextPost) {
  25. $args = array(
  26. 'posts_per_page' => 1,
  27. 'include' => $nextPost->ID
  28. );
  29. $nextPost = get_posts($args);
  30. foreach ($nextPost as $post) {
  31. setup_postdata($post);
  32. ?>
  33. <div class="post-next">
  34. <a class="next" href="<?php the_permalink(); ?>">Next Story &raquo;</a>
  35. <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
  36. <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
  37. <small><?php the_date('F j, Y'); ?></strong>
  38. </div>
  39. <?php
  40. wp_reset_postdata();
  41. } //end foreach
  42. } // end if
  43. ?>
  44. </div>

 

打赏