海阔天空

当前时间为:
欢迎大家来到海阔天空https://www.9713job.com,广告合作以及淘宝商家推广请微信联系15357240395

wp教程:纯代码为WordPress添加文章分页功能

未分类
2020-02-13 11:34:48
1822677238@qq.com

手机扫码查看

wp教程:纯代码为WordPress添加文章分页功能

wp获取文章内容<?php the_content(); ?>

分页代码<?php wp_link_pages(); ?>

在系统编辑器增加分页符功能

在网站根目录找到 /wp-includes/class-wp-editor.php 文件。查找 ‘wp_more’,在 ‘wp_more’, 后添加 ‘wp_page’, (含单引号和逗号)。修改后代码如下:

$mce_buttons = array( 'bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'hr',
 'alignleft', 'aligncenter', 'alignright', 'link', 'unlink', 'wp_more', 'wp_page', 'spellchecker' );
下面以雅兮网的分页样式为例。首先将文章页的分页代码替换为如下代码(替换掉上文中的 <?php wp_link_pages(); ? >)
  1.  <!-- 文章分页 -->
  2.     <?php wp_link_pages(array('before' => '<div class="fenye">', 'after' => '', 'next_or_number' => 'next', 'previouspagelink' => '<span>上一页</span>', 'nextpagelink' => "")); ?>
  3.     <?php wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'number', 'link_before' =>'<span>', 'link_after'=>'</span>')); ?>
  4. <?php wp_link_pages(array('before' => '', 'after' => '</div>', 'next_or_number' => 'next', 'previouspagelink' => '', 'nextpagelink' => "<span>下一页</span>")); ?>
    然后在主题 style.css 样式表里添加下面的样式。
    
    1. /*文章分页*/
    2.     .fenye{text-align: center;margin: 0px 10px;padding-right:20px;font-size: 16px;line-height: 50px;}
    3.     .fenye span{background: #2f889a; color: #fff; margin: 2px; line-height: 30px; cursor: pointer; padding: 0 12px; display: inline-block; border: 1px solid #2f889a; border-radius: 2px;}
    4.     .fenye a{text-decoration:none;}
    5.     .fenye a span{background-color:#F6F6E8;font-weight: normal;color: #000;text-decoration: none;}
    6.     .fenye a span:hover{background-color:#c73503;border:1px solid #c73503;color: #fff;}
    给长篇幅文章添加分页功能,可以在一定程度上减轻用户对长篇幅文字的抵触,对网站 PV 上也有好处,希望本文能够帮到大家。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注