Descripción
This plugin is intended for theme developers and others who want to have full control of their column styles while still providing a quick and easy framework for adding/editing column content via WordPress’s visual editor. It eliminates the need to type tedious, unmanageable chunks of HTML into the editor when specific posts or pages require a columnar layout.
That said, this plugin is not plug-and-play. It does not include any styles out-of-the-box, so if you start using the shortcodes without adding appropriate CSS rules, there probably won’t be any visible changes to your content.
See the Recipes page on the GitHub wiki for some styling examples.
Usage
- Designate each column with
[column]
and[/column]
- Mark the end of a row with
[endrow]
Features
- Includes enumerated column and row classes, allowing for per-column and -row styling. Also includes parity classes (odd/even) for striping.
- If a user forgets to add the last
[endrow]
shortcode, the plugin will automatically insert a closing</div>
so the site layout doesn’t get broken. - Cleans up errant
<p>
and<br />
tags that result from WordPress’swpautop()
function. - All parameter inputs are escaped for security.
Example
Putting this into the visual editor:
[column]
This is the column of Foo.
[/column]
[column]
This is the column of Bar.
[/column]
[endrow]
Will result in this output:
This is the column of Foo.
This is the column of Bar.
Parameters
The following optional parameters can be added to the [column]
shortcode:
- class (String : ”)
Classes for the column<div>
element. Separate multiple classes with spaces. - rowclass (String : ”)
Classes for the row<div>
element. Only works when included with the first[column]
shortcode in a row. - style (String : ”)
Inline styles for the column<div>
element. - rowstyle (String : ”)
Inline styles for the row<div>
element. Only works when included with the first[column]
shortcode in a row. - norow (Boolean : false)
Set to true to omit the row wrapper<div>
.
Filters
The following filter hooks can be used to alter the output of the shortcodes:
diy_colclass
diy_colstyle
diy_column
diy_rowclass
diy_rowstyle
diy_beginrow
diy_endrow
Instalación
- Upload the
columns-diy
folder to the/wp-content/plugins/
directory - Activate the plugin through the ‘Plugins’ menu in WordPress
There are a few different options for adding the CSS to style your columns:
- Edit the style file in your theme (probably
style.css
). This is not recommended if you are using a third-party theme such as a commercial theme or one downloaded from the WordPress Theme Directory. Your changes will be lost if/when you update the theme to a new version. - Create a child theme.
- Use a plugin such as CSS & JavaScript Toolbox to embed the styles without modifying your theme.
- Use the
style
parameter in the[column]
shortcode to add inline styles. Only recommended for “one-off” scenarios (and how often does a “one-off” remain that way?).
FAQ
Check out the GitHub repository for more information.
Reseñas
Colaboradores y desarrolladores
«Columns DIY» es un software de código abierto. Las siguientes personas han colaborado con este plugin.
ColaboradoresTraduce «Columns DIY» a tu idioma.
¿Interesado en el desarrollo?
Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.
Registro de cambios
1.1
- Added
rowstyle
parameter to allow for inline styles on the row<div>
. - Added filter hooks for altering the output of the shortcodes.
- Improved process for cleaning up
<p>
and<br />
tags.
1.0
- The initial release to the WordPress plugin repository.