陈德馨

WordPress 添加文章分页按钮的实现方法

626人参与 |分类: 站长百科|时间:2013年08月29日 15:25

现在,什么网站都讲究一个体验,对于博客,阅读体验就是最重要的优化了。首先明确概念,什么叫阅读体验。顾名思义,即阅读者对文章或网页内容的主观感受。我相信很多人都有写长博客可能性(定义为大于 1000 字吧),1000字,在电脑屏幕上显示的确没什么问题,但在手机上却不是这样。多数人用的 WordPress 主题都是响应式(自适应屏幕尺寸)的,由于手机屏幕宽度较小,要显示 1000 字内容,那么网页将变得非常长。如果你写了一篇 5000 字的博文,你将会发现,根本很难阅读到底部。这会引起非常不好阅读体验。

下面介绍通过激活系统内建的文章分页功能解决这个问题,增强阅读体验。你没看错,是的 ,WordPress 本身就有这个功能,只是未被开启罢了。

第一步,最重要的一点,无论如何,都不要随便修改系统或主题内容,除非它们确实缺少你需要的功能。所以先检查下你的博客编辑器中是否已经激活了这个功能。如果已经激活,那么就会有下图所示的“分页按钮”:

paging.png

如果有,你是幸运的,捡了便宜。如果没有,正才是本文的重点。

第二部,打开你主题的 functions.php 文件,在最后一个结束标签(?>)之前添加以下代码,就可以激活这个功能。

//编辑器添加分页按钮
function wpdaxue_add_next_page_button($mce_buttons) {
$pos = array_search('wp_more',$mce_buttons,true);
if ($pos !== false) {
$tmp_buttons = array_slice($mce_buttons, 0, $pos+1);
$tmp_buttons[] = 'wp_page';
$mce_buttons = array_merge($tmp_buttons, array_slice($mce_buttons, $pos+1));
}
return $mce_buttons;
}
add_filter('mce_buttons','wpdaxue_add_next_page_button');

第三步,当添加上述代码时虽然已经激活分页功能了,但是这个分页还是没能在文章页起作用,我们需要再修改一下文章页的显示。打开主题的 single.php 文件,在 <?php the_content(); ?> 的下一行添加下面的代码:

<?php
if ( $numpages > '1' ) {
wp_link_pages('before=<div class="pagination">&after=&next_or_number=next&previouspagelink=上一页&nextpagelink=&nbsp');
wp_link_pages('before=<span class="wp-pagenavi">&after=</span>&next_or_number=number');
echo "&nbsp;";
wp_link_pages('before=&after=</div>&next_or_number=next&previouspagelink=&nbsp&nextpagelink=下一页');
}
?>

现在的实现效果就如本站一样了,当然,你不要照抄笔者的样式设计,闭着的 style.css 文件中有 .pagination,不同的主题可能不同,你可以自行修改称你主题的分页样式。

到此编辑器就已经支持分页按钮了,其用法和 more 标签是一样的,但效果不同,more 标签是用来实现首页摘要功能的,而“分页按钮”是在文章页中实现分页功能的,并且支持分成多页(设置多个分页标签)。以下是实现效果:

这一页中就没有什么好说的了,只是想要消除一下站长朋友对这种分页方法是否会影响搜索引擎抓取等,答案是不的。搜索引擎只抓取文章的第一页,第二页是没有记录录的,因为你的 sitemap.xml 并没有文章分页的内容。

来源:陈德馨博客(微信/QQ号:35435164),转载请保留出处和链接!

地址:

必填

选填

选填

◎已有 0 人评论,请发表您的观点。