如何在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中添加分页符并自定义样式?

WordPress中分页符的规范URL

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

分页符的优点

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

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

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

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

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

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

在Gutenberg中查找分页符区块

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

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

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

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

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

默认WordPress主题中的分页符

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

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

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

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

Astra主题中的分页

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

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更改为如下所示:

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

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

其次是.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;
}

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

将框添加到页码

最后一类是.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);
}

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

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

当前页面处于活动状态

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

使用主题自动分页

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

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

下拉分页

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

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

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

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

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

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

重要声明

本网站的文章部分内容可能来源于网络,如有侵犯你的权益请联系邮箱:wxzn8@outlook.com
站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!本站资源大多存储在云盘,如发现链接失效请反馈,我们会及时更新。

给TA打赏
共{{data.count}}人
人已打赏
WordPress开发学习

如何在WordPress中使用Bootstrap图标?

2023-1-13 18:18:30

WordPress开发学习

使用WP_Query的基础知识 + 代码示例

2023-1-13 18:18:53

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索