RankMathを使用してWordPressにパンくずナビゲーションを実装し、カスタマイズする方法の完全チュートリアル

をインストールした場合RankMath SEO插件，你可以使用它提供的面包屑（パン粉）功能。免费版的RankMath SEO通常是通过短码来实现面包屑功能，而RankMath SEO Pro版本则提供集成到Elementor的面包屑元素，允许你通过Elementor编辑它的外观。本文将详细介绍RankMath面包屑的使用教程，帮助你在网站中更好地实现和定制面包屑导航。

RankMath面包屑设置详解

在使用之前，我们先来了解一下RankMath SEO插件中面包屑的设置选项。你可以在RankMath SEO插件的【一般設定】中找到面包屑设置选项。

步骤一：开启面包屑功能

首先，确保面包屑功能处于开启状态：

1. 进入RankMath SEO的【一般設定】。

2. 找到面包屑设置选项，并将其设置为开启状态。

步骤二：设置面包屑分隔符

分隔符用于在面包屑各级之间进行分隔。根据自己的喜好设置分隔符，可以在文本框中自定义。

步骤三：设置首页标签和首页链接地址

首页标签和首页链接地址选项通常保持默认设置，但如果你需要修改，可以进行编辑。不过，建议不要修改首页链接地址，以免影响导航。

步骤四：设置面包屑前缀

如果你想在面包屑前添加图标或其它元素これは前缀设置中进行操作。

步骤五：设置归档格式、搜索结果格式、404标签选项

这些选项用于设置在归档、搜索结果和404页面中面包屑的显示内容，通常使用默认设置即可，但你可以根据需要进行自定义。

步骤六：隐藏Post标题

此选项会隐藏页面、文章和产品的名称，不建议开启。

步骤七：显示分类选项

开启此选项后，面包屑中会显示分类名称，建议开启以体现层级关系。

步骤八：隐藏分类法选项

开启此选项会隐藏分类法的名称，建议开启以精简面包屑。

完成以上设置后，记得保存所有修改。

RankMath SEO免费版面包屑使用教程

1、通过短码实现面包屑功能

RankMath SEO的免费版本提供面包屑功能，你可以在【一般設定】中进行设置，并通过代码或短码调用面包屑元素。

在Elementor编辑器中，使用ShortCode元素将短码粘贴到你希望显示面包屑的位置：

RankMath SEO面包屑的短码通常如下：

[rank_math_breadcrumb]

粘贴此短码到Elementor的ShortCode元素中即可。

2、自定义面包屑样式

通过短码添加的面包屑默认跟随主题的颜色和字体风格。如果你想自定义样式，可以通过CSS代码实现。以下是一个示例代码：

/*修改面包屑中链接的颜色和字体风格*/
selector.rank-math-breadcrumb a{
    color: #ffdc11;
    font-size: 16px;
}

/*修改面包屑中分隔符的颜色和字体风格*/
selector.rank-math-breadcrumb .separator{
    color: #ffffff;
    font-size: 20px;
}

/*修改面包屑中最后的内容标题文本的颜色和字体风格*/
selector.rank-math-breadcrumb .last{
    color: #ffffff;
    font-size: 16px;
}

将上述代码粘贴到Elementor ShortCode元素的Advanced设置中。

3、全局应用CSS样式

如果希望在整个网站应用相同的样式，可以将代码放在网站【外装状態】-【カスタマイズ】-【カスタムコード】中，去掉代码前的selector以下のように：

/*修改面包屑中链接的颜色和字体风格*/
.rank-math-breadcrumb a{
    color: #ffdc11;
    font-size: 16px;
}

/*修改面包屑中分隔符的颜色和字体风格*/
.rank-math-breadcrumb .separator{
    color: #ffffff;
    font-size: 20px;
}

/*修改面包屑中最后的内容标题文本的颜色和字体风格*/
.rank-math-breadcrumb .last{
    color: #ffffff;
    font-size: 16px;
}

RankMath SEO Pro版面包屑使用教程

集成到Elementor中的面包屑元素

RankMath SEO Pro版本提供了更为便捷的面包屑元素集成。首先，确保在你的网站中安装好RankMath SEO Pro插件。

• 在Elementor的元素库中找到RankMath SEO面包屑元素，将其拖拽到页面中需要显示面包屑的位置。
• 在Breadcrumbs元素的Content设置中，可以调整元素居中并修改HTML标签。
• 在Style设置中，你可以修改面包屑的字体、文字颜色、链接颜色以及链接悬停颜色。

よくある質問

为什么Enable breadcrumbs function选项是灰色的？

这是因为你的主题启用了对RankMath breadcrumb的支持，例如アストラのテーマ会强制开启RankMath SEO的面包屑功能。这种情况并不影响面包屑的使用，只是设置选项无法修改。无需担心或进行额外处理。

通过以上教程，你应该能在自己的网站中成功配置并自定义RankMath SEO的面包屑功能，不论是免费版还是Pro版本，都能满足你的网站需求。