WordPress文章分页的方法和样式美化

如果你的wordpress文章如果太长的话,一个是影响阅读,另外一个是影响网页载入速度,特别是对于那种很多图片的网页,更是有分页的必要,WordPress长篇文章分页的方法及样式美化是来自网络上众多不同日志分页方法的整合,力求使长文章的分页做到完美。接下来教大家如何添加文章分页即Nextpage代码的方法。

一般情况下大家都是采用 WordPress 标签 <!–nextpage–> 来对文章内容进行分页的,<!–nextpage–> 使用方法和 <!–more–> 差不多,不过 <!–more–> 只能使用一次, <!–nextpage–> 可以使用多次.只要在每个需要进行分页的地方插入 <!–nextpage–> ,就可以将文章分为多页.如果你在文章中已经添加了 <!–nextpage–> 却没有显示出分页来,那么你就需要在相关的模板文件中加入一个函数。请注意,本文代码中的《WordPress文章分页的方法和样式美化》,可能会误显示为<!–nextpage–>,如出现此错误请自行修改代码。

添加模块支持:

找到你当前主题的index.phpsingle.php(如果有的话)等文件,查找:

<?php the_content(); ?>   

然后在后面加上:

<?php wp_link_pages(); ?> 

保存之后退出。

当你在写新文章时,切换到HTML模式下,在你需要分页的地方添加nextpage标签:

<!--nextpage-->

那么就可以实现分页效果了,nextpage标签跟more标签用法是一样的,只不过nextpage标签可以使用多次,以实现对长文章的多次分页。

默认情况下的分页效果见下图,

分页链接显示为"page 1 page 2 page 3"的日志分页代码

<?php wp_link_pages('before=<p>&after=</p>&next_or_number=number&pagelink=page %'); ?> 

是不是觉得以上两种效果太简单了?那你可以自己设计div内分页链接的样式,需要你自己来写css了

<?php wp_link_pages('before=<div id="page-links">&after=</div>'); ?> 

如果你想增加如"上一页""下一页"等一些选项,那就需要对 wp_link_pages 进行修改了。这是"上一页""下一页"在一块的效果

<?php wp_link_pages('link_before=<span class="single-navi">&link_after=</span>&before=<div id="single-navi">

<div class="wp-pagenavi"><p><span class="pages">页面:</span>&after=&next_or_number=number'); ?> <?php wp_link_pages('before=&after=</p>

<div class="fixed"></div></div></div>& next_or_number=next&previouspagelink=上一页&nextpagelink=下一页'); ?> 

其中的css样式表就由你自己来DIY。

 

这又是另外一种日志分页效果:,代码见下面

<?php wp_link_pages('before=&after=&next_or_number=next&previouspagelink=上一页&nextpagelink= ');

wp_link_pages('before=&after=&next_or_number=number'); echo " ";

wp_link_pages('before=&after=&next_or_number=next&previouspagelink= &nextpagelink=下一页'); ?>  

 

上面的效果还可以用下面这段代码实现:

<?php wp_link_pages(array('before' => '<div class="Pages">>文章分页:', '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' => "下一页")); ?>  

 

这面是本人正在使用的代码,来自网络,共享给诸位wp博主们

<?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样式表:

.fenye{text-align:center;margin:0px auto 10px;}  

.fenye span{background-color:#C73503;color:#fff;font-weight: bold;

margin:0px 1px;padding:3px 6px;text-decoration:none;border:1px solid #D2D2D2;}  

.fenye a{text-decoration:none;}  

.fenye a span{background-color:#F6F6E8;font-weight: normal;

color: #000;text-decoration: none;}  

.fenye a:hover span{background-color:#c73503;color: #fff;}  

 


打开WordPress编辑器的nextpage标签的方法:

WordPress编辑器分为代码编辑器和可视化编辑器,打开源代码编辑器中nextpage标签的办法是:

 

打开wp-includesjs目录下的quicktags.dev.js文件,找到以下代码:

/*

edButtons[edButtons.length] =

new edButton('ed_next'

,'page'

,'<!--nextpage-->'

,''

,'p'

,-1

);

*/

把这段代码第一行和第十行的注释代码/*和*/删除掉,保存并上传覆盖原文件。

打开可视化编辑器中nextpage标签的办法是从网上看到的,不过我在post.php文件中却没有找下需要修改的这段代码,也懒得试了,这里发出来,希望对有这个需要的朋友有所帮助。

打开wp-adminincludes目录下的post.php文件,添加’wp_page’到以下代码段中(红字是添加的代码):

$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', '|', 'bullist', 'numlist', 'blockquote', '|', 'justifyleft', 'justifycenter', 'justifyright', '|', 'link', 'unlink', 'wp_more',

'wp_page', '|', 'spellchecker', 'fullscreen', 'wp_adv' )); 

避免feed被分页

打开分页功能后,会导致feed里的日志也被分页。解决办法是:

找到wp-includes目录下的query.php,修改如下(红字是添加的代码):

if ( strpos( $content, <!--nextpage--> ’ ) && (!is_feed() )) { 

保存并上传覆盖原文件即可。

本文原地址:http://www.gaoxing.me/2011/nextpage/

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注