內容目錄
- 1 前言介紹
- 2 外掛協作開發者
- 3 外掛標籤
- 4 內容簡介
- 5 原文外掛簡介
- 6 instead of the default tag: [accordion-item title="Item title" tag="h2"]Item content[/accordion-item]. Using a tag attribute on an individual accordion item will override the global setting. The list of valid tags is: h1, h2, h3, h4, h5, h6, p, div. usebutons: You can now optionally wrap each accordion item title in a tag by adding usebuttons="true" to the main [accordion] shortcode. Please note that your theme may apply undesirable styles to tags by default. You may need to add more custom styles to override your themes default styles. Using this setting will produce this HTML output: Title of accordion item Drop-down content goes here. Second accordion item Drop-down content goes here. Filtering Shortcodes You can filter the settings and content of the shortcodes by adding some simply code to the functions.php file of your theme. For example, you could set the openfirst option for all accordions across the entire site using: add_filter('shortcode_atts_accordion', 'set_accordion_shortcode_defaults', 10, 3); function set_accordion_shortcode_defaults($atts) { // Override the openfirst setting here $atts['openfirst'] = true; return $atts; } Compatibility Mode If you have a theme that already includes the shortcodes [accordion] or [accordion-item] you can enable compatibility mode. To enable compatibility mode add define('AS_COMPATIBILITY', true); to your wp-config.php file. This will add a prefix of ‘as-‘ to the two accordion shortcodes. With compatibility mode enabled, make sure your shortcodes start with as- like this: [as-accordion]...[/as-accordion] and [as-accordion-item]...[/as-accordion-item]. Disable TinyMCE Buttons You can optionally disable the TinyMCE extension which will remove the buttons from the editor button bar. To disable the TinyMCE extension add define('AS_TINYMCE', false); to your wp-config.php file. Issues/Suggestions For bug reports or feature requests or if you’d like to contribute to the plugin you can check everything out on Github. 各版本下載點
- 7 延伸相關外掛（你可能也想知道）
前言介紹
- 這款 WordPress 外掛「Accordion Shortcodes」是 2013-12-29 上架。 目前已經下架不再更新，不建議安裝使用。
- 目前有 10000 個安裝啟用數。
- 上一次更新是 2019-03-29，距離現在已有 2227 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 3.3 以上版本才可以安裝。
- 有 68 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
Accordion | accordions | shortcodes | accordions plugin | Responsive accordions |
內容簡介
Accordion Shortcodes 是一個簡單的外掛，它添加了幾個簡短代碼，可在頁面中添加手風琴下拉菜單。手風琴將無縫融入主題中，但您可能希望編輯主題的樣式表以添加一些自定義樣式（如下所示的樣式表）。
功能
添加兩個代碼，在網站中添加手風琴菜單。
支持在單個頁面上使用個別設置的多個手風琴菜單。
在 TinyMCE 編輯器中添加兩個按鈕，可以輕鬆添加和配置手風琴下拉菜單。
響應式
沒有添加默認 CSS
僅在使用簡短代碼的頁面上添加 JavaScript
支持項目 ID 和直接鏈接
輔助功能良好，適用於需要使用制表鍵導航控制的用戶
可選功能
默認打開第一個手風琴項目
默認打開所有手風琴項目
禁用手風琴項目的自動關閉功能
通過再次點擊標題手動關閉項目
打開時將頁面滾動到標題處
設置標題元素的 HTML 標籤
更改手風琴的語義結構（高級）
簡短代碼
添加的兩個簡短代碼是：
[accordion]...[/accordion]
和
[accordion-item title=""]...[/accordion-item]
基本用法示例
[accordion]
[accordion-item title="手風琴項目標題"]下拉內容在此處。[/accordion-item]
[accordion-item title="第二個手風琴項目"]下拉內容在此處。[/accordion-item]
[/accordion]
這將輸出以下 HTML 代碼：
手風琴項目標題
下拉內容在此處。
第二個手風琴項目
下拉內容在此處。
樣式表示例
以下是一些示例 CSS，可以幫助您開始自訂手風琴的外觀和感覺。
/*手風琴樣式表*/
.accordion {
border-bottom: 1px solid #dbdbdb;
margin-bottom: 20px;
}
.accordion-title {
border-top: 1px solid #dbdbdb;
margin: 0;
padding: 20px 0;
cursor: pointer;
}
.accordion-title:hover {}
.accordion-title:first-child {border: none;}
.accordion-title.open {cursor: default;}
.accordion-content {padding-bottom: 20px;}
通過 ID 打開手風琴
您可以為每個手風琴項目添加唯一 ID，然後在 URL 中使用該 ID 默認打開該項目。例如，假設您有以下手風琴：
[accordion]
[accordion-item id="item-1" title="手風琴項目標題"]下拉內容在此處。[/accordion-item]
[accordion-item id="item-2" title="第二個手風琴項目"]下拉內容在此處。[/accordion-item]
[accordion-item id="item-3" title="第三個手風琴項目"]下拉內容在此處。[/accordion-item]
[/accordion]
您可以使用以下 URL 默認打開第三個項目：
http://yourdomain.com/your/path/#item-3
您只需確保 URL 中 # 後面的部分與手風琴項目上設置的 ID 相匹配即可。
廣告
原文外掛簡介
Accordion Shortcodes is a simple plugin that adds a few shortcodes for adding accordion drop-downs to your pages.
The accordions should blend seamlessly with your theme. However, you may want to edit your theme’s main stylesheet in order to add some custom styling (see below for sample CSS).
Features
Adds two shortcodes for adding accordions to your site
Supports multiple accordions with individual settings on a single page
Two buttons in the TinyMCE editor make it easy to add and configure the accordion shortcodes
Responsive
No default CSS added
Only adds JavaScript on pages that use the shortcodes
Support for item IDs and direct links
Accessible (for users requiring tabbed keyboard navigation control)
Optional Features
Open the first accordion item by default
Open all accordion items by default
Disable auto closing of accordion items
Manually close items by clicking the title again
Scroll page to title when it’s clicked open
Set the HTML tag for the title element
Change the semantic structure of your accordions (advanced)
The Shortcodes
The two shortcodes that are added are:
[accordion]...[/accordion]
and
[accordion-item title=""]...[/accordion-item]
Basic Usage Example
[accordion]
[accordion-item title="Title of accordion item"]Drop-down content goes here.[/accordion-item]
[accordion-item title="Second accordion item"]Drop-down content goes here.[/accordion-item]
[/accordion]
This will output the following HTML:
Title of accordion item
Second accordion item
Sample CSS
Here is some sample CSS to get you started if you want to customize the look and feel of the accordion.
/* Accordion Styles */
.accordion {
border-bottom: 1px solid #dbdbdb;
margin-bottom: 20px;
}
.accordion-title {
border-top: 1px solid #dbdbdb;
margin: 0;
padding: 20px 0;
cursor: pointer;
}
.accordion-title:hover {}
.accordion-title:first-child {border: none;}
.accordion-title.open {cursor: default;}
.accordion-content {padding-bottom: 20px;}
Opening an Accordion Via ID
You can optionally add a unique ID to each of your accordion items and then use that ID in the URL to open that item by default. For example, say you have the following accordions:
[accordion]
[accordion-item id="item-1" title="Title of accordion item"]Drop-down content goes here.[/accordion-item]
[accordion-item id="item-2" title="Second accordion item"]Drop-down content goes here.[/accordion-item]
[accordion-item id="item-3" title="A Third accordion"]Drop-down content goes here.[/accordion-item]
[/accordion]
You could use this URL to open the third item by default:
http://yourdomain.com/your/path/#item-3
All you need to do is ensure that the part after the # in the URL matches the ID set on the accordion item.
Advanced Accordion Settings
There are a few advanced settings you can add to the opening accordion shortcode. The full shortcode, with all the default settings looks like this:
[accordion autoclose="true" openfirst="false" openall="false" clicktoclose="false"]
autoclose: Sets whether accordion items close automatically when you open the next item. Set autoclose="true/false" on the opening accordion shortcode like this: [accordion autoclose="false"]. Default is true.
openfirst: Sets whether the first accordion item is open by default. This setting will be overridden if openall is set to true. Set openfirst="true/false" on the opening accordion shortcode like this: [accordion openfirst="true"]. Default is false.
openall: Sets whether all accordion items are open by default. It is recommended that this setting be used with clicktoclose. Set openall="true/false" on the opening accordion shortcode like this: [accordion openall="true"]. Default is false.
clicktoclose: Sets whether clicking an open title closes it. Set clicktoclose="true/false" on the opening accordion shortcode like this: [accordion clicktoclose="true"]. Default is false.
scroll: Sets whether to scroll to the title when it’s clicked open. This is useful if you have a lot of content within your accordion items. Set scroll="true/false" on the opening accordion shortcode like this: [accordion scroll="true"]. Default is false. You may also specify an integer for a pixel offset if you’d like the page to scroll further (useful when the site uses a fixed position header navigation). NOTE: Only use pixel offset integers of > 0. If you do not want a scroll offset, but still want scrolling, simply use scroll="true".
class: Sets a custom CSS class for the accordion group or individual accordion items. Set class="your-class-name" on the opening accordion or accordion-item shortcode like this: [accordion class="your-class-name"] or [accordion-item class="your-class-name"]. Added a class to the accordion-item will add the class to the title HTML tag.
tag: Set the global HTML tag to use for all accordion titles. Set tag="h2" on the opening accordion shortcode like this: [accordion tag="h2"]. Default is h3.
semantics: You can change the entire semantic structure of the accordions to use a definition list (dl, dt, dd) by setting semantics="dl" on the opening accordion shortcode like this: [accordion semantics="dl"]. By default the accordion will use div tags for the wrapper and content containers. If you set this option to dl, it is recommended that you do not also use the tag option. This feature is not selectable from the accordion button dialog box and must be added manually.
Advanced Accordion Item Settings
state: Sets the initial state of the accordion item to open or closed. Set state=open or state=closed on the opening accordion item shortcode like this: [accordion-item state=open]. This setting will override all other accordion settings except when linking to an accordion item via ID.
tag: You can also set the HTML tag for the titles of each accordion item individually by adding tag="tagname" to each [accordion-item] shortcode. Make sure to not include the angle brackets around the tag name. Example: to use