对于一个网站来说,文章上下篇是必不可少的,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>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)