www.wpcitation.com/

Tag: 网站导航优化

如何在 Elementor 中创建带有容器的垂直粘性标题
什么是垂直粘性标题？

垂直粘性标题是一种固定在页面侧边的标题栏，当用户向下滚动页面时，标题栏会保持在页面的可见范围内，方便访问其他页面区域或快速导航。此设计可用于目录、导航菜单、联系信息等内容，使用户浏览更为方便。

准备工作

在开始之前，确保你已经具备以下条件：
1. 安装并激活了 Elementor Pro 插件（因为粘性效果需要 Pro 版本）。
2. 创建了一个新的页面或准备在现有页面上添加垂直粘性标题。
3. 已了解 Elementor 容器的基本用法（建议在 Flexbox 容器模式下操作）。
步骤一：创建单一页面模板

我们此次创建单一页面模板，对这个模板创建带有容器的垂直粘性标题。

进入模板创建页面
1. 在 WordPress 后台，导航到 Elementor > 模板 > 新建。
1. 在弹出的窗口中选择 单一页面 作为模板类型，并命名模板，例如“企业服务页面模板”。
选择页面类型
1. 在模板库顶部选择 “页面（Pages）” 标签。
2. 在库中浏览可用的页面模板。可以使用搜索框查找适合的模板样式，如“服务”或“公司”。
1. 如果是专门用于某一类页面，也可以在条件设置中添加特定条件。
步骤二：在 Elementor 中创建容器

1、添加容器

在页面中，点击“添加新容器”并拖动到页面设计区域。这个容器将作为垂直粘性标题的父容器。

2、设置容器方向

选中容器，在左侧的设置面板中，将容器的方向设置为垂直，即纵向排列，以便内容能够纵向堆叠。这一步是实现垂直标题的关键。

3、定义容器宽度

在“样式”选项卡中，将容器的宽度设置为一个合适的尺寸，例如 200px 或更小，以确保它不会占用页面过多空间。可以根据页面设计和需求自定义这个宽度。

步骤三：创建垂直粘性导航栏

插入标题和导航项
- 在容器中，添加一个“标题”小部件，将标题设置为“快速导航”或“目录”。
添加列表
- 在标题下面，在与标题同一个容器内继续添加 图标列表 或 按钮小部件，用作导航项目，我们使用图标列表。
- 添加后：
添加项目
- 关于我们：点击后跳转至公司简介部分。
- 服务项目：跳转至服务项目介绍区域。
- 客户评价：跳转至客户反馈部分。
- 联系我们：跳转至联系信息和表单。
可以修改名称和图标。

设置锚链接

对每个导航项的按钮或图标列表添加锚链接。为页面的各个内容部分设置锚点，例如 #about-us、#services、#testimonials、#contact-Us 等。
- 设置关于我们的锚点
  - 在 Elementor 编辑器中，找到 “菜单锚点” 小部件。将该小部件拖动到“About Us”部分的标题上方（或其他合适的位置）。在小部件的设置中，为锚点输入一个名称（例如 about-us），以便以后链接到该位置。
- 设置锚点链接
  - 回到图标列表关于我们处，添加#about-us锚点链接后就可以点击跳转。
- 其余菜单项按此操作设置其锚链接。
自定义导航栏样式
- 在“样式”选项卡中，可自定义字体、颜色和间距，使其与网站风格一致。
- 可设置背景颜色、边距和阴影效果，使导航栏更加清晰和独立。
步骤四：设置粘性效果

要使侧边栏在用户滚动时保持固定，请按照以下步骤操作：
1. 为导航栏和内容区域设置 CSS ID
选择导航栏容器，并在 “高级 ”选项卡中添加 CSS ID；例如，将 ID 设为sidebar 。
- 添加自定义 CSS 代码
在 Elementor 中打开自定义 CSS（导航栏容器的全局设置或自定义 CSS）。添加以下代码：
```
#sidebar{
    position: fixed; /* 固定侧边栏位置，滚动时不移动 */
    left: 0; /* 侧边栏对齐页面左侧 */
    top: 0; /* 侧边栏从页面顶部开始 */
    height: 100vh; /* 设置侧边栏高度为视窗高度 */
    width: 200px; /* 调整侧边栏宽度，根据需求更改 */
    z-index: 10; /* 保证侧边栏位于其他元素之上 */
    padding-top: 250px; /* 可根据需要调整顶部内边距 */
    overflow-y: auto; /* 当侧边栏内容较长时允许滚动 */

    display: flex; /* 使用 flexbox 布局 */
    flex-direction: column; /* 垂直排列内容 */
    justify-content: center; /* 垂直居中内容 */
}
```
步骤五：添加背景样式与阴影效果（可选）

设置背景颜色
在“样式”选项卡中，选择合适的背景颜色，确保容器在页面上有清晰的区分。

添加阴影效果
为了让粘性标题看起来更具层次感，可以在“框阴影”中设置阴影效果，使其在页面上有悬浮的视觉效果。

步骤六：预览与发布
1. 预览效果
  点击页面的“预览”按钮，查看粘性标题在页面滚动时的表现。确保容器在滚动时始终固定在页面顶部，不会被其他元素覆盖。
2. 调整内容
  根据预览效果，调整标题内容的大小、对齐方式以及容器的边距，确保内容清晰且不影响页面其他元素的布局。
3. 发布页面
  在确认一切效果正常后，点击“发布”按钮将页面上线。你的垂直粘性标题已经创建完成。
总结：

垂直粘性标题是一种固定在页面侧边的导航栏，可以在用户滚动时保持可见，方便他们快速访问页面不同部分。在 Elementor 中创建这种标题涉及几个关键步骤：首先，创建单一页面模板，并添加一个垂直方向的容器作为粘性标题栏的主体。接着，在容器中添加标题和导航项目，使用图标列表或按钮小部件，并为每个项目设置锚链接。然后，应用 CSS 代码来固定侧边栏，确保其在滚动时始终可见。
October 31, 2024
如何在 WordPress 中创建和添加锚链接：详细指南
锚链接，也称为跳转链接或跳过链接，通过减少滚动改善了较长或文本较多的 WordPress 页面和帖子的导航和用户体验。它们允许用户通过单击链接快速跳转到同一页面上的特定内容部分。

在本指南中，我们将详细介绍在 WordPress 中添加锚链接的所有步骤和注意事项，包括经典编辑器、Gutenberg 编辑器和 WPBakery 页面构建器中的实现方法。

什么是锚链接？

锚链接是一种超链接，它不会将你带到新页面，而是跳转到同一页面的特定部分。例如，如果你正在阅读一篇较长的文章，并且顶部有一个目录，可以点击链接直接转到你感兴趣的部分。

通常，锚点被添加到文本元素，如标题或段落，但也可以添加到菜单项、按钮、图像或表单。

为什么要使用锚链接？

使用锚链接可以改善你网站的用户体验，让用户无需无休止滚动即可快速找到他们所需内容，并且还有利于网络可访问性。锚链接可以帮助 Google 等搜索引擎更好地理解你的页面结构，从而提高网站的排名。

锚链接的结构

为了理解锚链接，让我们分解一下它们的结构。锚链接由两个主要部分组成：

1. ID（标识符）

这是你添加到要链接到的元素的唯一标识符。在 HTML 中，可以像这样向元素添加 ID：
```
<h2 id="section1">section1</h2>
```
这里，id="section1" 是唯一标识符。

2. 链接

这是可点击的部分，可跳转到你创建的 ID。使用井号（#）后跟 ID。例如：
```
<a href="#section1">Go to Part 1</a>
```
href="#section1" 部分告诉浏览器在点击链接时跳转到 ID 为“section1”的元素。

如何在 WordPress 中创建锚链接

使用 WordPress 经典编辑器

首先介绍在 TinyMCE 的经典编辑器中添加锚链接的方法，这是在 WordPress 中编辑帖子和页面的经典方式。

1、为元素添加唯一 ID
1. 打开要添加锚链接的帖子或页面。
2. 从可视模式切换到文本模式，可直接编辑 HTML。
3. 找到要附加锚点的内容部分。
4. 为元素添加唯一 ID，例如：
```
<h2 id="section1">第 1 节</h2>
```
如果你想在某个段落中为特定单词或短语添加 ID，可以像这样添加：
```
<p>这是一个 <a id="specificWord">特定单词</a> 的示例。</p>
```
2、链接到锚点
1. 从文本模式切换回可视模式。
2. 选择将用作链接的文本，然后单击工具栏中的“插入/编辑链接”。
3. 在弹出窗口中，使用井号（#）后跟你创建的 ID：
```
<a href="#section1">Go to section 1</a>
```
单击“添加链接”，保存更改，就完成了在经典编辑器中创建锚链接。

3、从导航栏添加锚点
1. 在 WordPress 信息中心中，转到“外观”，然后转到“菜单”。
2. 在菜单编辑器中，点击“自定义链接”将其展开。
3. 添加指向目标页面的链接，将井号（#）与元素 ID 一起添加到你的链接：
```
<a href="#section1">Go to section 1</a>
```
保存更改并查看结果。

使用 Gutenberg 编辑器

接下来介绍如何在 Gutenberg 编辑器中创建锚链接，这是 WordPress 中较新的基于块的编辑器。

1、为元素添加唯一 ID
1. 打开要添加锚链接的帖子或页面。
2. 选择要添加锚点的块。
3. 在区块设置中，向下滚动并点击“以 HTML 格式编辑”。
4. 找到要附加锚点的内容部分，为元素添加唯一 ID：
```
<h2 id="section1">第 1 节</h2>
```
或者，你也可以通过选择块，转到右侧块设置中的“高级”部分，然后在那里输入你的唯一 HTML 锚点。

2、链接到锚点
1. 单击“可视化编辑”切换回文本块。
2. 选择将用作链接的文本，然后单击工具栏中的“链接”。
3. 在弹出窗口中，使用井号（#）后跟你创建的 ID：
```
<a href="#section1">转至第 1 部分</a>
```
按“Enter”键，保存更改，就完成了在 Gutenberg 中添加锚链接。

在 WPBakery 页面构建器中创建锚链接

最后，让我们探索如何在 WPBakery Page Builder 中添加锚链接，这使你可以将锚点添加到 WordPress 页面或帖子中的任何元素。

1、为元素添加唯一 ID
1. 选择并添加要添加锚点的元素（或者换句话说，链接将跳转到的目的地）。
2. 打开元素的编辑窗口。
3. 向下滚动到“元素 ID”部分并添加你的唯一 ID：
```
<h2 id="section1">section 1</h2>
```
2、链接到锚点
1. 选择并添加要添加锚链接的元素（换句话说，单击时将跳转到目的地的元素），例如“按钮”。
2. 打开元素的编辑窗口。
3. 导航至“URL（链接）”部分并点击“选择 URL”。
4. 在弹出窗口中，使用井号（#）后跟你创建的 ID：
```
<a href="#section1">Go to section 1</a>
```
单击“设置链接”，保存更改，并检查您的锚链接如何工作！

锚链接的最佳实践

以下是在 WordPress 中使用锚链接的一些最佳做法：

1. 确保唯一 ID

创建元素 ID 时，确保它们在页面（或同一 HTML 文档）上是唯一。重复的 ID 可能导致意外的跳转行为。

2. 避免在 ID 中使用特殊字符

元素 ID 不能包含空格、标点符号和特殊字符，也不能以数字或破折号 (-) 开头。虽然 HTML 允许这样做，但这可能会在其他情况下造成麻烦，例如 CSS 和 JavaScript，因此最好尽量避免这样做。

3. 链接以“#”开头，但 ID 中不包含“#”

例如，链接应为“#section1”，ID 应为“section1”。这是一个常见错误，会导致锚链接无法正常工作。

4. 避免使用裸锚链接

裸锚链接或原始锚链接是使用 URL 本身作为锚点的链接，例如 https://example.com。虽然在某些情况下可能需要它们，但它们缺乏上下文，并且不能提供与描述性锚文本相同的 SEO 优势。

5. 使锚文本清晰且具有描述性

不要使用“了解更多”、“单击此处”或“继续”等含糊不清的短语，而要使用更具体的文本，例如“单击此处下载用户手册 PDF”或“了解有关我们团队的更多信息”。这可以提高网络可访问性，帮助用户了解链接将带他们去哪里。

6. 测试锚链接是否正常工作

始终测试锚链接以确保其正常工作。无效链接会让用户感到失望，并损害你的 SEO。

何时使用锚链接？（示例）

WordPress 中的锚链接在很多情况下都非常有用。以下是一些示例：

1. 目录

如果您有一篇很长的文章，顶部带有锚链接的目录可以帮助读者跳转到他们想要阅读的部分。

2. 单页导航

对于单页网站，锚链接可以帮助用户快速到达不同的部分，如“关于”、“服务”和“联系”。

3. 行动呼吁 (CTA)

使用锚链接引导用户执行特定操作，例如填写表格或查看产品。

4. 长篇内容

将长篇内容分成带有锚链接的部分，以便读者可以轻松找到所需的信息。

5. 滚动回到顶部

引入“滚动回到顶部”按钮（通常位于网站的右下角），可以帮助用户返回顶部并快速采取行动。

常见问题解答

1. 锚链接和常规链接有什么区别？

锚链接指向同一页面的特定部分，而常规链接通常会将你带到不同的页面。

2. 锚链接能改善 SEO 吗？

是的，锚链接是内部链接策略的一部分，它可以帮助搜索引擎了解页面内容的结构和重要性，从而改善 SEO。

3. 锚链接可以提高可访问性吗？

是的，锚链接可以帮助用户（尤其是残障人士）更有效地浏览长内容，从而提高可访问性。

4. 我如何测试我的锚链接是否有效？

可以通过点击锚链接来测试它们是否将你带到正确的部分。还可以使用浏览器开发人员工具来检查是否存在任何问题。

5. 有什么插件可以帮助我向 WordPress 添加锚链接吗？

是的，有一些插件可以帮助你创建并添加锚链接至 WordPress 布局中的任何元素，例如 WPBakery Page Builder。

结论

在 WordPress 中添加锚链接可以极大地改善您网站的导航、用户体验、SEO 和可访问性。通过遵循本指南中概述的方法，可以使用经典编辑器、Gutenberg 编辑器或 WPBakery 页面构建器轻松地在 WordPress 中创建锚链接。每种方法都有其优点，但如前所述，WPBakery 脱颖而出，允许你将锚链接添加到页面上的任何元素。
July 29, 2024
如何在WordPress中创建、管理和优化菜单：详细操作指南
创建菜单是 WordPress 的一项功能。可以使用你的主题来显示菜单。我们一起往下看看吧！

创建菜单

按着这些次序：

1.登录WordPress仪表盘。

2.转到外观 > 菜单。显示菜单页面。
3.输入菜单名称。

4.（可选）如果想自动将顶层页面添加到菜单，选中自动添加页面。

5.（可选）勾选显示位置。这是菜单在网站上显示的位置。

6.单击“创建菜单”。

删除菜单

按着这些次序：

1.登录 WordPress仪表盘。

2.转到外观 > 菜单。显示菜单页面。
3.点击删除菜单。系统会显示确认消息。

4.单击“确定”。

创建多个菜单

按着这些次序：

1.登录WordPress仪表盘。

2.转到外观 > 菜单。显示菜单页面。

3.单击创建新菜单。
将页面添加到菜单

在添加页面之前要创建一个菜单。

1.登录 WordPress仪表盘。

2.转到外观 > 菜单。显示菜单页面。

3.在添加菜单项面板下，展开页面。
4.选择要插入的页面并点击“添加到菜单”。所选项目将显示在右侧。

5.单击“保存菜单”。

可以通过拖放来更改菜单项的位置。

从菜单中删除页面

按着这些次序：
1. 登录WordPress仪表盘。
2. 转到外观 > 菜单。显示菜单页面。
3. 单击“批量选择”。菜单项列表将显示复选框。
4.勾选要删除的菜单项（页面）。显示已选中的已删除项目的列表。

5.单击“删除所选项目”。

创建子菜单

按着这些次序：
1. 登录 WordPress仪表盘。
2. 转到外观 > 菜单。显示菜单页面。
3. 拖放一个项目，使其稍微缩进地放置在父项目下方。
4.单击“保存菜单”。

向菜单添加自定义链接

可以使用自定义链接选项添加外部 URL、锚链接和占位符链接。

按着这些次序：
1. 登录WordPress仪表盘。
2. 转到外观 > 菜单。显示菜单页面。
3. 在添加菜单项面板下，展开自定义链接。
4.输入以下内容：

URL – 点击时打开的链接。

链接文本– 应出现在菜单上的文本。

5.单击“添加到菜单”。

6.单击“保存菜单”。

将博客类别添加到菜单

可以从类别中指定博客存档类别。
1. 登录 WP Admin。
2. 转到外观 > 菜单。显示菜单页面。
3. 在添加菜单项面板下，展开类别。
4.选择所需的类别。

5.单击“添加到菜单”。

6.单击“保存更改”。

管理菜单位置

主题可以支持多个菜单位置。这意味着可以创建多个菜单并将它们分配到网站上的不同位置。

按着这些次序：
1. 登录 WordPress仪表盘。
2. 进入外观 > 菜单。显示菜单页面。
3. 单击“管理位置”。
4. 将菜单分配到主题位置下出现的不同位置。
位置的数量可以根据使用的主题而改变。

5.单击“保存更改”。

查看菜单

按着这些次序：
1. 登录WordPress仪表盘。
2. 将鼠标悬停在站点名称上。
3. 单击“访问网站”。
您的网站显示了可用的菜单。
July 26, 2024
详细教程：如何在 WordPress 中隐藏或设置子类别的样式
如何在 WordPress 中隐藏或设置子类别的样式

你想在 WordPress 中隐藏子类别，或者设置它们的样式以便您的类别列表更易于阅读吗？在 WordPress 中，你的帖子可以分为不同的类别和子类别。这有助于导航和搜索引擎优化，但一长串子类别在你的网站上并不总是看起来很好。

在本教程中，将向你展示如何使用代码片段隐藏子类别并更改其样式。

为什么在 WordPress 中使用子类别？

当你为 WordPress 网站撰写帖子时，可以使用类别和标签来组织它们。当你正确分类内容时，可以提高你的搜索引擎优化（SEO），这将为你的网站带来更多流量。

组织你的帖子还可以改善你网站的导航，以便访问者可以更轻松地找到他们正在寻找的内容。当你的网站结构变得更加复杂时，甚至可以创建子类别。

例如，旅游博客可能有一个关于美国观光目的地的类别。随着内容的增长，为芝加哥、洛杉矶和纽约等城市创建子类别可能是有意义的。

如果在WordPress 小部件中显示类别，则可以使用平面列表或层次结构。以下是每个选项在我们的演示网站上的外观：

子类别可以显示在分层列表中

可以通过访问WordPress 仪表板上的外观→小部件并选中类别小部件上的“显示层次结构”框来完成此操作。

无论选择哪个选项，该列表最终都会变得很长且难以管理，并且在你的WordPress 网站上看起来也不会很好。

如何使用 CSS 在 WordPress 中隐藏子类别

我们使用 CSS 代码片段来隐藏子类别并设置其样式。可以将代码片段直接添加到主题的 style.css 文件、代码片段插件（如WPCode）中，或者使用WordPress 仪表板中的主题定制器添加它们。

添加 CSS 对于初学者来说可能很棘手，犯一个错误可能会破坏你的 WordPress 网站。

让我们看看如何在 WordPress 中隐藏子类别。

隐藏子类别的步骤

需要复制以下代码并将其粘贴到主题的 style.css 文件、代码片段插件或 WordPress 主题定制器中：
```
.children { display: none; }
```
- 使用主题定制器隐藏子类别
要使用主题定制器，您首先需要导航到“外观”»“自定义”

然后单击列表底部的“其他 CSS”。之后，只需粘贴代码，然后单击“发布”按钮即可。

现在可以访问你的 WordPress 网站以确保子类别已隐藏。以下是测试网站的前后截图：

隐藏子类别前、后：

这看起来更干净，但现在你的访问者看不到子类别。可能想查看我们的指南，了解如何在 WordPress 类别页面上显示子类别。

如果这样做，那么当的访问者单击“美国”类别时，他们将在该页面上看到子类别的链接，例如芝加哥、洛杉矶和纽约市。

如何使用 CSS 在 WordPress 中设置子类别的样式

还可以使用 CSS 自定义类别和子类别的外观。这将取决于自己对 CSS 的了解以及您希望对它们在当前主题中的外观进行哪些更改。

设置子类别样式的步骤

更改子类别的样式与隐藏它们的过程相同。需要复制下面的代码并将其粘贴到 style.css、WPCode 插件或 WordPress 主题定制器中：
```
.children {
    padding: 0 0 0 5px;
    margin: 0 0 0 2px;
    border-left: 1px solid #333;
}
```
使用主题定制器设置子类别样式

如果使用主题定制器，单击“发布”按钮。

完成后，可以访问你的 WordPress 网站来预览更改。

还可以使用 CSS 来设置 WordPress 主题的其它元素的样式。例如，可以使用 CSS 为各个类别设置不同的样式。

结论

在 WordPress 中隐藏或设置子类别的样式可以帮助你保持网站的整洁和易于导航。通过使用简单的 CSS 代码片段，可以轻松地控制子类别的显示方式。
July 2, 2024