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

知更鸟 2021年5月6日15:12:33WordPress评论5612阅读模式

大部分WordPress主题都会在正文下面添加上下篇文章的链接,可以通过下面的代码给这个链接再加个缩略图,让其更醒目。文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

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

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

文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

将下面代码添加到正文模板文件的适当位置即可。文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

代码一文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

默认调用文章100×100的特色图像。文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

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

 文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

配套样式文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

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

来源文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

代码二文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

除了调用特色图像,并显示文章发表时间,稍加修改还可以添加更多的文章信息,包括自定义缩略图、文章简要等。文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

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

来源文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

https://wolfdragon.net/2015/08/nextprevious-posts-links-with-thumbnails-and-excerpts/文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

https://wptricks.co.uk/next-and-previous-posts-navigation-with-thumbnails/#.YJiinZDiuHs文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

https://www.google.com.hk/search?q=Next+%26+Previous+Post+Titles+With+Thumbnails&newwindow=1&safe=strict&hl=zh-CN&ei=76CYYNXMH6CEr7wPqoev8Ak&oq=Next+%26+Previous+Post+Titles+With+Thumbnails&gs_lcp=Cgdnd3Mtd2l6EANQ5oEbWOaBG2DliBtoAHAAeACAAe4CiAHjBJIBBTItMS4xmAEAoAECoAEBqgEHZ3dzLXdpesABAQ&sclient=gws-wiz&ved=0ahUKEwiVgLvtjr7wAhUgwosBHarDC54Q4dUDCA4&uact=5文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html

文章源自知更鸟-https://zmingcx.com/add-thumbnails-for-wordpress-links.html
weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
WordPress 主题添加鼠标跟随特效 WordPress

WordPress 主题添加鼠标跟随特效

2022年第一篇文章,分享个鼠标跟随特效,给喜欢花花草草的朋友们。这个鼠标跟随特效还是很酷,不是那种鼠标后面跟随一大堆零零碎碎的,仅一个圆圈跟随鼠标指针,当遇到超链接圆圈会变成半透明的背景,国外网站常...
采用AJAX方式将文章移到回收站中 WordPress

采用AJAX方式将文章移到回收站中

在WordPress 后台文章列表中,可以单独将某篇文章移动到回收站中,但移动后页面会刷新一次,可通过下面的代码实现无刷新将文章移动到回收站中。 采用AJAX方式将文章移到回收站中 第一步,在当前主题...
为 WordPress 添加自定义批量操作 WordPress

为 WordPress 添加自定义批量操作

默认 WordPress 后台文章批量操作中,只有编辑和移动到回收站,可以按文本方法添加自定义批量操作选项,例如添加批量将文章改为草稿和自动为选中的文章添加自定义字段和值。 为 WordPress 添...
如何重复使用已设置好的 WordPress 小工具 Plugins

如何重复使用已设置好的 WordPress 小工具

默认情况下WordPress小工具可以重复添加到不同的位置,但已添加设置好的小工具,不能直接拖放到其它位置重复使用。比如我的begin主题集成40多个小工具,每个小工具都有丰富的设置选项,想在不同的位...
匿名

发表评论

匿名网友

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

确定