该插件尚未通过WordPress的最新3个主要版本进行测试。 当与较新版本的WordPress一起使用时,可能不再受到维护或支持,并且可能会存在兼容性问题。

CM CSS Columns

描述

The plugin offers different shortcodes to use the CSS3 Multiple Columns.
For better user experience it includes an integration into the visual editor. You can enter all attributes with the help of dialogs, so you don’t need to write the shortcodes by hand.

The plugin simply wraps the enclosed content into a container and defines according CSS rules.
The attributes for the shortcodes and examples you can find under “Other Notes”.

All default values can be changed in the settings page. With saving the settings a static CSS file is written and included for better performance.

Shortcodes

Here is the list of shortcodes with the corresponding attributes:

[css_columns]

This is an enclosing shortcode to distribute content into a CSS3 multiple columns layout. As content you can use any complex markup. A div-Tag with CSS classes and default definitions is used to wrap the content. The default values for the attributes can be changed in the settings page of the plugin.

Possible attributes:

Example:

[css_columns gap=30px width=120px count=3 rule_color="#000000" rule_style=solid rule_width=medium]
.... here goes the complex content ....
[/css_columns]

[css_col_span]

This is an enclosing shortcode, which only can be used within the [css_columns] shortcode. You can define content, which spans over multiple columns.

Possible attributes:

  • cols – Specifies how many columns an element should span across. Same values like column-span on w3schools.com
  • tag – Specifies the tag used for wrapping the spanning content, e.g. span, h2, div, …

Example:

[css_col_span cols=2 tag=div]
... here goes the spanning content ....
[/css_col_span]

[css_no_break]

This is an enclosing shortcode, which only can be used within the [css_columns] shortcode. You can define content, which never breaks into different columns. WARNING Feature is not supported by Firefox yet!

Possible attributes:

  • type – Specifies whether a page break is allowed inside a specified element. Same values like page-break-inside on w3schools.com
  • tag – Specifies the tag used for wrapping the non breaking content, e.g. span, h2, div, …

Example:

[css_no_break type=avoid tag=div]
... here goes the non-breakable complex content ....
[/css_no_break]

屏幕截图

  • settings page to define the default attribute values
  • marked content in Visual Editor and opening the shortcode menu
  • attribute dialog for inserting [css_columns] shortcode in Visual Editor
  • Visual Editor after inserting the shortcode with default values
  • Frontend rendering result

安装

  1. Extract and upload cm-css-columns.zip to the /wp-content/plugins/ directory.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. Use the shortcodes in the editor.

常见问题

Do I have to use shortcodes?

No. You can also use the dialogs to insert the shortcode with visual editor.

评价

阅读所有2条评价

贡献者及开发者

“CM CSS Columns” 是开源软件。 以下人员对此插件做出了贡献。

贡献者

「CM CSS Columns」插件已被翻译至 1 种本地化语言。 感谢所有译者为本插件所做的贡献。

将“CM CSS Columns”翻译成您的语言。

对开发感兴趣吗?

您可以浏览代码,查看SVN仓库,或通过RSS订阅开发日志

更新日志

1.2.1

  • tested in last WordPress versions

1.2.0

  • Added: attributes dialog for [css_col_span]-shortcode
  • Added: attributes dialog for [css_no_break]-shortcode

1.1.1

  • Added: attributes dialog for [css_columns]-shortcode
  • Fixed: generating and including the CSS file with default values

1.1.0

  • Added: menu button in visual editor to wrap selected text with shortcodes

1.0.2

  • Fixed: backend javascript error

1.0.1

  • Fixed: activation/deactivation

1.0

  • initial release version