Seleccionar página

framework¡Vamos a poner en práctica lo último que hemos visto! Recientemente vimos cómo crear shortcodes para WordPress, ¿Verdad? Pues ahora vamos a aprender a crear shortcodes para columnizar nuestro contenido.

Es realmente simple. Sólo tenemos que crear tantas funciones como columnas queramos, y luego editar el CSS.

Por ejemplo, vamos a crear desde una columna (ancho completo) hasta cuatro. Sería algo así:

Las cuatro funciones hacen lo mismo, cambiando la clase del div que devuelven. Si os fijais, primero pasamos $content por un filtro, “the_content”. Esto se debe a que, si no lo hacemos, obtendremos el contenido del post como texto HTML plano, invalidando cualquier otro shortcode que utilicemos en ese trozo de código. El filtro “the_content” procesa ese trozo de contenido y aplica todos los cambios que una entrada de WordPress normal necesita.

Ahora, en nuestro CSS debemos añadir las clases correspondientes:

¡Y listo! Ya podemos utilizar las shortcodes que hemos creado para organizar el contenido de nuestras entradas en columnas.

Recordad que, si el theme está bien hecho, el porcentaje de ancho de las columnas será respecto al contenedor principal del contenido, dejando fuera sidebars y otros elementos. Es decir, si en vuestra web tenéis una estructura de Contenido + Sidebar, la sidebar seguirá ocupando el ancho que tiene. Estos shortcodes son ideales para páginas en un formato de Full Width (ancho completo de página, sin Sidebar).

Mejorando el CSS

Nuestra experta en CSS nos dice que podemos rizar un poquito más el rizo. Realmente con el CSS que tenemos ya funciona, pero no estamos contemplando separación entre columnas. ¿Cómo podemos solucionarlo?

En primer lugar debemos hacer que, de alguna forma (con un atributo, por ejemplo) la última de nuestras columnas tenga una clase extra “last”, para indicar que es la última.

A todas las columnas, salvo a la última, les vamos a añadir un pequeño margen a la derecha, de forma que las columnas quedan con una separación. A la marcada con la clase “last” le quitaremos este margen, y la pondremos flotando a la derecha. Por tanto, como nos estamos pasando del 100%, reduciremos el width de las columnas (exceptuando el caso de la columna full-width, que ocupa el 100% sin márgenes). Nuestro CSS finalmente debería quedar así:

Gracias a Layla Sierra, nuestra experta en CSS, por el apunte.

“La simplicidad es un prerequisito para la fiabilidad”
.- E. W. Dijkstra