如何在WordPress中添加jQuery FAQ手風琴


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

什麼是手風琴?

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

手風琴菜單的常見問題解答

影片教學

訂閱WPBeginner

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

添加jQuery FAQ手風琴

在添加jQuery FAQ手風琴之前,需要確保您具有FAQ部分。 首先按照我們有關如何在WordPress中添加FAQ部分的教程開始,添加FAQ部分。

現在,讓我們繼續添加jQuery FAQ手風琴。 WordPress隨附jQuery庫,但是它沒有jquery主題。 我們將從Google CDN加載該腳本,並將這些腳本排入WordPress。 我們還將創建一個顯示我們常見問題的簡碼。 最重要的是,我們將通過創建WordPress插件來完成所有這些工作。

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

 10,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'question',
));
	
// Generating Output 
$faq  .= '
'; //Open the container foreach ( $posts as $post ) { // Generate the markup for each Question $faq .= sprintf(('

%1$s

%2$s
'), $post->post_title, wpautop($post->post_content) ); } $faq .= '
'; //Close the container return $faq; //Return the HTML. } add_shortcode('faq_accordion', 'accordion_shortcode');

將更改保存到該文件後,打開一個新的空白文件。 另存為 accordion.js。 接下來,將此代碼粘貼到其中並保存文件:

jQuery(document).ready(function() {
jQuery("#accordion").accordion();
})();

現在我們已經可以上傳插件了。 打開FTP客戶端,然後將my-accordion文件夾上載到WordPress網站中的/ wp-contnt / plugins /目錄。 接下來,您需要通過轉到WordPress管理區域中的插件屏幕來激活插件。

用手風琴添加一個FAQ頁面

要以手風琴格式顯示這些常見問題,您需要創建一個新頁面。 去 頁»添加新。 給頁面起一個標題,例如常見問題解答,並在頁面編輯區域中輸入以下短代碼:

[faq_accordion]

保存並發布您的頁面,然後對其進行預覽。 您會在一個漂亮的手風琴菜單中看到您的FAQ。

改變手風琴的樣式和顏色

對於顏色和样式,此FAQ手風琴使用Google託管的jQuery UI主題。 它基本上是樣式表,如果願意,可以下載並將其放在您自己的網站上。 jQuery網站上有一個jQuery UI主題部分,其中有幾個隨時可以使用的主題。 如您所見,我們在插件中使用了人性化主題。 您可以將其替換為任何可用的主題,例如平滑度,cupertino等。也可以在Themeroller上創建或修改這些主題。

jQuery UI主題

我們希望本文能幫助您在WordPress網站上添加jQuery FAQ手風琴。 對於反饋和問題,請在下面發表評論。