內容簡介
這是一個輕量級的手風琴 WordPress 外掛，可以使用 Gutenberg 區塊或經典編輯器中的簡短代碼，在文章中添加可折疊元素。通過使用 details HTML 標籤和幾行 CSS，可以實現無需使用 Javascript 的手風琴，從而最大程度地減少頁面加載時間。
極輕量級 (<1kb)：插件不使用 Javascript，而是使用 native details HTML 標籤和幾行代碼，對前端影響極小。
可自定義：選項包括自訂用於手風琴標題的 HTML 標籤、默認開啟、順序和顏色。
簡短代碼使用範例
以下是使用手風琴外掛的幾個簡短代碼範例。
[lightweight-accordion title="My Accordion"]My Content[/lightweight-accordion]
此外，您可以使用 accordion_open 選項，在加載時顯示打開手風琴。
[lightweight-accordion title="My Accordion" accordion_open=true]My Content[/lightweight-accordion]
您還可以使用 title_tag 選項更改手風琴標題的 HTML 標籤。
[lightweight-accordion title="My Accordion" title_tag="h3"]My Content[/lightweight-accordion]
如果您想包含 FAQ 模式，可以添加 schema 選項並將其設置為 faq。
[lightweight-accordion title="What is your return policy?" schema="faq"]You have 1 week to return your items[/lightweight-accordion]
如果您想在手風琴內容周圍加上邊框，可以使用 "bordered" 屬性。
[lightweight-accordion title="Bordered Content" bordered=true]My Content[/lightweight-accordion]
簡短代碼選項
以下是簡短代碼選項的完整列表。當使用 Gutenberg 區塊時，所有這些選項都可訪問。
title（必填默認：null）手風琴的標題將顯示在頂部，供用戶點擊。一個好的例子是包含用戶的問題，以便他們可以點擊瞭解更多細節。
content（必填默認：null）將放入手風琴元素的內容。
title_tag（默認值：“span”）設置包裹手風琴摘要中標題的 HTML 標籤。如果您想將其設置為 SEO 目的，可以將其設置為標題標籤。
accordion_open（默認值：false）如果要默認打開手風琴，請設置為 true。
bordered（默認值：false）如果要在手風琴內容周圍放置邊框，請將其設置為 true。
title_text_color（默認值：false）將其設置為十六進制值或 CSS 顏色，以更改手風琴標題文本的顏色。
title_background_color（默認值：false）將其設置為十六進制值或 CSS 顏色，以更改手風琴標題文本的顏色。
schema（默認值：false）如果您想要包含 FAQ 模式，請將其設置為 faq。
class（默認值：false）用於向父容器添加自定义類。
anchor（默認值：null）將值添加為手風琴 div 的 ID，作為錨點。
autop（默認值：true）默認情況下，簡短代碼將使用 ‘p’ 標記封裝文本。 如果要在特定手風琴中禁用此選項，請將其設置為 false。
其他細節
如果要從網站中取消 "lightweight-accordion.css" 的引用，請使用以下過濾器。如果使用此過濾器，建議您自己設計手風琴樣式。
add_filter('lightweight_accordion_include_frontend_stylesheet', '__return_false' );
如果要從 WordPress 設定中刪除 "lightweight-accordion/edit
外掛標籤
開發者團隊
📦 歷史版本下載
原文外掛簡介
Lightweight Accordion plugin for WordPress allows you to add collapse elements to posts using a Gutenberg block or a shortcode (via classic editor). By using the details HTML tag and a few lines of CSS this allows for a javascript-free accordion for minimum page load.
Extremely Lightweight (<1kb): Without using Javascript the plugin uses the native details HTML tag and a few lines of code for almost no impact on front-end. Customizable: Options include customizing the HTML tag used for the accordion title, open by default, borders, colors, and accordion grouping (auto-close others when one opens). Shortcode Usage examples Here are a few examples of using the accordion plugin with shortcodes. [lightweight-accordion title="My Accordion"]My Content[/lightweight-accordion] Additionally you can display the accordion open on load with the accordion_open option. [lightweight-accordion title="My Accordion" accordion_open=true]My Content[/lightweight-accordion] You can also change the html tag wrapping the title of the accordion using the title_tag option. [lightweight-accordion title="My Accordion" title_tag="h3"]My Content[/lightweight-accordion] If you want to include FAQ schema you can add the schema option and set it to faq. [lightweight-accordion title="What is your return policy?" schema="faq"]You have 1 week to return your items[/lightweight-accordion] If you’d like put a border around the content of the accordion you can use the “bordered” attribute. [lightweight-accordion title="Bordered Content" bordered=true]My Content[/lightweight-accordion] If you want accordions to auto-close when another opens (exclusive accordion), use the “group” attribute with the same value on each accordion. [lightweight-accordion title="Question 1" group="faq"]Answer 1[/lightweight-accordion] [lightweight-accordion title="Question 2" group="faq"]Answer 2[/lightweight-accordion] [lightweight-accordion title="Question 3" group="faq"]Answer 3[/lightweight-accordion] Shortcode Options Here is the full listing of shortcode options. Additionally all of these options are accessible when using the Gutenberg block. title (Required Default: null) The title of your accordion will be displayed at the top for users to click. A good example would be to include a user’s question so they could click it for more details. content (Required Default: null) Content that will go into your accordion element. title_tag (Default: “span”) This sets the html tag that wraps the title in the accordion summary. Useful if you want to make it a heading tag for SEO purposes. accordion_open (Default: false) Set this to true if you want your accordion to be open by default. bordered (Default: false) Set this to true if you want a border around the accordion content. title_text_color (Default: false) Set this to a hex value or CSS color to change the color of the accordion title text. title_background_color (Default: false) Set this to a hex value or CSS color to change the color of the accordion title text. schema (Default: false) Set this to faq if you’d like FAQ schema to be included. class (Default: false) Used to add a custom class to the parent container of the accordion. anchor (Default: null) Adds the value as an ID to the accordion div as an anchor. autop (Default: true) By default the shortcode will wrap text in a ‘p’ tag. Set this to false if you’d like this disabled for the specific accordion. group (Default: false) Set this to a group name to make accordions with the same group auto-close when another opens. Uses the native HTML details name attribute for zero JavaScript overhead. Additional Details If you’d like to remove the “lightweight-accordion.css” from being enqueued on your site use the filter below. It’s recommend you style the accordion yourself if you use this filter. add_filter('lightweight_accordion_include_frontend_stylesheet', '__return_false' ); If you’d like to remove the “lightweight-accordion/editor-styles.css” from being enqueued in the admin area of your site you can use the filter below. add_filter('lightweight_accordion_include_admin_stylesheet', '__return_false' ); If you’d like to remove processing of shortcodes in accordion content you can use this filter. add_filter('lightweight_accordion_process_shortcodes', '__return_false' ); If you’d like to use inline Microdata for FAQ schema you can use this filter. (Not recommended) add_filter('lightweight_accordion_output_microdata', '__return_true' ); If you’d like to force “lightweight-accordion.css” to load on all of your site you can use this filter. By default the plugin will detect if the block or shortcode is used and enqueue the CSS. add_filter('lightweight_accordion_always_include_frontend_stylesheet', '__return_true' );
