如何将排名数学常见问题解答块转换为手风琴？ 简易指南。 [2021]

在本文中，我将向您展示如何将 Rank Math FAQ 块转换为时尚的手风琴块。 您可以按照简单的步骤轻松做到这一点。

如您所知，Rank math SEO 插件具有将常见问题解答模式添加到 WordPress 的内置功能。 如果您在 WordPress 中使用 Gutenberg 或经典编辑器，则可以使用 RankMath Blocks 将常见问题解答添加到博客文章中。 但它有其自身的局限性，因为它不允许我们像大多数页面构建器那样设置常见问题解答的样式。

但是，RankMath FAQ 架构实现是 SEO 友好的，并且通过了 Google Rich 结果测试。

现在，您可以使用 Rank Math SEO 插件轻松添加常见问题解答模式，并帮助 Google 更好地了解您的内容。 它还可以帮助您在 Google、Bing 等搜索引擎的 SERP 的不同部分中排名。

那么，让我们学习如何将RankMath 的 SEO插件附带的结构化 FAQ 块变成可折叠的手风琴。

有两种方法可以实现这一目标。 一种是安装一个轻量级且简单的 WordPress 插件，其中包含为此所需的CSS 和 JS 。 或者您可以简单地将 CSS 和 JS 脚本添加到您当前的主题中。

如何在排名数学常见问题解答块中添加手风琴风格？

要将手风琴风格添加到您的 RankMath 的常见问题解答块中，请按照以下步骤操作。

1. 转到您的博客文章并从排名数学添加常见问题解答块。
2. 现在搜索一个名为“ Turn Rank Math FAQ Block to Accordion ”的插件
3. 现在激活这个插件，自动添加排名数学 SEO 中的手风琴风格。

注：该插件由“ WP How Know”开发，是一款非常轻量级的插件。 它包含将 RankMath 的 SEO 插件附带的结构化 FAQ 块转换为可折叠手风琴所需的基本CSS 和 JS 脚本。

现在，您的常规常见问题解答块从排名数学转换为漂亮的手风琴风格常见问题解答块，如下图所示。

对于那些不想手动将 CSS 和 JS 添加到主题以使常见问题解答部分时尚的人来说，这非常有用。

添加 Accordion 样式后，FAQ 块是否仍可索引？

是的，添加手风琴风格后它会非常好。 您可以在 Google 丰富结果测试中检查这一点。

是否可以更改此插件中的手风琴样式？

此插件没有任何其他样式，但您仍然可以使用自定义 CSS 更改此样式的外观。

您可以使用自定义 CSS 代码更改此插件生成的手风琴常见问题解答块的设计。 在这里，我稍微改变了风格。 [如特色图片所示]。

 #rank-math-faq .rank-math-list-item { border: 2px solid #F8F9F9; margin-bottom: 20px; background-color: #E5E8E8; } #rank-math-faq .rank-math-answer { margin: 0; padding: 12px; background-color: #F8F9F9; font-size: 16px!important; line-height: 1.4!important; border-bottom: 1px solid #dedee0; display: none; }

您需要将 CSS 代码粘贴到主题的Additional CSS部分或主题编辑器的 style.css 文件中。

您还可以通过更改上述 CSS 代码来更改背景颜色、宽度和边框等。

Rank Math FAQ 手风琴风格的视频指南

如何将 RankMath FAQ 模式块更改为带有可折叠标题的 FAQ 块？ [手动的]

对于那些不想添加额外插件的人，我有自定义 CSS 和 JS 文件。 但是手动方式的风格非常基础，不与插件的风格竞争。 这是为了在不增加加载速度压力的情况下获得更好的性能。

您可以在屏幕截图中查看此手动过程的最终结果。

让我们学习如何实现这一目标。 只需正确按照步骤操作即可。

第 1 步：在当前主题中添加 CSS。

在这里，您需要将以下 CSS 文件添加到您的主题附加 CSS部分或主题编辑器的 style.css 部分。

转到 WordPress仪表板 > 外观 > 自定义 > 附加 CSS > 粘贴代码并保存。

从这里复制 CSS 代码。

 #rank-math-faq .rank-math-list-item{ position:relative; } #rank-math-faq .rank-math-list-item input{ position: absolute; left: 0; top: 0; width: 100%; height: 41px; opacity: 0; cursor: pointer; z-index:999; } #rank-math-faq .rank-math-list-item h3 { background: #f1f2f6; padding: 10px 12px 10px 18px; cursor: pointer; font-size: 18px !important; font-weight: normal !important; position:relative; margin-bottom: 0; } #rank-math-faq .rank-math-list-item h3:before { display:inline-block; content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 12px; border-color: transparent transparent transparent #000000; margin-right: 8px; } #rank-math-faq .rank-math-list-item input:checked+h3:before { -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); } #rank-math-faq .rank-math-answer{ padding: 10px; max-height: 0; overflow:hidden; } #rank-math-faq .rank-math-list-item input:checked+h3~.rank-math-answer { max-height: 100vh; overflow:visible; } div.rank-math-list-item:hover > div.rank-math-answer { max-height: 100vh; overflow: visible; } #rank-math-faq .rank-math-answer { padding:0; }

Step-2 : 在主题编辑器中添加 JavaScript

现在您必须将 JavaScript 添加到您的主题编辑器中，以在 Rankmath FAQ 块中运行可折叠手风琴。

现在转到 WordPress 仪表板 >外观> 主题编辑器 > Functions.php > 粘贴以下脚本，如下所示。

复制 javascript 代码并粘贴到 function.php

 function faq_accordion_hook_javascript_footer() { ?> <script> jQuery(document).ready(function() { var faqBlock = jQuery("div#rank-math-faq"); var faqItems = faqBlock.find("div.rank-math-list-item"); faqItems.bind("click", function(event) { var answer = jQuery(this).find("div.rank-math-answer"); if (answer.css("overflow") == "hidden") { answer.css("overflow", "visible"); answer.css("max-height", "100vh"); } else { answer.css("overflow", "hidden"); answer.css("max-height", "0"); } }); }); </script> <?php } add_action('wp_footer', 'faq_accordion_hook_javascript_footer');

添加javascript后不要忘记保存代码。

现在您的RankMath 的结构化常见问题解答块自动转换为手风琴风格。 现在它将作为带有可折叠标题的常见问题解答块工作。

结论

本文讨论的第一种方法很容易将排名数学的 FAQ 块转换为可折叠的 Accordion 块。 但第二种方法有点手动，但加载速度比第一种方法快。

那么，您将采用哪种方法来设置您的 Rank Math FAQ 块的样式- 请在评论部分告诉我。

另外，不要忘记与使用排名数学添加常见问题的朋友分享这篇文章。

另请阅读：如何使用钩子元素在 GeneratePress 主题中添加作者框。 [没有附加插件。]