wordpress怎么实现文章分页

redmaomail 2024-07-24 23:03 阅读数 81 #wordpress

wordpress怎么实现文章分页？

由于篇幅过长导致页面加载速度过慢,降低用户体验,所以必须要找个方法把长文章进行分页,搜索了一下，发现有个代码解决的方法非常好。经过亲自使用，确实有效，所以在这里分享出来,感兴趣的你可不要错过了哈

最近发现有不少文章配上图片，写得比较长。这样会导致页面加载速度过慢，不利于用户体验。尤其是新添加的 wordpress主题页面，虽然文字不多，可是每一款wordpress主题都要配上个小图片，才能让读者有个大概的了解。从而决定是否要进行演示。那么将近三十款wordpress主题加在一起，页面就非常的长。所以必须要找个方法把长文章进行分页。

在谷歌上搜索了一下，发现有个代码解决的方法非常好。经过亲自使用，确实有效，所以在这里分享出来。

一、添加分页按钮

如果你不怕麻烦的话，可以在写文章的时候，切换到HTML模式，插入下面这行代码，就不需要添加这个分页按钮了。

代码如下:

<p><!--nextpage--></p>

登录后复制

其实还是在编辑器上添加个分页按钮省事多了。以前也看到过通过修改代码来实在这个功能，不过我忘了。因为我一直用 wordpress编辑器增强插件：TinyMCE Advanced 。这个按钮早就有了，这里也不多说了。

2012-06-17补充：给 WordPress 3.4 文本编辑器添加分页按钮

由于我的 “非诚勿扰女嘉宾资料” fc.guansoft.com 网站也用了这篇文章中介绍的长文章分页代码。但那个站没有安装 TinyMCE Advanced 插件。所以还是上网找了个比较简单的方法在wordpress编辑器中添加这个分页按钮。方法如下：

找到 /wp-includes/class-wp-editor.php 文件。查找 ‘wp_more’, 标签：（在366行处）

代码如下:

$mce_buttons = apply_filters(&#39;mce_buttons&#39;, array(&#39;bold&#39;, &#39;italic&#39;, &#39;strikethrough&#39;, &#39;¦&#39;, &#39;bullist&#39;, &#39;numlist&#39;, &#39;blockquote&#39;, &#39;¦&#39;, &#39;justifyleft&#39;, &#39;justifycenter&#39;, &#39;justifyright&#39;, &#39;¦&#39;, &#39;link&#39;, &#39;unlink&#39;, <SPAN style="TEXT-DECORATION: underline"><STRONG><SPAN style="COLOR: #ff0000; TEXT-DECORATION: underline">&#39;wp_more&#39;,</SPAN></STRONG></SPAN> &#39;¦&#39;, &#39;spellchecker&#39;, &#39;fullscreen&#39;, &#39;wp_adv&#39; ), $editor_id);

登录后复制

在 ‘wp_more’ 后添加 ‘wp_page’, （含单引号和逗号）。修改后代码如下：

代码如下:

$mce_buttons = apply_filters(&#39;mce_buttons&#39;, array(&#39;bold&#39;, &#39;italic&#39;, &#39;strikethrough&#39;, &#39;¦&#39;, &#39;bullist&#39;, &#39;numlist&#39;, &#39;blockquote&#39;, &#39;¦&#39;, &#39;justifyleft&#39;, &#39;justifycenter&#39;, &#39;justifyright&#39;, &#39;¦&#39;, &#39;link&#39;, &#39;unlink&#39;, <SPAN style="TEXT-DECORATION: underline"><STRONG><SPAN style="COLOR: #ff0000; TEXT-DECORATION: underline">&#39;wp_more&#39;,&#39;wp_page&#39;,</SPAN></STRONG></SPAN> &#39;¦&#39;, &#39;spellchecker&#39;, &#39;fullscreen&#39;, &#39;wp_adv&#39; ), $editor_id);

登录后复制

此时，你就可以在后台写文章及编辑文章页面的文本编辑器上看到一个跟 more 标签按钮相似的图标。

同样，在代码编辑器也会相应出现一个 nextpage 按钮。

二、添加分页功能

wordpress其实自带分页功能的函数，只是没有被调用。所以我们在编辑文章的时候，明明插入了分页符，却看不到什么变化。要怎么样才能让调用这个函数呢？方法很简单，在主题模板文件 single.php 中找到类似下面这行代码。

代码如下:

<?php the_content(); ?>

登录后复制

在这行代码后面添加如下所示的代码，即可实现简单的分页功能。

代码如下:

<?php wp_link_pages(); ?>

登录后复制

三、美化分页效果

虽然经过上面两步，已经可以实现长文章的分页功能了。但是不是那么好看，下面我们就把它美化一下，让分页效果更完美。

首先，把上一步的分页功能代码替换为以下代码。

代码如下:

<?php wp_link_pages(array(&#39;before&#39; => &#39;<div class="fenye">分页阅读：&#39;, &#39;after&#39; => &#39;&#39;, &#39;next_or_number&#39; => &#39;next&#39;, &#39;previouspagelink&#39; => &#39;上一页&#39;, &#39;nextpagelink&#39; => "")); ?> <?php wp_link_pages(array(&#39;before&#39; => &#39;&#39;, &#39;after&#39; => &#39;&#39;, &#39;next_or_number&#39; => &#39;number&#39;, &#39;link_before&#39; =>&#39;<span>&#39;, &#39;link_after&#39;=>&#39;</span>&#39;)); ?> <?php wp_link_pages(array(&#39;before&#39; => &#39;&#39;, &#39;after&#39; => &#39;</div>&#39;, &#39;next_or_number&#39; => &#39;next&#39;, &#39;previouspagelink&#39; => &#39;&#39;, &#39;nextpagelink&#39; => "下一页")); ?>

登录后复制

接着，再对CSS样式进行美化。

直接把下面这些代码，放到主题文件 style.css 最后面。

代码如下:

/**页面分页**/ 
.fenye{text-align:center;margin:0px auto 10px;font-weight:bold} 
.fenye span{background-color:#DDDDDD;color:#fff;font-weight: bold;margin:0px 1px;padding:1px 6px;display:inline-block;text-decoration:none;border:1px solid #e0e0e0;} 
.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:#DDDDDD;color: #fff;}

登录后复制

最后显示效果如下图所示：

四、解决文章分页后标题重复对SEO的影响

由于长文章分页后，这几个页面的标题是一样的。会不会对SEO带来不利的影响，我也不清楚。还是避免一下吧！可以通过给 wordpress 文章分页添加页码，解决标题重复的问题。我们可以把改成如下所示的效果：

简单实用的wordpress长文章分页代码 —冠朔wordpress插件

简单实用的wordpress长文章分页代码-第2页 — 冠朔wordpress插件

简单实用的wordpress长文章分页代码-第3页 — 冠朔wordpress插件

在主题模板文件 header.php 找到类似 …… 代码，将其替换为如下代码。

代码如下:

<?php if ( is_single() ) { ?><title><?php echo trim(wp_title(&#39;&#39;,0)); ?><?php if (get_query_var(&#39;page&#39;)) { echo &#39;-第&#39;; echo get_query_var(&#39;page&#39;); echo &#39;页&#39;;}?> — <?php bloginfo(&#39;name&#39;); ?></title><?php } ?>

登录后复制

五、避免Feed被分页

实现分页功能后，会导致Feed页面的文章被分页，一般只显示第一页的内容。

解决方法：打开 wp-includes 目录下的 query.php 文件，找到下面这行代码(大概在3578行)

代码如下:

if ( strpos( $content,&#39;<!–nextpage–>&#39; ) ) {

登录后复制

把它修改为下面这行代码。

代码如下:

if ( strpos( $content, &#39;<!--nextpage-->&#39; ) && (!is_feed()) ) {

登录后复制

更多WordPress相关技术文章，请访问WordPress教程栏目：https://www.redmaomail.com/ask/category-10.html

以上就是wordpress怎么实现文章分页的详细内容，更多请关注红帽云邮其它相关文章！

分享到：

上一篇：如何禁止WordPress自动更新邮件通知下一篇：wordpress怎么获取某个栏目链接地址