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

Ourboke
Ourboke
Ourboke
486
文章
130
评论
2021年5月7日00:24:451 585

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

上下篇文章添加缩略图

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

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

茫茫人海能够相遇便是缘分,但请记住;尊重每一份辛勤的汗水,所以转载请注明出处,谢谢!
Ourboke
  • 本文由 发表于 2021年5月7日00:24:45
  • 转载请务必保留本文链接:https://www.ourboke.com/2422.html
如何为WordPress主题添加文章字数和阅读时间 WordPress

如何为WordPress主题添加文章字数和阅读时间

折腾的路上永不止,很奇怪对于一篇文章内的字数和阅读时间有啥用呢,这我也不知道,也不敢问。不过有朋友说人家的主题里都有,博主你知道怎么加一个吗?说实话我是不知道的,不过在鸟哥这里看到了这个教程,所以今天...
如何修改WordPress用户ID WordPress

如何修改WordPress用户ID

在第一次用WordPress的时候因为不清楚,所以在登录名称选择的时候比较随意,从而选择了默认登录名称,时候才发现不能够修改。 如何修改WordPress用户ID 要想修改最好的办法就是重新创建一个新...
WordPress网站域名实现完美更换操作教程 WordPress

WordPress网站域名实现完美更换操作教程

网站域名变更是屡见不鲜的事情,每个人都会因为某些事情对之前的所作进行推翻,每个程序的更换域名操作方式也不一样。我们就拿WordPress网站域名更换来举个例子,这也是众多WordPress用户经常遇到...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:1   其中:访客  1   博主  0
    • 灰常记忆 灰常记忆 2

      :lol: 没时间折腾 看见代码就头疼