样式

使用理想的长度（字数）是文章在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 但是，您的XML站点地图将有一个文章URL，即文章的第 1 页。无论您使用默认的WordPress站点地图还是使用插件为您的站点生成站点地图，情况都是一样的。 分页符的优点 在WordPress中添加分页符有助于通过以下方式提高可见性： 限制单个页面的长度而不会拉伸太长。 用户可以导航到下一页或上一页以阅读内容，从而增加现场参与度和时间。 每个页面都可能在搜索引擎中排名，从而提高您的流量。 但是，请确保内容对您的读者足够有吸引力以保留它们并将页面分解在适当的位置。否则，用户可能会在未阅读完整内容的情况下离开页面，从而产生负面影响。 在古腾堡编辑器中添加分页符 分页符是古腾堡编辑器中的区块之一，您可以在内容的任何位置插入它。创建要插入分页符的段落块，只需键入/page以插入该区块。 在Gutenberg中查找分页符区块 选择要插入的分页符区块，它将显示一条分隔线，如下图所示。这个区块没有额外的设置，你唯一能做的就是插入或删除。 古腾堡编辑器中添加的分页符 现在，发布或更新您的文章并在单独的浏览器选项卡中打开页面。您可以在编辑器中看到您在其中插入分页符的页面导航链接。Gutenberg编辑器中分页线下方的内容部分将移动到一个新页面，您可以通过单击第2页链接访问该页面。您可以插入多个分页符以将内容分成不同的页面，这些页面可以使用分页链接访问。下面是它在WordPress主题二〇二二的页面上的样式。 默认WordPress主题中的分页符 在WordPress中自定义分页符的样式 您使用的主题将决定已发布页面上分页符部分的样式。正如您在上面的屏幕截图中看到的那样，分页看起来很简单，用户甚至可能没有注意到它出现在内容的末尾。 但是，商业主题使用自定义的内置样式来使分页的外观更具吸引力。例如，下面是Astra和Kadence主题中分页符分页的样式。 Astra主题中的分页 Kadence主题中的分页符 如果您想自定义分页链接，WordPress提供了三个CSS类供您使用。您可以使用浏览器的开发人员工具部分更改实时站点的样式，以找到适合您站点的合适CSS。 我们将在此处使用默认的二〇二二主题进行说明，当您使用不同的主题时，外观可能会有所不同。分页wrapper的CSS类是.post-nav-links，您可以使用以下样式为此类添加一些背景、填充、边框半径。 .post-nav-links { background: rgb(144 238 144); padding: 10px; border-radius: 5px; […]

WordPress中最新的完整站点编辑功能提供为您的站点创建自定义页面模板。但是，使用在编辑器中创建内容并单独添加小工具和菜单的传统方式更方便发布文章。 通常，您的主题为布局中的所有元素（包括小工具）提供样式。但是，您可以轻松地将自定义样式添加到小工具，以使它们对您的读者有吸引力。 WordPress中的小工具样式 据我们检查，许多WordPress主题不提供自定义侧边栏中每个小工具的选项。特别是，像Kadence、GeneratePress、Astra等轻量级主题提供了简单的侧边栏小工具，重点是最少使用。幸运的是，在Gutenberg小工具区块编辑器的帮助下，使用其他样式自定义小工具很容易。如果您仍在使用旧的Classic Widgets界面，那么您需要在应用自定义样式之前进行一些分析。 最新文章小工具示例 让我们举个例子来解释一下Kadence主题的概念。转到“外观>小工具”并在侧边栏区域添加“最新文章”区块。由于最新文章小工具没有任何标题，因此您需要添加标题区块并将小工具命名为“最新文章”。下面是在侧边栏中带有标题区块的最新文章小工具在Kadence主题上的外观。 侧边栏中的最新文章小工具 如您所见，小工具显示为没有任何背景颜色和边框的无序列表。尽管Kadence提供了更改整个侧边栏颜色和排版的选项，但无法从主题设置中为单个小工具添加样式。 自定义侧边栏设计设置 现在，我们将解释如何将您自己的自定义CSS样式添加到最新文章小工具。 使用区块设置添加自定义样式 一些基于文本的区块，如古腾堡的最新文章，带有默认颜色选项。 首先选择标题和最新文章区块，您可以通过按住shift键并选择区块来执行此操作。 您将看到一个弹出工具栏，然后单击“更改类型…”。图标在工具栏中显示为两个方块。 选择“分组”选项将您的标题和最新文章区块分组为单个区块小工具。 组小工具区块 现在单击显示在右上角附近的齿轮图标以查看区块设置。 您将看到许多用于自定义区块布局的选项。 侧边栏中的小工具区块设置 单击“颜色”部分下的“背景”选项，并为您的小工具应用背景颜色。您可以根据需要应用纯色或渐变色。 如果需要，更改字体大小并为您的小工具添加填充。通过单击“取消链接边”图标，可以为所有四个边应用单独的填充。 添加背景颜色、填充和更改字体大小 单击“更新”按钮发布您的小工具并查看其中一篇博客文章以查看样式化小工具的运行情况。 具有自定义样式的最新文章小工具 将自定义CSS类添加到小工具区块 虽然上述方法非常简单，但并非所有区块都提供背景颜色选项。此外，您可能希望为边框和边框半径添加样式，这些样式在可用的有限选项中是不可能的。您可以通过向区块中添加自定义CSS类来处理这种情况。 您可以对单个区块执行此操作，也可以对应用自定义样式所需的区块进行分组。 在侧边栏区块设置上，单击“高级”部分。 在“Additional CSS class(es)”文本框下添加您的CSS类名称。例如，在我们的案例中，我们将添加类名作为latestposts。 单击“更新”按钮以发布您在小工具区域中所做的更改。 为小工具区块添加额外的CSS类 现在，您可以在latestposts类中添加任何自定义CSS样式来美化您的小工具。 让我们添加以下CSS样式，以将背景颜色、填充、边框和边框半径添加到最新的文章小工具。 .latestposts { background: rgb(20 224 20); padding: 25px; border: 3px solid rgb(211 211 211); border-radius: 8px; } 您需要在“外观 > […]

样式化侧边栏是从零开始创建 WordPress 主题系列教程的第十三篇，这篇主要讲解如何样式化侧边栏里面的所有元素，在对侧边栏样式化之后，这系列教程就将差不多结束了。 打开 XAMPP，主题文件夹，Firefox，IE 和 style.css 文件。 第1步：样式化侧边栏的无序列表 在 .sidebar{} 下输入： .sidebar ul{ list-style-type: none; margin: 0; padding: 0 10px 0 10px; } 现在已经为侧边栏样式化父级无序列表（UL）标签。所有的子 UL 或者内嵌的 UL 将会击继承同样的样式。在这里，它是无列表样式，零空白和10像素的填充。 如下所示： 第二级的（或内嵌的） UL 继承了第一级 UL 的样式。如果你给了第一级 UL 应用了边框，第二级的 UL 同样也会有个边框。 保存并刷新就可以看到列表条目现在已经没有前面的圆点了。 注意下你是如何增加顶部和底部填充的。 第2步：给 LI 添加填充 在 .sidebar ul{} 下输入： .sidebar ul li{ padding: 10px 0 10px […]