当前位置:首页 > 个人杂谈 > 正文内容

为文章页面加入上下篇文章链接的功能

2018-10-18 | 分类:个人杂谈 | 评论:2人 | 浏览:171次

葛一速网站建立已经大半年时间,前段时间看文章页面时突然发现没有上下篇链接的功能,只怪自己平常没有注意细节了。众所周知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的链接访问不了,过两天有时间一定要将这个问题解决。

文章由葛一速博客原创,转载请注明出处:http://www.geyisu.com/391.html

  • 评论:(2)

已有 2 位网友发表了一针见血的评论,你还等什么?

◎欢迎大家参与讨论
  1. Post:2018/10/25 21:36:50

    感谢博主哦

站内搜索