外贸营销

对于一个网站来说，文章上下篇是必不可少的，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><?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>