无插件实现wordpress分页,兼顾SEO和Feed
好玩吧好多文章都很长考虑过分页,但是用插件又回拖慢本来就很慢的网速,前几天在网上看到一篇文章,无插件内容页分页,亲测成功,分享一下经验。
当然,实现长文章分页可以通过插件 WP-PageNavi 来实现,但插件装多了同样会影响页面的加载速度,如果你没有装什么插件,那么方便安全起见,你可以试试插件,但是像好玩吧一样已经装了N个插件的朋友,还是能少用插件还是少用一下吧。
一、添加分页代码及按钮
如果你不怕麻烦的话,可以在写文章的时候,切换到HTML模式,插入下面这行代码,就不需要添加这个分页按钮了。
<p><!–nextpage–></p>
PS.无论带不带p参数都是可以的,你可以直接写成:
<!–nextpage–>
二、在主题single.php页面添加分页功能标签
wordpress其实自带分页功能的函数,只是没有被调用。所以我们在编辑文章的时候,明明插入了分页符,却看不到什么变化。要怎么样才能让调用这个函数呢?方法很简单,在主题模板文件 single.php 中找到类似下面这行代码。
<?php the_content(); ?>
在这行代码后面添加如下所示的代码,即可实现简单的分页功能。
<?php wp_link_pages(); ?>
其实很多主题都会带有这串代码的,仔细检查搜索下。
三、美化分页美化效果
经过上面两步,已经可以实现长文章的分页功能了。但是不是那么好看,下面我们就把它美化一下,让分页效果更完美。
首先,把上一步的分页功能代码 替换为以下代码。
<?php wp_link_pages(array('before' => '<div class="fenye">分页阅读:', 'after' => '', 'next_or_number' => 'next', 'previouspagelink' => '上一页', 'nextpagelink' => "")); ?> <?php wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'number', 'link_before' =>'<span>', 'link_after'=>'</span>')); ?> <?php wp_link_pages(array('before' => '', 'after' => '</div>', 'next_or_number' => 'next', 'previouspagelink' => '', 'nextpagelink' => "下一页")); ?>
接着,再对CSS样式进行美化。
直接把下面这些代码,放到主题文件 style.css 最后面可以适当修改风格。
/**页面分页**/
.fenye{text-align:center;margin:10px auto 10px;font-weight:bold; font-size:14px;}
.fenye span{background-color:#DDDDDD;color:#fff;font-weight: bold; margin:3px; padding:2px 6px;display:inline-block;text-decoration:none;border:1px solid #e0e0e0;}
.fenye a{text-decoration:none;}
.fenye a:hover { text-decoration:underline;}
.fenye a span{background-color:#F6F6E8;font-weight: normal;color: #000;text-decoration: none; }
.fenye a:hover span{background-color:#DDDDDD;color: #fff;}