分类： Wordpress

当Wordpress网页显示的内容增多时，如果继续使用鼠标滚动来返回顶部导航的话将会是件很麻烦的事情。很多时候我们需要滚好几下才能到达顶部。于是像QQ空间、Discuz论坛等都出现了返回顶部的按钮。这些按钮的实现方式也不尽相同。直接使用html实现是件很简单的事情。但是效果不够优美（点击完会马上跳到顶部）。所以博主找了一种用js实现的比较好的方法。

Step1 

下载js文件并上传至主题目录下。点击下载

Step2

编辑主题中的foot.php文件。在底部添加：

<script src=”<?php bloginfo(‘stylesheet_directory’); ?>/gototop.js” type=”text/javascript” charset=”utf-8″></script>
<div id=”scroll”><a href=”javascript:void(0)” onclick=”goto_top()” title=”返回顶部”>TOP</a></div>

注：可将<?php bloginfo(‘stylesheet_directory’); ?>/gototop.js 改为gototop.js的绝对地址。

Step3

打开主题样式表，复制下列代码插入。保存。

/*返回顶部*/
#scroll {display:block; width:30px; margin-right:-520px;
position:fixed;
right:50%;
top:90%;
_margin-right:-507px;
_position:absolute;
_margin-top:30px;
_top:expression(eval(document.documentElement.scrollTop));
}
#scroll a {
display:block;
float:right;
padding:9px 5px;
cursor: pointer;
background-color:#444;
color:#fff;
border-radius:5px;
text-decoration: none;
font-weight:bold;
}
#scroll a:hover {
background-color:#333;
color:#669900;
text-decoration: none;
font-weight:bold;
}

搞定！！！参考样式：http://www.wildhorde.com

提示：适当修改CSS样式即可拥有你喜欢的返回顶部按钮。圆角不支持IE9以下的IE浏览器。

对于比较重视SEO的朋友来说自带的评论功能已经不能满足要求。评论多的话有可能分散权重。虽然自带的评论功能中在评论者的网站连接中加入了 rel=’external nofollow’ 【.nofollow和external nofollow标签说明：(1)、将”nofollow”写在网页上的meta标签上，用来告诉搜索引擎不要抓取网页上的所有外部链接。(2)、将”nofollow”放在超链接中，告诉搜索引擎不要抓取特定的链接。而rel=’external nofollow’只是更相对于rel=’nofollow’参数更加规范一些。】具体有没有效果不得而知。所以高手们又写出一种更好的解决方法——给连接进行重定向。

打开主题文件functions.php添加下面的代码后，同时实现评论作者链接地址重定向和在新窗口打开两个功能，这样就不会受wordpress版本更新的影响了。

//访客链接新窗口打开
function comment_author_link_window()
{
global $comment;
$url = get_comment_author_url();
$author = get_comment_author();
$home = get_option(‘home’);
if ( empty( $url ) || ‘http://’ == $url )
$return = $author;
else
$return = “<a href=’$home?link=$url’ rel=’external nofollow’ target=’_blank’>$author</a>”;
return $return;
}
add_filter(‘get_comment_author_link’, ‘comment_author_link_window’);
//开启评论链接地址重写
function redirect_comment_link()
{
$redirect = $_GET[‘url’];
if($redirect){
if(strpos($_SERVER[‘HTTP_REFERER’],get_option(‘home’)) !== false){
header(“Location: $redirect”);
exit;
} else {
header(“Location:”.get_option(‘home’));
exit;
}
}
}
add_action(‘init’, ‘redirect_comment_link’);

注意事项：添加这些代码之前，检查一下自己的主题中是否自带了评论链接新窗口打开的代码，如果有的话，需要先去掉原来的那个，不然的话可能会报错。

WordPress自带的分页样式并不是很好看。也可以说压根就没有什么分页。过多的使用插件的话会导致网站的速度明显变慢。于是乎，尽量不使用插件成了博主我的一大爱好。下面将下面的代码插入到functions.php模板的第一个<?php后即可实现无插件实现分页的效果。

function kriesi_pagination($query_string){
global $posts_per_page, $paged;
$my_query = new WP_Query($query_string .”&posts_per_page=-1″);
$total_posts = $my_query->post_count;
if(empty($paged))$paged = 1;
$prev = $paged – 1;
$next = $paged + 1;
$range = 2; // only edit this if you want to show more page-links
$showitems = ($range * 2)+1;

$pages = ceil($total_posts/$posts_per_page);
if(1 != $pages){
echo “<div class=’pagination’>”;
echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? “<a href='”.get_pagenum_link(1).”‘>最前</a>”:””;
echo ($paged > 1 && $showitems < $pages)? “<a href='”.get_pagenum_link($prev).”‘>上一页</a>”:””;

for ($i=1; $i <= $pages; $i++){
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
echo ($paged == $i)? “<span class=’current’>”.$i.”</span>”:”<a href='”.get_pagenum_link($i).”‘ class=’inactive’ >”.$i.”</a>”;
}
}

echo ($paged < $pages && $showitems < $pages) ? “<a href='”.get_pagenum_link($next).”‘>下一页</a>” :””;
echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? “<a href='”.get_pagenum_link($pages).”‘>最后</a>”:””;
echo “</div>\n”;
}
}

用下面代码代替自带的分页代码

<?php kriesi_pagination($query_string); ?>

在模板的样式表出插入翻页代码的样式：

.pagination{
line-height:23px;
}
.pagination span, .pagination a{
font-size:12px;
margin: 2px 6px 2px 0;
background:#fff;
border:1px solid #e5e5e5;
color:#787878;
padding:2px 5px 2px 5px;
text-decoration:none;
}
.pagination a:hover{
background: #669900;
border:1px solid #8d8d8d;
color:#fff;
}
.pagination .current{
background: #fff;
border:1px solid #8d8d8d;
color:#393939;
font-size:12px;
padding:2px 5px 2px 5px;
}

效果参见：http://www.wildhorde.com