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

什么是手風(fēng)琴？

在網(wǎng)頁(yè)設(shè)計(jì)中，手風(fēng)琴是一個(gè)用于用戶界面設(shè)計(jì)模式的術(shù)語(yǔ)，該模式具有在用戶交互時(shí)折疊或展開的選項(xiàng)卡或內(nèi)容塊。每個(gè)選項(xiàng)卡下方都有內(nèi)容，當(dāng)用戶單擊菜單項(xiàng)時(shí)，這些內(nèi)容會(huì)展開。簡(jiǎn)單來說，它就像一個(gè)菜單，點(diǎn)擊它就會(huì)展開。我們?cè)诿赓M(fèi)的 wordpress 博客設(shè)置頁(yè)面上使用了類似的效果。下面是手風(fēng)琴示例的屏幕截圖。

視頻教程

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

如果您不喜歡該視頻或需要更多說明，請(qǐng)繼續(xù)閱讀。

添加 jquery FAQ Accordion

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

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

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