Viktor H. Morales

Diseñador gráfico y Web. WordPress. Emprendedor. Viajero.

WordPress Shortcodes: Columnas en Entradas y Páginas

De pronto se me viene a la mente, mientras escuchaba una suave lluvia de fondo, tener la posibilidad de encolumnar información en las páginas o entradas de un blog en WordPress. Ante ésta inquietud, pienso unos instantes:

Mediate CSS podría hacer que los items de las listas dentro del post tengan el atributo “float: left” y con un ancho específico. Ésto haría lo que necesito.

Entonces empiezo a trabajar con el código CSS

[css]

.clear { clear: both; }
.post ol { margin: 0 auto; padding: 0; list-style-type: none; }
.post ol li { float: left; width: 300px; }

[/css]

Luego, en la entrada o página, creo una lista y ¡Voilá! Me crea las columnas.

Esto resultaría según lo esperado, el problema es que nunca podría crear una lista normal, ya saben, una lista en la que quiera listar – valga la redundancia –  productos, servicios, o lo que fuese. Entonces descarto ésta opción.

Pienso un poco más y me acuerdo de los “shortcodes” de wordpress:

¡Ah! Cierto que introdujeron los Shortcodes desde wordpress 2.5 que son un set de funciones para crear macro códigos para usarlo en los contenidos de páginas o entradas.

Empiezo a estudiar sobre como crear shortcodes usando la guía oficial de wordpress. Error va, error viene, me topo con la solución:

  1. Crear un archivo .php y guardarlo en una carpeta del theme (plantilla). Para éste ejemplo yo cree “shortcodes.php” y lo guardé en la carpeta “incs” dentro de mi plantilla.
  2. Copiar y pegar el siguiente código dentro del archivo creado en el paso anterior:
    [php]
    // [cols] crea una capa <div> con la clase "cols" function
    vhm_sc_cols( $atts, $content = null ) {
    return ‘<div class="cols">’ . do_shortcode($content) . ‘</div><div class="clear"></div>’;
    }
    add_shortcode( ‘cols’, ‘vhm_sc_cols’ );
    [/php]
  3. Abrir el archivo “functions.php” y añadir el siguiente código:
    [php]
    include(TEMPLATEPATH . ‘/incs/shortcodes.php’); // Recuerden cambiar /incs/shortcodes.php por la ruta de su archivo.
    [/php]
  4. Ahora vamos con el código CSS
    [css]
    .cols ol { margin: 0 auto; padding: 0; list-style-type: none;  }
    .cols ol li { float: left; width: 300px; margin: 0 2px; }
    [/css]

Ya con ésto tenemos todo listo. Ahora vamos a crear una nueva página o entrada en wordpress y en un párrafo a parte, donde queramos encolumnar la información:

  1. Iniciamos la etiqueta [cols].
  2. Clickeamos el botón de “Lista sin ordenar (Alt + Shit + U)” del panel de botones del editor de texto.
  3. Escribimos la información en cada item, los cuales harán las veces de columnas – ver CSS -.
  4. Cerramos la etiqueta [/cols]

Al publicar ésta entrada o página y verla en funcionamiento, debería funcionar sin problemas – ver la imagen del post para apreciar el ejemplo –

En un nuevo trabajo con un cliente me surgieron más inquietudes/soluciones que de seguro las iré compartiendo.

Deja tus comentarios!