[WordPress] 外掛分享： Good Accordion

WordPress 外掛 Good Accordion 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Good Accordion」是 2025-04-04 上架。
  • 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
  • 上一次更新是 2025-04-14，距離現在已有 19 天。
  • 外掛最低要求 WordPress 6.7 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

duijvelshoff |

外掛標籤

faq | Accordion |

內容簡介

摺疊式手風琴外掛總結：


  • 提供 2 個區塊：手風琴和手風琴面板，簡單易用的摺疊式外掛。

  • 拖曳手風琴區塊到文章、頁面或自訂文章類型，並點擊「新增面板」按鈕，隨需添加面板。

  • 功能包括：


    • 設定為「同一時間僅打開一個」，可讓所有面板同時打開。

    • 使用 Tab 鍵聚焦面板，按 Enter 鍵打開。

    • 當前面板關閉時，下一個面板會滾動進入視圖。

    • 在區塊編輯器中調整顏色、邊距和填充。

    • 透過 CSS、CSS 變數或 theme.json 進行樣式設定。


問題與答案：




  • 如何新增摺疊式手風琴區塊？


    將手風琴區塊拖曳至文章、頁面或自訂文章類型中，然後在區塊底部點擊「新增面板」按鈕以添加面板區塊。




  • 如何自訂外觀樣式？


    在區塊編輯器中，可以調整面板的顏色、邊距和填充。此外，也可以透過 CSS、CSS 變數或 theme.json 進行樣式設定。




  • 如何設定使每次只能打開一個面板？


    在設定中選擇「同一時間僅打開一個」，這樣在摺疊式手風琴中只有一個面板可以同時打開，取消勾選以允許所有面板同時打開。



原文外掛簡介

Simple and good accordion plugin providing 2 blocks: Accordion and Accordion-pane. Drag an Accordion block into your post, page or custom post type and hit the ‘Add pane’ button for as often as you need.
Features:

Setting for ‘One at a time’. Only one pane within an accordion can be opened. Uncheck this to allow for all panes to be opened simultaneously.
Use ‘Tab’ key to focus panes and hit ‘Enter’ to open
Panes scroll into view when a previous pane gets closed
Adjust colors, margins and padding in the block editor
Add styling via css, css-vars or theme.json

Use
Drag an Accordion block into a post or page or CPT and use the ‘Add pane’ button at the bottom of the block to add pane-blocks.
styling
At the root some basic styling variables are defined that can be overwritten by your theme. Some of these can be changed ad hoc by the user in de block-editor. These are:
--wp--custom--accordion--transition-time: 0.1s;
--wp--custom--accordion--margin-top: 0px;
--wp--custom--accordion--margin-right: 0px;
--wp--custom--accordion--margin-bottom: 0.1em;
--wp--custom--accordion--margin-left: 0px;
--wp--custom--accordion--padding-top: 0.5em;
--wp--custom--accordion--padding-right: 2em;
--wp--custom--accordion--padding-bottom: 0.5em;
--wp--custom--accordion--padding-left: 2em;
--wp--custom--accordion--header--text-color: #ffffff;
--wp--custom--accordion--header--background-color: #666666;
--wp--custom--accordion--header--active-text-color: #ffffff;
--wp--custom--accordion--header--active-background-color: #999999;
--wp--custom--accordion--body--text-color: #ffffff;
--wp--custom--accordion--body--background-color: #666666;

The default values can also be defined in the theme.json of your (child-) theme:
Add them to the theme.json like so:
{
"$schema": "https://schemas.wp.org/wp/6.7/theme.json",
"version": 3,
"settings": {
"custom": {
"accordion": {
"transitionTime": "0.1s",
"marginTop": "0px",
"marginRight": "0px",
"marginBottom": "0.1em",
"marginLeft": "0px",
"paddingTop": "0.5em",
"paddingRight": "2em",
"paddingBottom": "0.5em",
"paddingLeft": "2em",
"headerTextColor": "#ffffff",
"headerBackgroundColor" : "#666666",
"activeHeaderTextColor": "#ffffff"
"activeHeaderBackgroundColor": "#999999",
"bodyTextColor": "#000000",
"bodyBackgroundColor" : "#ffffff",
}
}
}
}

Accessability

The pane-headers have a tab-index. If the Enter-key is pressed while a pane-header has focus, a click-event is triggered on that pane-header thereby activating / opening it.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Good Accordion」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0.0 | 1.0.1 | 1.0.2 | trunk |

延伸相關外掛（你可能也想知道）

文章
Filter
Apply Filters
Close
Mastodon