Columnas en entradas y páginas con WordPress Shortcodes

El editor de WordPress es muy potente pero cuando deseamos añadir estilos muy personalizados como por ejemplo emplear columnas y filas al estilo revista, debemos recurrir a utilizar los shortcodes de WordPress.

Los shortcodes de WordPress son pequeños códigos que puedes añadir en el editor de WordPress. Se usan para añadir funciones al contenido de tus entradas y páginas sin tener que escribir un script cada vez que necesites hacer esa tarea.

En este artículo vamos a ver como crear columnas  dentro del editor de las entradas y páginas utilizando shorcodes. Vamos a crear la posibilidad de que en las entradas y páginas se pueda redactar en una columna, 2 columnas y 3 columnas.

Para añadir shortcodes a la plantilla actual lo que suelo hacer es crear un directorio dentro de la plantilla si no existe «/includes» y crear allí dentro un archivo llamado «shortcodes.php» donde añadiremos todos los shortcodes que utilizaremos.

Dentro de este archivo añadiremos nuestros shortcodes:

<?php
function one_column( $atts, $content = null ) {
    return '<div class="one_column">' . do_shortcode($content) . '</div>';
}

add_shortcode( 'one_column', 'one_column' );

function two_columns( $atts, $content = null ) {
    extract(shortcode_atts(array('class' => 'last'), $atts));
    return '<div class="two_columns '.$atts['class'].'">' . do_shortcode($content) . '</div>';
}

add_shortcode( 'two_columns', 'two_columns' );

function three_columns( $atts, $content = null ) {
    extract(shortcode_atts(array('class' => 'last'), $atts));  
    return '<div class="three_columns '.$atts['class'].'">' . do_shortcode($content) . '</div>';
}

add_shortcode( 'three_columns', 'three_columns' );

function clear( $atts, $content = null ) {
    return '<div class="clear"></div>';
}

add_shortcode( 'clear', 'clear' );
?>

Estamos añadiendo los contenedores que representarán las columnas dentro de las entradas y páginas, y un último shortcode que hace de divisor de bloques.

En el archivo «functions.php» de la plantilla utilizada deberemos incluir este nuevo archivo:

include(TEMPLATEPATH . '/includes/shortcodes.php');

Una vez guardemos estos cambios y subamos al servidor ya podemos acceder a cualquier entrada o página para añadir los shortcodes de la siguiente forma.

Para añadir una columna:

[one_column]

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas «Letraset», las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas «Letraset», las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

[/one_column]

Para añadir dos columnas:

[two_columns]

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas «Letraset», las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

[/two_columns]

[two_columns]

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas «Letraset», las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

[/two_columns]

Para añadir tres columnas:

[three_columns]

Titulo 1

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas «Letraset», las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

[/three_columns]

[three_columns]

Titulo 2

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas «Letraset», las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

[/three_columns]

[three_columns]

Titulo 3

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas «Letraset», las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

[/three_columns]

Ahora falta añadir los estilos en la hoja de estilos de la plantilla (posiblemente necesitarás adaptar los anchos de los contenedores):

.one_column {
    float: left;
    margin-bottom: 15px;
    padding: 5px;
    width: 760px;
}

.two_columns {
    float: left;
    margin-right: 10px;
    padding: 5px;
    width: 370px;
}

.three_columns {
    float: left;
    padding: 5px;
    width: 246px;
}

.last {
    margin:0px;
}

.clear {
    clear:both;
    margin-bottom:15px;
}

Obteniendo como resultado: