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

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

96

96

描述

To make the accordions appear the way you want you need to add your own styling to them

要使手风琴以您希望的方式显示,您需要为其添加自己的样式

Lets you add accordion to your post and pages.

让您在您的帖子和页面中添加手风琴。

By using the following shortcodes

通过使用以下简码

[accordions]

  [手风琴]

[accordion title="title1"] tab content [/accordion]

[accordion title =“ title1”]标签内容[/ accordion]

[accordion title="title2"] another content tab [/accordion]

[accordion title =“ title2”]另一个内容标签[/ accordion]

[/accordions]

[/手风琴]

will generate the following html.

将生成以下html。

            

  
            

title1

            

title1             

 

 

Some Text
            

一些文字
            

            

            

title2

            

title2             

 

 

Some Text
            

一些文字
            

Additional attributes that you could pass into the shortcode
    

您可以传递给简码的其他属性
    

[accordions autoHeight=’true’ disabled=’false’ active=0 clearStyle=false collapsible=false fillSpace=false ]
    

[手风琴autoHeight ='true'已禁用='false'active = 0 clearStyle = false collapsible = false fillSpace = false]
    

[accordion title=’title1′ class=’new-class’]
     

[accordion title ='title1'class ='new-class']
     

Some Text
    

一些文字
    

[/accordion]
    

[/手风琴]
    

[accordion title=’title2′ class=’new-class’]
     

[accordion title ='title2'class ='new-class']
     

Some Text
    

一些文字
    

[/accordion]
    

[/手风琴]
    

[/accordions]

[/手风琴]

Sample CSS

示例CSS

Here is some sample css to get you started.

以下是一些示例CSS,可以帮助您入门。

Another place to look for it would be the http://jqueryui.com/themeroller/, The shortcode used the jQuery UI to generate the accordion.

寻找它的另一个地方是http://jqueryui.com/themeroller/,该短代码使用jQuery UI生成了手风琴。

.ui-accordion-header{    

  .ui-accordion-header {    

margin:5px 0 0;

边距:5px 0 0;

}

}

.ui-accordion-header a{    

.ui手风琴标题a {    

padding:5px 12px;    

padding:5px 12px;    

background: #CCC;    

背景:#CCC;    

color:#FFF;    

颜色:#FFF;    

display:block;

显示:块;

}

}

.ui-accordion-header.ui-state-active a,

.ui-accordion-header.ui-state-active a,

.ui-accordion-header a:hover{    

.ui-accordion-header a:hover {    

background-color: #DDD;

背景颜色:#DDD;

}

}

.ui-accordion-content{    

.ui手风琴内容{    

padding-top:10px;

padding-top:10px;

}

}

安装步骤

    1. Extract the zip file into wp-content/plugins/ in your WordPress installation
    2. 在您的WordPress安装中将zip文件提取到wp-content / plugins /

    3. Go to plugins page to activate
    4. 转到插件页面激活

    5. Add styles to make the accordion look the way you want.
    6. 添加样式以使手风琴看起来像您想要的样子。

下载地址

https://downloads.wordpress.org/plugin/accordion-shortcode.1.2.1.zip

https://downloads.wordpress.org/plugin/accordion-shortcode.1.2.1.zip

-EOF-