标签: 文章分页

  • 如何实现WordPress文章分页显示

    不知道作为站长的您,是否曾经考虑过将WordPress长文章拆分多个页面显示?

    将较长内容文章分成几页,可以在某种程度上提升访客阅读文章和浏览体验。在本教程中,我们将介绍比较简单的方法以实现WordPress文章分页显示。

    WordPress文章分页显示

    为什么要将WordPress文章分页显示?

    如果您的博客文章太长,比如数千字,则设置分页可以提高内容的可读性。

    它有助于将文章分为不同的部分,并将它们分为多个页面。这样,访客更容易消化页面内容并阅读他们感兴趣的任何部分。

    拆分WordPress文章的另一个好处是,它可以帮助增加网页浏览量并增加广告收入。

    下面,让我们看一下如何将WordPress文章分成多个页面。

    方法1.无需插件实现WordPress文章分页

    设置分页的最简单方法是使用WordPress内容编辑器中的“分页符”区块。不需要WordPress插件即可将文章分成多个页面。

    首先,在WordPress网站上编辑或添加新文章。之后,光标移至你需要分拆页面的位置,点击加号(+)按钮,并添加一个“分页符”区块。

    添加分页符区块

    在内容中看到一个分页符行,即代表分页出现的位置。

    文章分页符示例

    如果您使用的是经典编辑器,请使用<!––nextpage––>标记分页内容。

    只需编辑任何博客文章,然后转到“文本”视图以输入标签即可实现内容分页。

    经典编辑器分页符代码

    您也可以使用键盘上的Alt + Shift + P键插入分页符。为此,请转到“可视”视图,然后在要添加分页符的位置按键盘快捷键。

    之后,您可以预览和发布博客文章。现在,您将在内容底部看到文章分页导航。

    文章分页导航示例

    方法2.利用插件实现WordPress文章分页

    将长的文章内容分为多个页面的另一种方法是使用WordPress插件。这种方法的好处是,当符合特定条件时,它将自动对文章进行分页处理。

    对于这种方法,我们将使用免费的“Automatically Paginate Posts”插件,因为它易于使用,兼容任何WordPress主题。

    首先,在WordPress网站上安装并启用“Automatically Paginate Posts”插件。

    插件在您的网站上启用后,转到“设置”»“阅读”,然后向下滚动到“Automatically Paginate Posts”部分。

    您可以选择文章类型以分成不同的页面。之后,选择是按总页数还是每页文字数量来拆分文章。

    automatically-paginate-posts插件设置

    最后点击“保存更改”即可生效。

    该插件将根据设置自动拆分指定的文章类型内容。当然,您也可以在使用插件时手动将分页符添加到您的内容中。

    我们希望本教程能帮助您学会将WordPress文章页拆分成多个页面。

    温馨提示:适当地进行文章拆分多个页面,有利于阅读体验。过度拆分多个页面,也可能导致糟糕的用户体验。除了分页处理文章,也可以通过文章导航的方式优化文章阅读体验。

  • 如何在WordPress中添加分页符并自定义样式?

    如何在WordPress中添加分页符并自定义样式?

    使用理想的长度(字数)是文章在Google搜索中排名良好的成功因素之一。没有决定长度的规则,这取决于你写的主题。然而,长篇文章往往表现良好,因为除了焦点关键词之外,它们还可以对长尾关键词进行排名。

    不管怎样,一次展示3000字以上的文章,会让用户很快感到疲倦和无聊。解决方案是在WordPress中使用分页符,以便将文章分成几页。在本文中,我们将解释如何在WordPress中使用分页符并自定义样式。

    使用分页符时会发生什么?

    分页符是WordPress中将冗长的文章拆分为所需页数的功能。您可以在一篇文章中插入多个分页符以拆分为多个页面。发表的文章会有一个分页,用户可以点击它进入下一页阅读更多内容。假设您在一篇文章中插入了两个分页符。在这种情况下,文章将分为三个页面,如下所示,三个不同的 URL:

    yoursite.com/test-post/ 第 1 页
    yoursite.com/test-post/2/ 第 2 页
    yoursite.com/test-post/3/ 第 3 页

    请记住,每个URL在WordPress中都是一个单独的页面,这意味着用户可以独立访问它们。WordPress将在源代码中添加同一拆分页面(如 /2/ 或 /3/)的规范URL,以通知搜索引擎这些可以被视为独立页面。

    WordPress中分页符的规范URL

    WordPress中分页符的规范URL

    但是,您的XML站点地图将有一个文章URL,即文章的第 1 页。无论您使用默认的WordPress站点地图还是使用插件为您的站点生成站点地图,情况都是一样的。

    分页符的优点

    在WordPress中添加分页符有助于通过以下方式提高可见性:

    • 限制单个页面的长度而不会拉伸太长。
    • 用户可以导航到下一页或上一页以阅读内容,从而增加现场参与度和时间。
    • 每个页面都可能在搜索引擎中排名,从而提高您的流量。

    但是,请确保内容对您的读者足够有吸引力以保留它们并将页面分解在适当的位置。否则,用户可能会在未阅读完整内容的情况下离开页面,从而产生负面影响。

    在古腾堡编辑器中添加分页符

    分页符是古腾堡编辑器中的区块之一,您可以在内容的任何位置插入它。创建要插入分页符的段落块,只需键入/page以插入该区块。

    在Gutenberg中查找分页符区块

    在Gutenberg中查找分页符区块

    选择要插入的分页符区块,它将显示一条分隔线,如下图所示。这个区块没有额外的设置,你唯一能做的就是插入或删除。

    古腾堡编辑器中添加的分页符

    古腾堡编辑器中添加的分页符

    现在,发布或更新您的文章并在单独的浏览器选项卡中打开页面。您可以在编辑器中看到您在其中插入分页符的页面导航链接。Gutenberg编辑器中分页线下方的内容部分将移动到一个新页面,您可以通过单击第2页链接访问该页面。您可以插入多个分页符以将内容分成不同的页面,这些页面可以使用分页链接访问。下面是它在WordPress主题二〇二二的页面上的样式。

    默认WordPress主题中的分页符

    默认WordPress主题中的分页符

    在WordPress中自定义分页符的样式

    您使用的主题将决定已发布页面上分页符部分的样式。正如您在上面的屏幕截图中看到的那样,分页看起来很简单,用户甚至可能没有注意到它出现在内容的末尾。

    但是,商业主题使用自定义的内置样式来使分页的外观更具吸引力。例如,下面是Astra和Kadence主题中分页符分页的样式。

    Astra主题中的分页

    Astra主题中的分页

    Kadence主题中的分页符

    Kadence主题中的分页符

    如果您想自定义分页链接,WordPress提供了三个CSS类供您使用。您可以使用浏览器的开发人员工具部分更改实时站点的样式,以找到适合您站点的合适CSS。

    我们将在此处使用默认的二〇二二主题进行说明,当您使用不同的主题时,外观可能会有所不同。分页wrapper的CSS类是.post-nav-links,您可以使用以下样式为此类添加一些背景、填充、边框半径。

    .post-nav-links {
    background: rgb(144 238 144);
    padding: 10px;
    border-radius: 5px;
    }
    .post-nav-links {
    background: rgb(144 238 144);
    padding: 10px;
    border-radius: 5px;
    }
    .post-nav-links {
    background: rgb(144 238 144);
    padding: 10px;
    border-radius: 5px;
    }

    此CSS代码将分页wrapper更改为如下所示:

    为文章导航链接添加背景颜色

    为文章导航链接添加背景颜色

    其次是.post-page-numbers用于显示数字链接的类。您可以将以下样式添加到此类以显示数字周围的框。

    .post-page-numbers {
    border: 1px solid rgb(0 0 0);
    padding: 5px 10px;
    border-radius: 5px;
    }
    .post-page-numbers {
    border: 1px solid rgb(0 0 0);
    padding: 5px 10px;
    border-radius: 5px;
    }
    .post-page-numbers {
    border: 1px solid rgb(0 0 0);
    padding: 5px 10px;
    border-radius: 5px;
    }

    将框添加到页码

    将框添加到页码

    最后一类是.post-page-numbers.current区分活动页面链接。您可以为活动页面链接框添加不同的背景颜色,以便用户可以轻松了解他们当前处于该突出显示的页面中。

    .post-page-numbers.current {
    background: rgb(255 255 0);
    }
    .post-page-numbers.current {
    background: rgb(255 255 0);
    }
    .post-page-numbers.current {
    background: rgb(255 255 0);
    }

    我们将黄色背景添加到活动页面,如下所示:

    当前页面处于活动状态

    当前页面处于活动状态

    结合在一起,您可以在“外观 > 自定义 > 附加CSS”部分下添加上述所有CSS样式,以更改分页的外观。

    使用主题自动分页

    一些主题使用完全不同的自动分页设置方法。例如,流行的报纸主题提供根据您选择的标题级别创建智能列表。如果您选择2级标题,则每当您在内容中使用H2标题时,主题将自动分页并添加分页。此外,您可以选择显示为下拉列表的分页,以便用户可以看到标题并选择要阅读的页面。

    下拉分页

    下拉分页

    在经典编辑器中添加分页符

    如果您使用不支持Gutenberg的自定义文章类型或仍在使用旧的经典编辑器,那么您也可以插入分页符。切换到“文本”编辑器并将以下代码粘贴到您要插入分页符的位置。

    <!–nextpage–>
    <!–nextpage–>
    <!--nextpage-->

    在经典编辑器中添加分页符

    在经典编辑器中添加分页符

    现在,切换回“可视”编辑器以查看类似于Gutenberg编辑器的分页符分隔符。发布或更新内容以查看实时内容中的分页。