How to add thumbnails to previous and next article links in WordPress-WordPress-php.cn

How to add thumbnails to previous and next article links in WordPress

藏色散人

Release： 2021-05-12 18:00:54

forward

2803 people have browsed it

The following tutorial column of WordPress will introduce to you how to add thumbnails to the previous and next article links in WordPress. I hope it will be helpful to friends who need it!

Add thumbnails for WordPress previous and next article links

Most WordPress themes will add links to previous and next articles under the text. You can add this link through the following code Add a thumbnail to make it stand out.

Add the following code to the appropriate location of the text template file.

Code 1

The featured image of the article is called 100×100 by default.

<div id="post-nav" class="navigation">
<?php $prevPost = get_previous_post(true);
if($prevPost) ?>
<div class="nav-box previous">
<?php previous_post_link(&#39;&laquo; &laquo; Previous Post:&#39;, &#39;yes&#39;); ?>
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>
<?php previous_post_link(&#39;%link&#39;,"$prevthumbnail <p>%title</p>", TRUE); ?>
</div>
<?php $nextPost = get_next_post(true);
if($nextPost) ?>
<div class="nav-box next" style="float:right;">
<?php previous_post_link(&#39;&raquo; &raquo; Next Post:&#39;, &#39;yes&#39;); ?>
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); ?>
<?php next_post_link(&#39;%link&#39;,"$nextthumbnail <p>%title</p>", TRUE); ?>
</div>
<?php ?>
</div>

Copy after login

Supporting style

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

Copy after login

Code 2

In addition to calling the featured image and displaying the publication time of the article, a slight modification You can also add more article information, including customized thumbnails, article briefs, etc.

<div id="post-nav">
<?php $prevPost = get_previous_post(true);
if($prevPost) {
$args = array(
&#39;posts_per_page&#39; => 1,
&#39;include&#39; => $prevPost->ID
);
$prevPost = get_posts($args);
foreach ($prevPost as $post) {
setup_postdata($post);
?>
<div class="post-previous">
<a class="previous" href="<?php the_permalink(); ?>">&laquo; Previous Story</a>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(&#39;thumbnail&#39;); ?></a>
<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
<small><?php the_date(&#39;F j, Y&#39;); ?></small>
</div>
<?php
wp_reset_postdata();
} //end foreach
} // end if
 
$nextPost = get_next_post(true);
if($nextPost) {
$args = array(
&#39;posts_per_page&#39; => 1,
&#39;include&#39; => $nextPost->ID
);
$nextPost = get_posts($args);
foreach ($nextPost as $post) {
setup_postdata($post);
?>
<div class="post-next">
<a class="next" href="<?php the_permalink(); ?>">Next Story &raquo;</a>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(&#39;thumbnail&#39;); ?></a>
<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
<small><?php the_date(&#39;F j, Y&#39;); ?></strong>
</div>
<?php
wp_reset_postdata();
} //end foreach
} // end if
?>
</div>

Copy after login

The above is the detailed content of How to add thumbnails to previous and next article links in WordPress. For more information, please follow other related articles on the PHP Chinese website!