wordpress 單頁面添加分頁功能

找到你当前主题的content-single.php文件,查找:
<?php the_content(); ?>   
然后在后面加上:
<?php wp_link_pages(); ?> 
保存之后退出。
当你在写新文章时,切换到HTML模式下,在你需要分页的地方添加nextpage标签:
<!--nextpage-->
那么就可以实现分页效果了,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;}  

Post a Comment

0 Comments