如何將排名數學常見問題解答塊轉換為手風琴？ 簡易指南。 [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 主題中添加作者框。 [沒有附加插件。]