[wordpress插件] Accordion Shortcodes手风琴简码

wordpress 插件 文章 2020-01-25 18:40 0 264 全屏看文




Accordion Shortcodes is a simple plugin that adds a few shortcodes for adding accordion drop-downs to your pages.

Accordion Shortcodes是一个简单的插件,它添加了一些用于在页面上添加手风琴下拉菜单的简码。

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).




    • 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
    • TinyMCE编辑器中的两个按钮使添加和配置手风琴简码变得容易

    • Responsive
    • 响应式

    • No default CSS added
    • 未添加默认CSS

    • Only adds JavaScript on pages that use the shortcodes
    • 仅在使用简码的页面上添加JavaScript

    • Support for item IDs and direct links
    • 支持商品ID和直接链接

    • 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
      • 设置标题元素的HTML标签

      • Change the semantic structure of your accordions (advanced)
      • 更改手风琴的语义结构(高级)

      The Shortcodes


      The two shortcodes that are added are:



        [手风琴] ... [/手风琴]


      [accordion-item title=""]...[/accordion-item]

        [手风琴项目标题=“”] ... [/手风琴项目]

      Basic Usage Example




      [accordion-item title="Title of accordion item"]Drop-down content goes here.[/accordion-item]

      [accordion-item title =“手风琴项目的标题”]下拉内容在此处。[/ accordion-item]

      [accordion-item title="Second accordion item"]Drop-down content goes here.[/accordion-item]

      [accordion-item title =“第二手风琴项目”]下拉内容在此处。[/ accordion-item]



      This will output the following HTML:




      Title of accordion item





      Drop-down content goes here.    




      Second accordion item





      Drop-down content goes here.    


      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 {    

      .accordion {    

      border-bottom: 1px solid #dbdbdb;    


      margin-bottom: 20px;




      .accordion-title {    

      .accordion-title {    

      border-top: 1px solid #dbdbdb;    


      margin: 0;    


      padding: 20px 0;    

      填充:20px 0;    

      cursor: pointer;




      .accordion-title:hover {}

      .accordion-title:hover {}

      .accordion-title:first-child {border: none;}


      .accordion-title.open {cursor: default;}

      .accordion-title.open {光标:默认;}

      .accordion-content {padding-bottom: 20px;}

      .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-item id="item-1" title="Title of accordion item"]Drop-down content goes here.[/accordion-item]

      [accordion-item id =“ item-1” title =“手风琴项目的标题”]下拉内容在此处。[/ accordion-item]

      [accordion-item id="item-2" title="Second accordion item"]Drop-down content goes here.[/accordion-item]

      [accordion-item id =“ item-2” title =“第二手风琴产品”]下拉内容在此处。[/ accordion-item]

      [accordion-item id="item-3" title="A Third accordion"]Drop-down content goes here.[/accordion-item]

      [accordion-item id =“ item-3” title =“第三手风琴”]下拉内容在此处。[/ accordion-item]



      You could use this URL to open the third item by default:




      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 =“ 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"].

      在开头的手风琴简码上设置 autoclose =“ true / false” ,如下所示: [accordion autoclose =“ false”]

      Default is true.

      默认值为 true

      openfirst: Sets whether the first accordion item is open by default.


      This setting will be overridden if openall is set to true.

      如果 openall 设置为true,则此设置将被覆盖。

      Set openfirst="true/false" on the opening accordion shortcode like this: [accordion openfirst="true"].

      在开头的手风琴简码上设置 openfirst =“ true / false” ,如下所示: [accordion openfirst =“ true”]

      Default is false.

      默认值为 false

      openall: Sets whether all accordion items are open by default.

      openall :设置默认情况下是否打开所有手风琴项目。

      It is recommended that this setting be used with clicktoclose.

      建议将此设置与 clicktoclose 一起使用。

      Set openall="true/false" on the opening accordion shortcode like this: [accordion openall="true"].

      在开头的手风琴简码上设置 openall =“ true / false” ,如下所示: [accordion openall =“ true”]

      Default is false.

      默认值为 false

      clicktoclose: Sets whether clicking an open title closes it.

      clicktoclose :设置是否单击打开的标题将其关闭。

      Set clicktoclose="true/false" on the opening accordion shortcode like this: [accordion clicktoclose="true"].

      在开头的手风琴简码上设置 clicktoclose =“ true / false” ,如下所示: [accordion clicktoclose =“ true”]

      Default is false.

      默认值为 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"].

      在开头的手风琴简码上设置 scroll =“ true / false” ,如下所示: [accordion scroll =“ true”]

      Default is false.

      默认值为 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".

      注意:仅使用大于0的像素偏移整数。如果您不希望滚动偏移,但仍希望滚动,只需使用 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 <

      在开头的手风琴或手风琴项目短代码上设置 class =“ your-class-name” ,如下所示: [accordion class =“ your-class-name”] 或<

      code>[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"].

      在开头的手风琴简码上设置 tag =“ h2” ,如下所示: [accordion tag =“ h2”]

      Default is h3.

      默认值为 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

      语义:您可以通过在键盘上设置 semantics =“ dl” 来更改手风琴的整个语义结构,以使用定义列表(dl,dt,dd)。

      opening accordion shortcode like this: [accordion semantics="dl"].

      像这样打开手风琴简码: [accordion语义s =“ dl”]

      By default the accordion will use div tags for the wrapper and content containers.

      默认情况下,手风琴将对包装容器和内容容器使用 div 标签。

      If you set this option to dl, it is recommended that you do not also use the tag option.

      如果将此选项设置为 dl ,建议您不要同时使用 tag 选项。

      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.

      状态:将手风琴项目的初始状态设置为 open closed

      Set state=open or state=closed on the opening accordion item shortcode like this: [accordion-item state=open].

      在开头的手风琴项目短代码上设置 state = open state = closed ,如下所示: [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

      标签:您还可以通过在每个 [accordion-item]上添加 tag =“ tagname” 来分别为每个手风琴项目的标题设置HTML标签。

      ] shortcode.

      ] 简码。

      Make sure to not include the angle brackets around the tag name.


      Example: to use

      instead of the default

      tag: [accordion-item title="Item title" tag="h2"]Item



      标记: [手风琴项目标题=“项目标题” tag =“ h2”]项目


      内容[/ 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     






      Drop-down content goes here.    












      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:

      例如,您可以使用以下方法为整个站点中的所有手风琴设置 openfirst 选项:

      add_filter('shortcode_atts_accordion', 'set_accordion_shortcode_defaults', 10, 3);


      function set_accordion_shortcode_defaults($atts) {    

      函数set_accordion_shortcode_defaults($ atts){    

      // Override the openfirst setting here    


      $atts['openfirst'] = true;    

      $ atts ['openfirst'] = true;    

      return $atts;

      返回$ 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.

      要启用兼容模式,请在您的wp-config.php文件中添加 define('AS_COMPATIBILITY',true);

      This will add a prefix of ‘as-‘ to the two accordion shortcodes.

      这将在两个手风琴简码中添加一个前缀“ as-”。

      With compatibility mode enabled, make sure your shortcodes start with as- like this: [as-accordion]...[/as-accordion] and

      启用兼容模式后,请确保您的短代码以 as-开头,如下所示: [as-accordion] ... [/ as-accordion]


      > [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.

      要禁用TinyMCE扩展名,请在您的wp-config.php文件中添加 define('AS_TINYMCE',false);



      For bug reports or feature requests or if you'd like to contribute to the plugin you can check everything out on Github.

      “> Github 。


    1. Upload the ‘accordion-shortcodes’ folder to the ‘/wp-content/plugins/’ directory.
    2. 将“ accordion-shortcodes”文件夹上传到“ / wp-content / plugins /”目录。

    3. Activate the plugin through the Plugins menu in WordPress.
    4. 通过WordPress中的“插件”菜单激活插件。

    5. Add the shortcodes to your content.
    6. 将简码添加到您的内容中。