如何在 WordPress 中添加手風琴（分步指南）

您是否在 WordPress 網站上設計登錄頁面、產品頁面或常見問題解答頁面？ 然後你應該在你的頁面設計中使用手風琴。

手風琴有助於使網站更易於瀏覽並改善用戶體驗。 它們還有助於減少混亂並縮短超長網頁。

在這個分步指南中，我們將向您展示如何在您的網站上製作手風琴部分，而無需編寫任何代碼。

使用 WordPress 的一個好處是您可以使用一個簡單的插件向您的網站添加令人驚嘆的功能，例如手風琴。 在本指南中，我們使用 Heroic 常見問題解答，只需單擊幾下即可創建手風琴部分。

我們將逐步引導您完成整個過程。 讓我們開始吧！

創建常見問題部分 - 簡單的方法！

建立一個常見問題解答並幫助回答常見的訪客問題。

獲取插件

什麼是手風琴？

手風琴是一種非常有用的設計策略，用於網頁設計中，用於在一個地方組織多個內容部分。 簡而言之，手風琴允許您在頁面設計上創建一個帶有可折疊選項卡的部分，以將大量內容打包到一個部分中。

例如，如果您正在製作一個常見問題 (FAQ) 部分，您可以使用手風琴來整齊地組織問題和答案。 這樣您就可以只顯示問題並將答案隱藏在可折疊的手風琴中。 它將允許您在頁面設計上節省空間，並為用戶提供一種更簡單的方式來探索答案。

看看 Tesco 如何使用手風琴來組織他們的 FAQs 頁面。

過去，網站也使用水平標籤手風琴。 但它們今天很少用於網站設計。

手風琴與切換之間的區別

大多數人經常將手風琴與切換混淆。 儘管它們看起來相似，但它們的行為卻不同。

例如，當用戶單擊手風琴上的標題時，它會查看其選項卡中的內容。 但是當他們單擊另一個標題時，前一個選項卡會關閉以查看新選項卡。

通過切換，您可以修改此行為以使選項卡保持打開狀態。 並允許用戶手動關閉標籤。

簡而言之，手風琴一次只打開一個標籤。 可以調整切換以查看一次打開的多個選項卡。

您不必擔心這兩個選項，因為我們用於在 WordPress 中設置手風琴的插件支持這兩個選項。

為什麼使用手風琴？

使用手風琴有很多好處。 以下是在您的網站上使用它們的幾個原因。

節省大量空間

您是否曾經訪問過一個長長的網頁，迫使您一直向下滾動才能找到您正在尋找的內容？ 幸運的是，手風琴解決了這個問題。

使用手風琴的主要好處是能夠節省網站空間。 您可以將所有重要信息隱藏在選項卡後面，而不是製作超長的頁面。 並讓用戶通過瀏覽標題找到問題和答案。

更好的內容組織

手風琴還允許您以用戶友好的結構組織內容。 使用手風琴，您可以嵌套選項卡以在類別和主題下組織內容。 您可以在我們之前向您展示的 Tesco 常見問題頁面上看到這一點。

嵌入任何地方

手風琴可以嵌入到您網站的任何位置。 例如，您可以在定價頁面或產品登錄頁面上添加常見問題手風琴部分。 這將允許您在不佔用太多空間的情況下回答有關您的產品的常見問題。

減小頁面大小

網頁的大小在網站的頁面加載速度中起著關鍵作用。 如您所知，頁面加載速度是谷歌使用的主要排名因素之一。

在 WordPress 網站中使用手風琴時，您可以大大提高網站頁面加載速度，因為它們可以作為小部件嵌入。

如何使用英雄常見問題解答添加手風琴

對於本教程，我們使用的是 Heroic FAQs WordPress 插件。 不僅僅是因為它是由我們自己的經驗豐富的開發人員團隊構建的。 主要是因為它是一個具有許多功能的插件。 並提供比其他插件更多的價值。

使用 Heroic FAQs 插件，您還可以為您的網站構建獨特的常見問題解答和知識部分。

現在，讓我們進入動手教程。

第 1 步：下載並安裝 Heroic 常見問題解答

首先，您需要在您的 WordPress 網站上下載並安裝 Heroic FAQs 插件。 購買插件後，您就可以從您的 Heroic 帳戶儀表板下載它。

然後，登錄到您的 WordPress 管理儀表板。 轉到插件>>添加新頁面並選擇上傳選項。 瀏覽您的計算機以找到下載的包含 Heroic FAQs 插件的 ZIP 文件並安裝它。

完成安裝後，請務必使用您的許可證密鑰激活您的插件。

第 2 步：創建常見問題解答組

Heroic FAQs 插件將指導您完成初始設置過程。 只需按照其說明進行操作。

通過創建一個常見問題組開始。 您的所有常見問題解答都將在此處進行分組和組織。

然後，您可以開始向該組添加常見問題解答。 這些可以是問題和答案。 或有關產品功能的詳細信息。 或者你想要的任何東西。

請記住，您可以根據需要添加任意數量的常見問題解答。

第 3 步：嵌入手風琴

現在您可以將您的常見問題解答組嵌入頁面或帖子中。 使用新的 Gutenberg 塊編輯器，使用 Heroic FAQs 添加手風琴要容易得多。

創建新頁面或編輯現有頁面。 添加一個新塊並蒐索Heroic FAQ內容塊。

從左側的英雄常見問題塊面板中，您可以選擇要在頁面上顯示的常見問題解答組。 以及改變手風琴設計的風格。

第 4 步：在 Accordion 和 Toggle 之間切換

借助 Heroic 常見問題解答，您只需單擊一下即可在手風琴和切換選項之間進行選擇。

第 5 步：預覽手風琴

預覽頁面以查看手風琴的外觀。 然後您可以點擊發布以保存更改。

綜上所述

您可以通過多種不同的方式利用手風琴來提高用戶參與度並為客戶提供更多價值。 使用我們的指南作為墊腳石，找到您自己獨特的方法來以其他有用的方式使用手風琴。

同時，請隨時瀏覽我們的博客以獲取更多提示。 您會發現我們最好的知識庫軟件比較很有幫助。