其实这篇文章,完全还是拿出来凑数的。不过这篇文章还是有需求的哦。比如说今天中午小孙童鞋就问起了上一篇、下一篇这个问题,这让正在纠结着没有文章可写的我终于灵光一现啊。

其实上一篇、下一篇这个功能最平常不过了,高手们闭着眼睛代码就码出来了。但是我们这些刚刚熟悉wp的小白们却有时候要走很多弯路的。之所以分享出来是因为我觉得这几行代码有一个小小的亮点就是可以判断第一篇和最后一篇。直接上代码:

<!-- Navigation begin -->
<div>
<div>
<?php if (get_next_post()) { next_post_link('&laquo; %link');}
else {echo "已经是最新文章";}
?>
</div>
<div>
<?php if (get_previous_post()) { previous_post_link('%link &raquo;');}
else {echo "已经是最后文章";}
?>
</div>
</div>
<!-- Navigation end -->

然后再用CSS美化一下,对于我这个CSS小白,能凑出这个让我满意的css还是比较不简单的(自夸了,嘿嘿)~以下CSS基本可以通用了,除非就是换换颜色什么的,可以尽情的ctrl+c:

.postnavi{height:24px; padding:0px; margin:5px 0px 0px 0px; line-height:24px; position:relative; padding-bottom:0px;background-color:#eef2fa; border:1px solid #d8e3e8; color:#111; padding:0 5px; -moz-border-radius:2px; -webkit-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;}
.postnavi .alignleft {
position:absolute;
left:5px;
}
.postnavi .alignright {
position:absolute;
right:5px;
}

上边的核心代码当然不是我敲的,从QiQiBoY那里看到的,想了解原文的可以去他那里看看。

接写来说说分享按钮,首先看看效果图(也可以用插件实现,插件不再讨论范围):

WP添加上一篇、下一篇链接和分享按钮

代码分三步走:

1、html:

<div id="share">
Share on:
<a rel="nofollow" id="facebook-share" title="Facebook">Facebook</a>
<a rel="nofollow" id="twitter-share" title="Twitter">Twitter</a>
<a rel="nofollow" id="delicious-share" title="Delicious">Delicious</a>
<a rel="nofollow" id="kaixin001-share" title="开心网">开心网</a>
<a rel="nofollow" id="renren-share" title="人人网">人人网</a>
<a rel="nofollow" id="douban-share" title="豆瓣">豆瓣</a>
<a rel="nofollow" id="sina-share" title="新浪微博">新浪微博</a>
<a rel="nofollow" id="netease-share" title="网易微博">网易微博</a>
<a rel="nofollow" id="tencent-share" title="腾讯微博">腾讯微博</a>
</div>

2、CSS(可根据自己需要稍作修改)

#share,#share a{line-height:16px}
#share a{display:inline-block;width:16px;height:16px;text-indent:-999em;cursor:pointer;margin-left:5px;background:url(http://photo.tuhigh.com/pics/1044/1024/187252t1287897845550_o.png) no-repeat}
#share a#facebook-share{background-position:0 0}
#share a#twitter-share{background-position:0 -16px}
#share a#delicious-share{background-position:0 -32px}
#share a#kaixin001-share{background-position:0 -48px}
#share a#renren-share{background-position:0 -64px}
#share a#douban-share{background-position:0 -80px}
#share a#sina-share{background-position:0 -96px}
#share a#netease-share{background-position:0 -112px}
#share a#tencent-share{background-position:0 -128px}

3、Javascrept OR JQuery

代码太长,就不粘贴了,你可以直接下载:js_share.js jq_share.js

JS和JQ任选其一即可

以上代码出自大名鼎鼎neoease,也许你不认识他,但是他的主题你肯定见过的,嘿嘿。原文链接:http://www.neoease.com/add-share-buttons/

如果有问题大家可以踊跃发言,一起探讨哦!

对了,今天对于站长来说是个比较重要的日子。由康盛公司(Comsenz)和落伍者(im286.com)联合主办的2011第六届站长年会在京举行,大家可以通过腾讯网直击现场,同时也可以通过腾讯微博互动。顺便打个小广告,玩腾讯微博的朋友可以关注奚少哦,有Follow必回。http://t.qq.com/xishao。我的博客更新等也是同步到腾讯微博的,同时平时我也喜欢在上边刷刷屏什么的,大家多多交流哈!

30,174
更新日期: 2011-05-21
文章标签: ,
文章链接: http://www.xishao.net/wp/651.html
站方声明: 除特别标注, 本站所有文章均为原创, 互联分享, 尊重版权, 转载请注明.