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

发布时间：2021-5-07 00:24

大多数WordPress主题都会在文本下方添加指向下一篇文章的链接。您可以通过以下代码在此链接中添加缩略图，以使其更加醒目。一起来看看吧：

将以下代码添加到主体模板文件的适当位置

    <div id="post-nav" class="navigation">
    	<?php $prevPost = get_previous_post(true);
    	if($prevPost) ?>
    		<div class="nav-box previous">
    			<?php previous_post_link('&laquo; &laquo; Previous Post:', 'yes'); ?>
    			<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>
    			<?php previous_post_link('%link',"$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('&raquo; &raquo; Next Post:', 'yes'); ?>
    			<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); ?>
    			<?php next_post_link('%link',"$nextthumbnail <p>%title</p>", TRUE); ?>
    		</div>
    	<?php ?>
    </div>

默认调用为文章的100×100特色图片

以下是配套样式

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

怎么样，如果喜欢的话你也去试试吧！文章来源于知更鸟......