为文章页面加入上下篇文章链接的功能
作者: 葛屹肃 | 日期: 2018-10-18 | 分类: 个人杂谈
葛一速网站建立已经大半年时间,前段时间看文章页面时突然发现没有上下篇链接的功能,只怪自己平常没有注意细节了。众所周知WordPress基本上所有模板都支持这个功能的,我是使用第三方免费模板,因为免费所以没有了售后服务,只能自己动手吧。
首先,查看了源代码,发现其实是上下篇文章链接功能的,不过,似乎多了点无用链接(红色字体部分):
<?php
$prev_post = get_previous_post();//与当前文章同分类的上一篇文章
$next_post = get_next_post();//与当前文章同分类的下一篇文章
?>
<?php if (!empty( $prev_post )): ?>
<a href=”<?php echo get_permalink( $prev_post->ID ); ?>” title=”<?php echo $prev_post->post_title; ?>”></a>
<?php endif; ?>
<?php if (!empty( $next_post )): ?>
<a href=”<?php echo get_permalink( $next_post->ID ); ?>” title=”<?php echo $next_post->post_title; ?>”></a>
<?php endif; ?>
<div id=”postnavi”>
<span><?php if (get_previous_post()) { previous_post_link(‘上一篇: %link’);} else {echo “没有了,已经是最后文章”;} ?></span>
<span><?php if (get_next_post()) { next_post_link(‘下一篇: %link’);} else {echo “没有了,已经是最新文章”;} ?></span>
<div></div>
</div>
然后再看了css代码,发现是因为该DIV设为了不显示,如下红色代码:
#postnavi{height:30px;margin:10px 10px 0px 0px;overflow:hidden;border-bottom:1px #ddd solid;padding-bottom:5px;color:#F00;display:none;}
只要有该功能就好办,去掉多余代码,然后将css的DIV去掉display:none即可,以下是修改前后的对照图:
修改前:
修改后:
修改后的代码更加简洁了:
<?php
$prev_post = get_previous_post();//与当前文章同分类的上一篇文章
$next_post = get_next_post();//与当前文章同分类的下一篇文章
?>
<div id=”postnavi”><span><?php if (get_previous_post()) { previous_post_link(‘上一篇: %link’);} else {echo “没有了,已经是最后文章”;} ?></span><span><?php if (get_next_post()) { next_post_link(‘下一篇: %link’);} else {echo “没有了,已经是最新文章”;} ?></span><div></div></div>#postnavi{height:30px;margin:10px 10px 0px 0px;overflow:hidden;border-bottom:1px #ddd solid;padding-bottom:5px;color:#F00;}
虽然这次修改代码不多,但让博客更加顺眼了,从SEO角度内链也增加了,每次更改代码都会有点成就感,感觉博客更好完美了。另外,今天还发现所有tag的链接访问不了,过两天有时间一定要将这个问题解决。
文章链接:https://www.geyisu.com/391.html
感谢博主哦