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

Partner 站长学院 2021-06-15 热度 1.25K℃ 收藏 本文共2183个字,预计阅读时间需要6分钟。

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

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

代码一

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

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

配套样式

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

代码二

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

<div id="post-nav">
	<?php $prevPost = get_previous_post(true);
		if($prevPost) {
			$args = array(
				'posts_per_page' => 1,
				'include' => $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('thumbnail'); ?></a>
		<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
		<small><?php the_date('F j, Y'); ?></small>
	</div>
	<?php
		wp_reset_postdata();
			} //end foreach
		} // end if
 
		$nextPost = get_next_post(true);
		if($nextPost) {
			$args = array(
				'posts_per_page' => 1,
				'include' => $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('thumbnail'); ?></a>
		<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
		<small><?php the_date('F j, Y'); ?></strong>
	</div>
	<?php
		wp_reset_postdata();
		} //end foreach
	} // end if
	?>
</div>
版权声明:本文内容来源于互联网资源,由 蓝魅网络 整理汇总,如有侵权请您与我们联系删除!
其他声明:如未标明出处,所有文章均为蓝魅网络原创,转载请务必保留本文链接,感谢您支持。
蓝魅网络 » 为WordPress上篇下篇文章链接添加缩略图
  • 售后服务范围 1、商业模板使用范围内问题免费咨询
    2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限会员用户
    3、单价超过200元的模板即可以免费一次安装,需提供服务器信息
    付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
    2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
    3、服务器环境配置安装(一般 ¥50-300)
    4、网站中毒处理(需额外付费,500元/次/质保三个月)
    售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
    免责声明提示 本站所提供的资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 495553705@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!

低至 ¥99 元/年 爆款产品限时抢

阿里云*云小站 | 上云优惠聚集地 | 领取限量云产品优惠

立即抢购