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

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

94

94

描述

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

但是,您可能需要编辑主题的主样式表以添加一些自定义样式(有关示例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
    • 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]...[/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 =“手风琴项目的标题”]下拉内容在此处。[/ accordion-item]

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

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

      [/accordion]

      [/手风琴]

      This will output the following HTML:

      这将输出以下HTML:

          

        
          

      Title of accordion item

          

      手风琴项目的标题    

              

              

      Drop-down content goes here.    

      下拉内容在这里。    

          

          

      Second accordion item

          

      第二个手风琴项目    

              

              

      Drop-down content goes here.    

      下拉内容在这里。    

      Sample CSS

      示例CSS

      Here is some sample CSS to get you started if you want to customize the look and feel of the accordion.

      如果想自定义手风琴的外观,这里有一些CSS入门示例。

      /* Accordion Styles */

        / *手风琴样式* /

      .accordion {    

      .accordion {    

      border-bottom: 1px solid #dbdbdb;    

      border-bottom:1px实心#dbdbdb;    

      margin-bottom: 20px;

      底边距:20px;

      }

      }

      .accordion-title {    

      .accordion-title {    

      border-top: 1px solid #dbdbdb;    

      border-top:1px实心#dbdbdb;    

      margin: 0;    

      边距:0;    

      padding: 20px 0;    

      填充:20px 0;    

      cursor: pointer;

      光标:指针;

      }

      }

      .accordion-title:hover {}

      .accordion-title:hover {}

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

      .accordion-title:第一胎{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

      通过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.

      您可以选择为每个手风琴项目添加一个唯一的ID,然后默认使用URL中的该ID打开该项目。

      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-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]

      [/accordion]

      [/手风琴]

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

      默认情况下,您可以使用此URL打开第三项:

      http://yourdomain.com/your/path/#item-3

        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.

      您需要做的就是确保URL中之后的部分与在手风琴项目上设置的ID匹配。

      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.

      :为手风琴组或单个手风琴项目设置自定义CSS类。

      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.

      在手风琴项目中添加了一个类,该类将添加到标题HTML标签中。

      tag: Set the global HTML tag to use for all accordion titles.

      标签:设置全局HTML标签以用于所有手风琴标题。

      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.

      此设置将覆盖所有其他手风琴设置,除非通过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”]项目

      content[/accordion-item].

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

      有效标签列表为: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.

      您可以通过向主题的functions.php文件中添加一些简单的代码来过滤短代码的设置和内容。

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

        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    

      //在此处覆盖openfirst设置    

      $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].

      > [as-accordion-item] ... [/ as-accordion-item]

      Disable TinyMCE Buttons

      禁用TinyMCE按钮

      You can optionally disable the TinyMCE extension which will remove the buttons from the editor button bar.

      您可以选择禁用TinyMCE扩展名,该扩展名将从编辑器按钮栏中删除按钮。

      To disable the TinyMCE extension add define('AS_TINYMCE', false); to your wp-config.php file.

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

      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.

      “> 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. 将简码添加到您的内容中。

下载地址

https://downloads.wordpress.org/plugin/accordion-shortcodes.2.4.2.zip

https://downloads.wordpress.org/plugin/accordion-shortcodes.2.4.2.zip

-EOF-