温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

纯代码制作wordpress上下篇,分类上下篇

发布时间:2020-07-09 16:51:06 来源:网络 阅读:308 作者:Gendan5 栏目:开发技术

对于一个网站来说,文章上下篇是必不可少的,wordpress自带的上下篇对于SEO优化不是很友好,上下篇的链接并没有title属性的存在。

所以这两天一直在看各种wordpress的上下篇的函数,期间也看了很多的案例,但是都没有能找到能满足我的要求的。

经过一晚上的研究,出了一套可用的wordpress上下篇的代码,考虑到第一篇和最后一篇对浏览者的友好度,添加了《已经是最后一篇》和《已经是第一篇了》的提示。

上下篇使用了最直接的布局,外面只有一个div标签来抱起来,里面是直接输出了a链接。

1、php代码如下

<!--上下篇开始-->
<div class="shangxia">
<?php
$current_category=get_the_category();
$prev_post = get_previous_post($current_category,'');
$next_post = get_next_post($current_category,'');
?>
<?php if (!empty( $prev_post )): ?>
<a href="<?php echo get_permalink( $prev_post->ID ); ?>" title="上一篇:<?php echo $prev_post->post_title; ?>">上一篇:<?php echo $prev_post->post_title; ?></a>
<?php else : ?>
<a 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; ?>">下一篇:<?php echo $next_post->post_title; ?></a>(gendan5.com)
<?php else : ?>
<a title="已经是最后一篇了">已经是最后一篇了</a>
<?php endif; ?>
</div>
<!--上下篇结束-->
2、CSS样式如下

.shangxia a {
width: 50%;
color: #fff;
float: left;
box-sizing: border-box;
padding: 0 10px;
display: block;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.shangxia a[href]:hover {
color: #fff;
background: #000;
}
.shangxia a:nth-child(2) {
text-align: right;
}
3、输出代码如下,a链接上有title

<div class="shangxia">
<a href="http://cenggel.com/jishu/19.html" title="上一篇:wordpress安装失败怎么办?">上一篇:wordpress安装失败怎么办?</a>
<a title="已经是最后一篇了">已经是最后一篇了</a>银行代码http://www.gendan5.com/swiftcode.html

</div>
4、wordpress分类目录上下篇、页面截图

4、这样你就可以使用wordpress的上下篇了,如果你想在很多个页面使用wordpress上下篇的话,可以放在单独的.php文件中,在详情页中引入进去也是可以的。引入代码如下:

<?php require('shangxia.php');?>
shangxia.php是你放wordpress上下篇的文件,可以按照你的文件命名来改变。

本wordpress上下篇的代码主要是用在同一个分类目录下文章中使用的。

现在你可以愉快的使用wordpress分类目录上下篇了。

代码还有很多的不足,如果您有更好的实现方法,还请指点。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI