Agregue diseños de mampostería y cuadrícula a su sitio de WordPress con solo CSS

¿Alguna vez quiso animar cómo se muestran sus publicaciones en su página de inicio y archivos de WordPress?

¿Qué pasaría si pudiera mostrar sus publicaciones utilizando el enfoque de mampostería (Pinterest) o tal vez un diseño de cuadrícula, todo simplemente agregando un fragmento de CSS?

Sin complementos, códigos abreviados, cambios de plantilla, asignando páginas como página de inicio. Solo CSS puro.

Continúe leyendo, o avance usando estos enlaces:

• Preparativos para agregar diseños de mampostería y cuadrícula a su sitio
• Darle a tus publicaciones el aspecto de mampostería de Pinterest
• Disposición de publicaciones en una cuadrícula
• Agregar el CSS personalizado a su sitio

Preparativos para agregar diseños de mampostería y cuadrícula a su sitio de WordPress

Estas soluciones se basan únicamente en CSS y, por lo tanto, como era de esperar, dependen en gran medida del marcado HTML en su sitio para funcionar sin modificaciones.

El CSS utilizado ha sido diseñado (y probado) con los temas predeterminados. Esto significa que el CSS tiene un par de expectativas:

1. Existen clases en el elemento del cuerpo que describen el tipo de página (por ejemplo, inicio, blog, archivo, búsqueda)
2. Las listas de publicaciones son colecciones de elementos de artículos, completas con un encabezado envuelto en un div con la identificación del contenido

Si usa un tema predeterminado, podrá usar el CSS sin modificaciones. Incluso si no lo hace, es posible que descubra que su tema usa un marcado lo suficientemente similar como para que aún pueda usar el CSS tal como está. Por ejemplo, el tema de los años ochenta utiliza prácticamente el mismo marcado que los temas predeterminados.

Si su tema no usa el mismo marcado, la forma más fácil de saberlo es verificar la fuente de la página para las clases y las identificaciones a las que se hace referencia en el CSS, entonces aún puede usar el CSS, solo tendrá que cambiar las clases y los identificadores para que coincidan con su marcado.

Elegir dónde aplicar el estilo

Puede decidir que solo desea aplicar el estilo elegido a ciertas páginas.

WordPress hace que esto sea realmente fácil, ya que aplica clases específicas de página al elemento del cuerpo, como blog, inicio, archivo y búsqueda, por lo que simplemente necesita codificar su CSS para cada una de las clases relevantes.

Por ejemplo, si desea aplicar el estilo solo a la página de inicio, su CSS se verá así:

body.blog article { styles go here... }

Para aplicar el estilo a la página de inicio y las páginas de archivo (categoría):

body.blog article, body.archive article { styles go here... }

Para aplicar el estilo solo a los resultados de búsqueda:

body.blog search { styles go here... }

Nuevamente, esto depende de su tema siguiendo las recomendaciones de temas de WordPress.

Compatibilidad del navegador

Al ser CSS3, estas técnicas no funcionarán en todas las plataformas y navegadores.

He probado y confirmo que funcionan en las últimas versiones de Chrome y Safari (ambos en OS X) y en iOS (5+). Los diversos sitios web de CSS también sugieren que IE10 tampoco tendrá problemas.

Fuera de estos navegadores (incluido IE9), su kilometraje variará, pero vale la pena recordar que el respaldo es su estilo actual, por lo que los visitantes que usan navegadores más antiguos simplemente no notarán ninguna diferencia.

Si encuentra que los estilos funcionan correctamente en una plataforma no mencionada (particularmente Windows), háganoslo saber en los comentarios.

Basta de descargos de responsabilidad, entonces, veamos cómo arreglar sus listados de publicaciones.

Darle a tus publicaciones el aspecto de mampostería de Pinterest

Hay muchos temas de WordPress y un puñado de complementos que muestran publicaciones en un formato de mampostería al estilo de Pinterest. Pero con CSS3, simplemente puede agregar algunos estilos adicionales a su sitio de WordPress y obtener el mismo efecto.

Esta solución, inspirada en la publicación de Rahul Arora en W3Bits, se basa en el soporte de CSS3 para la propiedad column . Esta propiedad dividirá el contenido en el número definido de columnas y, aunque su creación probablemente se inspiró más en la idea de que el texto fluya entre las columnas al estilo de un periódico, es igual de útil para un diseño de mampostería.

/* Masonry Custom CSS  */

/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}

/* Masonry bricks or child elements */

body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}

body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}

En los diseños predeterminados, las publicaciones se generan como elementos de artículo envueltos en un div con una identificación de contenido.

El CSS:

1. Establece el número de columnas en el envoltorio #content utilizando la propiedad column-count ; en este caso, 4. También establece la brecha entre columnas . Notarás el uso de -moz- y -webkit- para Firefox y Safari.

2. Convierte los elementos del artículo en ladrillos, usando bloques en línea y configurando un ancho al 100%.

3. Asegura que el encabezado de la página y la navegación se encuentren en su propia "fila" al especificar que estos elementos abarquen todas las columnas.

Solo para mantener las cosas ordenadas, también podría considerar agregar lo siguiente:

/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}

h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}

Esto solo pone un margen alrededor del contenido y asegura que las palabras largas en los títulos no descarten el formato (útil para cualquier tema, no solo aquí).

Haciéndolo receptivo

Una desventaja con un enfoque de columna es que se degrada rápidamente a medida que el tamaño de la pantalla se hace más pequeño.

Lo que queremos hacer es manipular el número de columnas para que los elementos del artículo obtengan una cantidad considerable de espacio en pantalla para mantener la integridad y el atractivo visual de los ladrillos. Entonces, agreguemos algunas consultas de medios para cambiar la cantidad de columnas según el tamaño de la pantalla:

@media only screen and (max-width : 1024px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 768px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 480px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}

Como puede ver, solo necesitamos cambiar la propiedad de recuento de columnas (y sus derivados) para cada consulta.

Estos 4 puntos de interrupción, 3 de los cuales funcionarán en todas las plataformas (simplemente cambie el tamaño de la ventana de su navegador para ver cómo funcionan) y 1 que es específico para una tableta en modo vertical.

Aquí está el estilo de mampostería en un iPad y iPhone:

Puede (y debe), por supuesto, ir más allá y agregar más estilo a los ladrillos para mejorar el atractivo visual, ¡pero solo 3 declaraciones CSS para convertir sus listas de publicaciones en un muro de mampostería es bastante impresionante!

Disposición de publicaciones en una cuadrícula

Si le gusta más uniformidad y orden de lo que proporciona la mampostería, entonces podría estar interesado en colocar sus publicaciones en una cuadrícula.

Las cuadrículas son muy, muy fáciles de implementar, pero definitivamente funcionan mejor cuando las imágenes destacadas son todas del mismo tamaño; de lo contrario, puede terminar con muchos espacios en blanco rellenando las "celdas" más cortas.

Esta vez, el CSS es aún más corto, simplemente se basa en diseñar los elementos del artículo :

/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}

Eso es todo lo que es absolutamente necesario. Una vez más, utilizamos el bloque en línea y nos aseguramos de que el contenido del artículo (título, imagen destacada, extracto) esté alineado verticalmente.

La propiedad importante es el ancho , ya que determina el número de "columnas". He usado 32,5 % como valor inicial (el uso de 33 % puede dar lugar a un ajuste prematuro), lo que proporcionará 3 columnas. Obviamente, si quisiera 4 columnas, usaría 24,5%, 5 columnas 19,5%, etc.

Agregar capacidad de respuesta

Al igual que nuestro diseño de mampostería, las rejillas deberán responder si quieren mantener su eficacia.

Como es la propiedad de ancho la que determina el número de columnas, esa es la propiedad que se cambiará en las diversas consultas de medios.

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 768px) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 480px) {

body.blog article, body.archive article {
width: 100%;
}
}

Solo 3 consultas esta vez, ya que solo comencé con 3 columnas. Si decide comenzar con más columnas, es posible que desee agregar un punto de interrupción de ancho máximo: 1024 px para establecer el ancho en 32,5% (3 columnas).

Esto dará como resultado:

1. 2 columnas en una tableta en modo vertical
2. 2 columnas cuando el tamaño de la pantalla es un ancho máximo de 768px
3. 1 columna cuando el tamaño de la pantalla tiene un ancho máximo de 480px

Estos puntos de interrupción cubrirán tanto las tabletas como los teléfonos inteligentes y el cambio de tamaño de la ventana del navegador.

Aquí está el diseño de la cuadrícula en un iPad y un iPhone:

Las cuadrículas, un poco más ordenadas que la mampostería, pero realmente requieren consistencia y rigor en lo que respecta al tamaño de la imagen destacada para que sean más efectivos.

Agregar el CSS personalizado a su sitio

Hay una serie de opciones cuando se trata de inyectar su CSS personalizado elegido en su sitio de WordPress. Si su tema no incluye la capacidad de agregar CSS personalizado, sus opciones son:

• Tema secundario: cree un tema secundario y agregue el CSS a la hoja de estilo
• Complemento : agregue su estilo elegido a un nuevo archivo CSS y cree un complemento que use la función wp-enqueue-style, quizás condicionalmente en función de la página que se genera, para poner en cola el nuevo archivo
• Edite la hoja de estilo del tema actual ; no lo haga, de verdad, simplemente no lo haga.
• Use un complemento CSS personalizado : hay una serie de complementos que le permitirán agregar CSS personalizado a su sitio a través de la interfaz de administración de WordPress (el complemento CSS personalizado simple, acertadamente llamado, es uno de esos complementos)

Me gusta usar el complemento CSS personalizado. Es rápido y fácil de configurar, hace que las pruebas sean muy sencillas y es igualmente rápido y fácil eliminar el CSS de su sitio de WordPress (limpie el editor o desinstale el complemento).

CSS, el camino hacia WordPress Zen

El maravilloso CSS Zen Garden ha estado demostrando durante muchos años que la apariencia de un sitio puede modificarse sustancialmente sin un solo cambio en el marcado, sino cambiando el CSS.

Si bien no están ni cerca del mismo nivel, estas dos técnicas demuestran que cambiar la apariencia de su sitio de WordPress también es completamente posible sin necesidad de modificar plantillas, usar códigos abreviados o desarrollar temas secundarios.

Solo un poco de CSS.

Nota del editor: esta publicación se actualizó para mayor precisión y relevancia. [Publicado originalmente: julio de 2014 / Revisado: febrero de 2022]

• CSS
• rejillas