对于一个网站来说,文章上下篇是必不可少的,wordpress自带的上下篇对于SEO优化不是很友好,上下篇的链接并没有title属性的存在。所以这两天一直在看各种wordpress的上下篇的函数,期间也看了很多的案例,但是都没有能找到能满足我的要求的。经过一晚上的研究,出了一套可用的wordpress上下篇的代码,考虑到…

对于一个网站来说,文章上下篇是必不可少的,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%20echo%20get_permalink(%20$prev_post->ID%20);%20?>" 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%20echo%20get_permalink(%20$next_post->ID%20);%20?>" title="下一篇:<?php echo $next_post->post_title; ?>">下一篇:<?php echo $next_post->post_title; ?></a><?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="#" title="上一篇:wordpress安装失败怎么办?">上一篇:wordpress安装失败怎么办?</a>  <a title="已经是最后一篇了">已经是最后一篇了</a></div>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。