在文章中:什么是 Breadcrumb NavXT 插件|怎么样设置Breadcrumb NavXT|GeneratePress 中怎么样设置Breadcrumb NavXT|在首页不显示导航|隐藏超长导航文本
什么是 Breadcrumb NavXT 插件
Breadcrumb NavXT 是一个流行的WordPress插件,它为网站提供了面包屑导航功能。面包屑导航是一种用户界面,可以帮助用户理解和探索网站的层次结构。它在用户浏览网页时显示当前页面在网站结构中的确切位置,并提供了返回上级页面的链接。以下是 Breadcrumb NavXT 插件的一些主要特点:
易用性
- 易于安装和激活: 插件通过标准的WordPress插件安装过程轻松集成到您的网站中。
- 自动化: 一旦激活,它通常会自动为您的页面生成面包屑路径。
高度可定制
- 自定义模板: 该插件允许您使用模板标签和CSS样式来自定义面包屑的外观和布局。
- 多语言支持: 支持本地化和国际化,让不同语言的用户也能使用面包屑导航。
SEO友好
- 搜索引擎优化: 面包屑导航能够增强网站的内链结构,对提升搜索引擎排名有正面影响。
- 符合标准: 默认情况下,面包屑输出遵循Rich Snippet标准,这意味着搜索引擎能够识别并在搜索结果中以更加友好的方式展示它们。
灵活性
- 可扩展: 开发者可以利用钩子和过滤器扩展插件的功能。
- 适配性: 与大多数主题和其它插件兼容,且可以在各种类型的WordPress页面上工作,包括:文章、页面、归档页等。
维护和支持
- 定期更新: 插件作者会定期更新 Breadcrumb NavXT,修补 bug 和改进功能。
- 文档丰富: 提供详尽的在线文档和教程,帮助用户配置和自定义面包屑。
总而言之,Breadcrumb NavXT 是一个功能强大、灵活、且易于使用的 WordPress 插件,它能够有效地为您的网站添加SEO友好的面包屑导航功能,并通过提升用户体验和网站结构,有助于提高网站的整体质量和搜索引擎排名。
怎么样设置Breadcrumb NavXT
Breadcrumb NavXT 是一款流行的 WordPress 插件,用于在网站上创建和显示面包屑导航。配置它可以帮助用户了解他们在网站上的位置,并能够轻松导航到前一个页面。以下是如何配置 Breadcrumb NavXT 插件的基本步骤:
安装 Breadcrumb NavXT
- 登录您的 WordPress 后台。
- 在左侧导航菜单中选择“插件”>“添加新”。
- 在搜索框中输入
Breadcrumb NavXT
并按 Enter 键进行搜索。 - 找到 Breadcrumb NavXT 插件,点击“立即安装”按钮。
- 安装完成后,点击“激活”插件。
配置 Breadcrumb NavXT 设置
一旦你安装并激活了 Breadcrumb NavXT 插件,你可以按以下步骤配置设置:
- 访问设置
在左侧导航菜单中,找到并点击“设置”,然后选择“Breadcrumb NavXT”选项。 - 常规设置
这里可以设置一些基础选项,包括面包屑在不同页面类型的显示方式(如首页、文章、页面、分类等)。你可以选择分隔符、包裹代码等。
- Home Template: 设置首页面包屑的格式。
- Blog Template: 设置博客页面的面包屑格式。
- Post Type Templates: 对各种文章类型(页面、文章等)的面包屑格式进行个性化设定。
- Taxonomy Templates: 针对分类法(类别、标签等)的面包屑格式进行调整。
- Author Template: 设置作者页面面包屑的格式。
- Archive Template: 设置存档页面(如年度、月度归档)的面包屑格式。
- Search Template: 设置搜索结果页面面包屑的格式。
- 高级设置
这部分涉及更复杂的自定义,例如控制面包屑链接的行为、包裹元素以及面包屑的长度等。
- Max Title Length: 控制标题在面包屑中显示的最大字符数。
- Current Item Linked: 决定当前项目是否应该是一个链接。
- Link Current Item: 如果启用此选项,当前查看的项目将成为可点击的链接。
- Use paged display format: 当内容分页时,是否展示分页信息。
- 插入面包屑
通常情况下,你需要将面包屑代码手动插入到主题文件中。这通常在 header.php、single.php、page.php 或 archive.php 文件的合适位置添加如下函数:
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
也可以利用短码 [bcn_display]
将面包屑放置在页面或文章内容中。
保存设置
每次更改设置后,请确保点击页面底部的“保存更改”按钮来更新设置。
进行测试
完成设置后,访问网站的前端,浏览不同的页面以确保面包屑导航显示正确并且符合您的预期。
请注意,Breadcrumb NavXT 的具体选项可能会随着版本的更新而发生变化,因此以上信息是基于截至本知识更新日期内的版本。建议查阅插件的官方文档以获取最新的详细信息和高级配置。
GeneratePress 中怎么样设置Breadcrumb NavXT
如果您使用的是 GeneratePress 主题,并且拥有 Pro 版本,那么您可以通过 GeneratePress 的 “Elements” 模块轻松地添加和管理面包屑导航。您不需要直接编辑主题文件。请按照以下步骤操作:
创建新元素
- 在 WordPress 后台,转到 “外观” > “GeneratePress”。
- 确保 “Elements” 模块已被激活。如果没有,请激活它。
- 转到 “外观” > “Elements”,然后点击顶部的 “添加新” 按钮来创建一个新元素。
- 选择 “Hook” 作为元素类型。
配置元素
- 在 “钩子(Hook)” 下拉菜单中,选择将面包屑放置在页面上的适当位置。例如,
generate_before_content
、generate_after_header
或其他根据您站点布局合适的钩子。 - 在内容区域,输入以下代码:
<?php if (!is_front_page() && function_exists('bcn_display')) : ?>
<div class="breadcrumbs">
<?php bcn_display(); ?>
</div>
<?php endif; ?>
这段代码会调用 Breadcrumb NavXT 插件的函数 bcn_display()
来显示面包屑,并且将其包裹在带有 breadcrumbs
类的 <div>
标签中。
- 如果需要,您可以在 “Display Rules” 区域设置元素应该显示在哪些页面上(比如所有页面、所有文章、特定分类等)。
- 您还可以选择是否排除某些页面或者对特定用户角色隐藏此元素。
- 一定要勾选 execute php。
- 当一切配置好之后,点击发布按钮。
现在您应该在网站的前端看到 GeneratePress 主题使用 Elements 模块正确放置且样式化的面包屑导航。
在首页不显示导航
要实现在首页不显示面包屑导航,而在其他页面显示,并且带有 “首页 -> 类目 -> …” 这样的结构,您可以通过条件语句来控制 bcn_display()
函数的调用。以下是在 GeneratePress 主题的 Elements 模块中设置的步骤:
- 在 WordPress 后台,转到 “外观” > “Elements”。
- 点击“添加新”,创建一个新的“Hook”元素。
- 在内容编辑框中输入以下代码:
<?php if (!is_front_page() && function_exists('bcn_display')) : ?>
<div class="breadcrumbs">
<?php bcn_display(); ?>
</div>
<?php endif; ?>
这段 PHP 代码检查当前页面是否不是首页(!is_front_page()
)。如果不是首页并且 Breadcrumb NavXT 的 bcn_display()
函数存在,那么它将输出面包屑导航。
- 在“钩子(Hook)”下拉菜单中选择一个合适的位置,例如
generate_before_content
,以在内容区域之前显示面包屑。 - 设置“Display Rules”。由于您不想在首页显示面包屑,因此您应该选择所有页面,但排除首页。在“Location”规则中选择“Entire Site”,然后在“Exclude”规则中选择“Front Page”。
- 完成设置后,点击“发布”或“更新”按钮保存元素。
一旦您保存并发布了这个元素,GeneratePress 将在全站的页面和文章上显示面包屑导航,但首页除外。您可以预览网站,确保面包屑按照预期工作。
请注意,具体的 Display Rules 配置取决于您的具体需要,如果您还想根据特定的条件进一步排除某些页面或文章类型,则需要在 Display Rules 中进行相应的调整。
怎么样隐藏超长的导航
有的导航文本超长了,只让他显示部分,用如下的代码
.breadcrumbs {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #757575;
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
line-height: 18px;
text-transform: uppercase;
}
.breadcrumbs{
margin-top:20px;
}
.breadcrumbs p {
margin: 0;
max-width: 100%;
max-width: 411px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}