最近，我們的一位用戶詢問我們是否有辦法在他們的 wordpress 網站上添加常見問題解答手風琴。有許多插件可讓您在 wordpress 中添加常見問題或常見問題解答部分。在本文中，我們將向您展示如何在 wordpress 網站中添加 jquery faq 手風琴。

什么是手風琴？

在網頁設計中，手風琴是一個用于用戶界面設計模式的術語，該模式具有在用戶交互時折疊或展開的選項卡或內容塊。每個選項卡下方都有內容，當用戶單擊菜單項時，這些內容會展開。簡單來說，它就像一個菜單，點擊它就會展開。我們在免費的 wordpress 博客設置頁面上使用了類似的效果。下面是手風琴示例的屏幕截圖。

視頻教程

https://www.youtube.com/embed/xwC8wgKyjVw?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent訂閱 WPBeginner

https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-Static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com

如果您不喜歡該視頻或需要更多說明，請繼續閱讀。

添加 jquery FAQ Accordion

在添加 jQuery FAQ 手風琴之前，您需要確保您有 FAQ 部分。首先按照我們有關如何在 WordPress 中添加常見問題解答部分的教程添加常見問題解答部分。

現在讓我們繼續添加 jQuery FAQ 手風琴。WordPress 附帶 jQuery 庫，但沒有 jquery 主題。我們將從 Google CDN 加載該腳本并在 WordPress 中對這些腳本進行排隊。我們還將創建一個短代碼來顯示我們的常見問題。最重要的是，我們將通過創建 WordPress 插件來完成這一切。

在桌面上創建一個文件夾并將其命名為 my-accordion。打開記事本或您選擇的任何其他文本編輯器。創建一個名為的文件my-accordion.php并將以下代碼粘貼到其中：