标签: 分页符区块

  • 古腾堡编辑器教程:如何使用WordPress分页符区块

    分页符样式

    分页是将冗长的内容分解为更易于阅读的绝妙方法。如果你环顾网络,分页无处不在。搜索引擎使用它来分离结果,在线商店利用它来简化浏览,您甚至可以为博客文章添加分页。多亏分页符区块,WordPress使您能够轻松地做到这一点。

    在本教程中,我们将讨论如何将分页符区块添加到您的网站,并向您展示它的外观。然后我们将讨论一些提示和技巧,以确保您正确使用分页符。

    如何将分页符区块添加到文章或页面

    区块编辑器包含构建现代页面和将复杂文章(包括分页符)放在一起所需的所有元素。当您在WordPress上使用分页符区块,你基本上添加该页面或文章内的新选项卡。您可以添加多个分页符并使用户能够在这些部分之间移动,如下所示:

    文章分页演示

    使用区块编辑器添加分页符非常简单。首先,打开编辑器并添加您希望该文章包含的段落、列表和其他元素。

    准备好要分割的内容后,单击加号图标以添加新区块。在“设计” 选项卡下 查找“分页符”选项并选择它:

    分页符区块插入

    如您所见,我们的页面上已经有几个分页符区块。添加区块后,单击它,您将看到拖动它的选项,或在整个页面布局中上下移动它:

    分页符区块移动

    单个页面或文章可以根据需要包含任意数量的分页符区块。正如您在本节开头所见,WordPress会自动将分页符区块之间的内容分成单独的页面。

    尽管大多数WordPress区块提供多种自定义设置,但分页符区块不是其中之一。默认情况下,您无法更改区块的样式或其工作方式。不同的WordPress主题都有自己的分页样式。但是,区块本身被设计为尽可能易于使用。

    有效使用分页符区块的技巧和最佳实践

    使用分页符区块非常简单。但是,在向WordPress网站添加分页时,您应该记住一些提示和技巧。让我们一一回顾这些技术:

    • 使每一页尽可能统一。 理想情况下,页面之间的切换应该是无缝的。如果一页与下一页的内容存在很大差异,则可能会让读者感到不快。为简单起见,我们建议每个部分使用相同的结构,并使它们的长度相似。
    • 适度使用分页符。 尽管分页符很有用,但很少有人会在一个页面(即使是在网上商店)中点击其中的一打分页符。理想情况下,您应该只在情况需要时使用分页。
    • 为每个子页面添加副标题。 在子页面中,正确的格式和副标题的使用仍然必不可少,因此读者知道每个部分涵盖的内容。此外,搜索引擎仍会将带有中断的页面视为一个整体。
    • 不要在分页后隐藏关键信息。 每当您对页面设计进行更改以使其更难以导航时,都会对参与度产生负面影响。例如,如果您在五个或十个分页符区块之后“隐藏”重要信息,那么某些用户可能会错过它是理所当然的。为避免这种情况,我们建议不要在着陆页或旨在推动转化的文章中使用分页符。

    如果您牢记这些提示,您将能够在WordPress中使用分页符区块,而不会影响您网站的参与度。请记住,网络上的大多数人都习惯于看到分页符。换句话说,他们已经知道这个元素是如何工作的。只要您让访问者有理由期待该分页符背后有吸引人的内容,他们就更有可能点击它。

    关于分页符区块的常见问题

    如果您对WordPress分页符区块以及如何使用它有任何疑问,让我们来看看用户对这个特定元素的一些常见问题。

    无限滚动比分页更好吗?

    当您的网站拥有庞大的内容库时,无限滚动可以很好地工作。社交媒体平台几乎一致使用无限滚动是有原因的——它鼓励用户在您的网站上花费更多时间。

    对于非社交媒体平台,分页符提供了一种更结构化的替代方案,使访问者能够在各个部分之间跳转并保持控制。如果他们想返回到较早的点,他们可以随时这样做,这在您使用无限滚动时并不那么简单。

    什么时候应该使用分页符区块?

    大多数现代博客不使用分页符,即使是很长的文章。除非您有充分的理由在博客文章中添加分页符,否则我们建议您只制作每篇文章,只要它不需要分页即可。

    当您需要提供在单个屏幕内可能难以消化的信息时,添加分页符非常有效。例如,如果您想提供推荐文章和页面的列表,分页效果非常好。这同样适用于产品列表,甚至常见问题 (FAQ) 部分。

    小结

    分页符区块为您提供了一个令人难以置信的简单的方法来添加分页到任何网页或网站中的文章。分页是将大量信息分解为读者更容易消化的部分的绝佳方式。

    但是,我们建议不要在常规博客文章中使用此技术。总的来说,大多数现代博客不对其内容使用分页,即使是冗长的文章。在分离产品和推荐的文章列表、用户推荐、评论和类似元素时,分页符更有用。

  • 如何在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编辑器的分页符分隔符。发布或更新内容以查看实时内容中的分页。