Agregue arreglos de mampostería y cuadrícula a su sitio web de WordPress con solo CSS

¿Alguna vez ha querido dinamizar cómo se muestran sus publicaciones en la página de inicio y sus archivos de WordPress? ¿Qué sucede si pudiera mostrar las publicaciones utilizando el enfoque de mampostería (Pinterest) o tal vez una apariencia de la cuadrícula, todas solo agregando un fragmento CSS? Sin complementos, códigos cortos, cambios de plantilla, asignación de páginas como página inicial. Solo CSS puro.

Los aspectos de mampostería y cuadrícula son posibles con CSS puro, sin cambios de marcado, continúan leyendo o pasando hacia adelante usando estos enlaces:
Preparaciones para agregar arreglos de mampostería y cuadrícula en su sitio
Dale a tus publicaciones el aspecto de mampostería de Pinterest
La colocación de postes en una cuadrícula
Agregar CSS personalizado a su sitio web
Preparaciones para agregar arreglos de mampostería y cuadrícula en su sitio de WordPress Estas soluciones se basan exclusivamente en CSS y, por lo tanto, no es sorprendente, basado en gran medida en la marca HTML en su sitio para operar sin cambios.
El CSS utilizado ha sido diseñado (y probado) con temas predeterminados. Esto significa que CSS tiene algunas expectativas:
En el elemento del cuerpo hay clases que describen el tipo de página (por ejemplo, hogar, blog, archivo, búsqueda)
Las listas de publicaciones son colecciones de elementos del artículo, completos con el encabezado envuelto en un DIT con el ID de contenido
Si usa un tema predeterminado, entonces podrá usar el CSS sin modificación. Incluso si no lo hace, puede descubrir que su tema usa una marca similarmente similar para que pueda usar el CSS tal como está. Por ejemplo, el tema de los años ochenta usa prácticamente el mismo marcado que los temas predeterminados.
Si su tema no usa la misma marca, la forma más fácil de encontrar y las ID para que coincidan con su marca. La elección de dónde aplicar el estilo puede decidir que desea aplicar solo el estilo elegido. WordPress hace esto muy fácil, porque aplica clases específicas a la página del elemento del cuerpo, como blog, inicio, archivo y búsqueda, por lo que simplemente tiene que codificar CSS para cada una de las clases relevantes. Por ejemplo, si desea Aplique el estilo de la página inicial solamente, entonces su CSS se verá así: Body.Blog Artles {Styles Go aquí …}
Para aplicar el estilo de la página de inicio y las páginas de archivo (categoría): Body.blog Artículo, Body.Archive Artículo {Los estilos van aquí …}
Para aplicar el estilo solo a los resultados de búsqueda: Body.Blog Search {Styles Go aquí …}
Nuevamente, esto depende de su tema, que sigue a las recomendaciones temáticas de WordPress. La compatibilidad del navegador es CSS3, estas técnicas no funcionarán en todas las plataformas y navegadores. Probé y confirmé que funciona en las últimas versiones de Chrome y Safari (tanto en OS X) como en iOS (5+). Diferentes sitios web de CSS también sugieren que IE10 no tendrá ningún problema.
Además de estos navegadores (incluido IE9), su kilometraje variará, pero vale la pena recordar que la alternativa es su estilo actual, por lo que los visitantes que usan navegadores más antiguos simplemente no notarán ninguna diferencia. Si descubre que los estilos están trabajando con éxito en una plataforma no mencionada (especialmente Windows), háganos saber en los comentarios. Bastante responsabilidad disminuye, luego veamos cómo mejorar sus publicaciones. Dé sus publicaciones. La apariencia de masa de Pinerest-Pinerest-Pinerest, la mampostería funciona excelente con pilares de diferentes alturas, hay muchos temas de WordPress y un puñado de complementos que muestran publicaciones en un formato de mampostería estilo 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 CSS3 para la propiedad de la columna. Esta propiedad dividirá el contenido en el número definido de columnas y, aunque su creación probablemente se ha inspirado más en la idea de fluir el texto en el estilo del periódico, es igualmente útil para un aspecto de mampostería. /* Masonería CSS personalizada * /

/ * Contenedor de mampostería */
Body.Blog Div#Content, Body. Archive Div#Content {
-Moz-column-consumo: 4;
-Webkit-column-count: 4;
Conteo de columna: 4;
-Moz-column-gap: 1em;
-Webkit-column-gap: 1em;
Columna-gap: 1em;
}
/ * Masonería ladrillos o elementos infantiles */
Body.blog Artículo, cuerpo. Archivo Artículo {
Color de fondo: #EEE;
Pantalla: bloque en línea;
margen: 0 0 1em;
Relleno: 1em;
Ancho: 100%;
}
Body.Archive. Archive-Header, Body.Blog .Paging-navegación, cuerpo. Archivo. Paging-navegación {
Color de fondo: #ffffff; -webkit-column-span: all;
Span de columna: todos;
}
En diseños predeterminados, las publicaciones se muestran como elementos de artículo envueltos en un DIT con una ID de contenido.
CSS: 1. Establezca el número de columnas en el shell #content usando la propiedad de conteo de columna en este caso 4. Establece la columna-gap. Notará el uso -MOZ- y -WebKit- para Firefox y Safari. 2. Transforme los elementos del artículo en ladrillos, utilizando bloque en línea y estableciendo un ancho al 100%. 3. Se asegura que el encabezado de la página y la navegación estén solo “fila” al especificar que estos elementos se extienden en todas las columnas solo para mantener las cosas en orden, puede considerar y agregar lo siguiente:/* Algunos CSS ad hoc. útil para muchos temas */
Cuerpo.
Body.blog .Site-Concount {
margen: 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 arrojen el formato (útil para ningún tema, no solo aquí).
Hacer que sea receptivamente una desventaja de acercarse a la columna es que se degrada rápidamente a medida que el tamaño de la pantalla se vuelve más pequeño. Lo que queremos hacer es manipular la cantidad de columnas, para que los elementos del artículo obtengan una cantidad sensible de espacio en la pantalla para mantener la integridad y el atractivo visual de los ladrillos. Entonces, agregemos algunas consultas de medios para cambiar el número de columnas dependiendo del tamaño de la pantalla: @media solo pantalla y (width máximo: 1024px) {
Body.Blog Div#Content, Body. Archive Div#Content { / * Masonry Container * /
-Moz-column-consumo: 3;
-Webkit-column-count: 3;
Conteo de columna: 3;}
}
@Media Only Screen y (Max-Device-Width: 1024px) y (Orientación: Retrato) {
Body.Blog Div#Content, Body. Archive Div#Content { / * Masonry Container * /
-Moz-column-consumo: 2;
-Webkit-column-count: 2;
Conteo de columna: 2;
}
}
@Media Only Screen y (Max-Width: 768px) {
Body.Blog Div#Content, Body. Archive Div#Content { / * Masonry Container * /
-Moz-column-consumo: 2;
-Webkit-column-count: 2;
Conteo de columna: 2;
}
}
@Media Only Screen y (Max-Width: 480px) {
Body.Blog Div#Content, Body. Archive Div#Content { / * Masonry Container * /
-Moz-column-consumo: 1;
-Webkit-column-count: 1;
Conteo de columna: 1;
}
}
Como puede ver, solo tenemos que cambiar la propiedad del número de columnas (y sus derivadas) para cada consulta.
Estos 4 puntos de interrupción, de los cuales 3 operarán en todas las plataformas (simplemente cambie el tamaño de la ventana del navegador para ver que tienen efectos) y 1 que es especial para un modo de retrato. Aquí está el estilo de mampostería en un iPad y iPhone:
Es fácil hacer que la cantidad de columnas responda al tamaño de la pantalla que puede (y debería, 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 publicaciones en una mampostería ¡La pared es bastante impresionante!
La colocación de postes en una cuadrícula
Las cuadrículas aportan orden y uniformidad a las listas de publicaciones si le gusta más uniformidad y orden que las ofertas de mampostería, entonces podría estar interesado en organizar sus publicaciones en una cuadrícula. Las cuadrículas son muy, muy fáciles de implementar, pero ciertamente funciona mejor cuando las imágenes presentadas son del mismo tamaño, de lo contrario, puede alcanzar con muchos espacios blancos que completan las “celdas” más cortas. Esta vez, el CSS es aún más corto, basado simplemente en el estilo de los elementos de elementos:/ * Diseño de la cuadrícula CSS CSS */ Body.blog, Body.Archive Artículo {

Ancho: 32.5%;

Pantalla: bloque en línea;
Align vertical: arriba;

Text-align: izquierda;
margen de fondo: 10px;
Posición: relativo;
}
Eso es todo lo que es absolutamente necesario. Nuevamente, usamos bloque en línea y nos aseguramos de que el contenido del artículo (título, imagen presentado, fragmento) esté alineado verticalmente.
La propiedad importante es el ancho, porque determina el número de “columnas”. Utilicé el 32.5% como valor inicial (el uso del 33% puede conducir a un embalaje prematuro) que proporcionará 3 columnas. Obviamente, si desea 4 columnas, usaría 24.5%, 5 columnas 19.5%, etc. Agregando la receptividad como nuestro estilo de mampostería, las cuadrículas deberán ser receptivas para mantener su eficiencia. Debido a que la propiedad de ancho determina el número de columnas, esta es la propiedad que se modificará en diferentes consultas de medios.
Body.blog Artículo, cuerpo. Archivo Artículo {
Ancho: 49%;
}
}
@Media Only Screen y (Max-Width: 768px) {
Body.blog Artículo, cuerpo. Archivo Artículo {
Ancho: 49%;
}
}
@Media Only Screen y (Max-Width: 480px) {Body.Blog Artículo, Body. Archive Artículo {
Ancho: 100%;
}
}
Solo 3 consultas esta vez, porque solo comencé con 3 columnas. Si decide comenzar con varias columnas, es posible que desee agregar un punto de interrupción de ancho máximo: 1024px para establecer el ancho en 32.5% (3 columnas). Esto dará como resultado:
2 columnas en una tableta en modo retrato
2 columnas cuando el tamaño de la pantalla es un ancho máximo de 768 PX
1 columna cuando el tamaño de la pantalla es un ancho máximo de 480 px
Estos puntos de interrupción cubrirán tanto tabletas como teléfonos inteligentes y cambiar el tamaño de la ventana del navegador. Aquí está la apariencia de la cuadrícula en un iPad y iPhone:
Solo unas pocas consultas de medios aseguran que la cuadrícula responda al cambio del tamaño de la pantalla, un poco más ordenado que la mampostería, pero realmente requiere consistencia y rigor cuando se trata del tamaño de la imagen presentada como la más eficiente. Agregar CSS personalizado a su sitio hay una serie de opciones cuando se trata de inyección CSS CSS a su sitio web de WordPress. Si su tema no incluye la posibilidad de agregar CSS personalizado, entonces sus opciones son:
Tema infantil: cree un tema infantil y agregue CSS a la hoja de estilo
Plugin-add el estilo elegido en un nuevo archivo CSS y cree un complemento que use la función de estilo WP-Enqueue, probablemente dependiendo de la página generada, para colocar el nuevo archivo.
Edite la hoja de estilo del tema actual, no, ¿no?
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 (complemento CSS simple, bien llamado es un complemento) me gusta usar el complemento CSS personalizado. Es rápido y fácil de configurar, simplifica las pruebas y es tan rápido y fácil de eliminar el CSS de su sitio de WordPress (elimine el editor o desinstale el complemento). CSS, el camino a WordPress Zen El maravilloso CSS Zen Garden ha demostrado durante muchos años que la apariencia y la sensación de un sitio pueden modificarse sustancialmente sin un solo cambio, pero cambiando el CSS. Aunque no están cerca del mismo nivel, estas dos técnicas muestran que cambiar la apariencia y la concepción de su sitio de WordPress también es totalmente posible, sin tener que cambiar plantillas, utilizando códigos cortos o en desarrollo de niños. Solo un pequeño CSS. Nota del editor: Esta publicación se ha actualizado para obtener precisión y relevancia. [Publicado originalmente: julio de 2014 / revisado: febrero de 2022] ¿Tiene un fragmento CSS favorito que usó en su sitio web de WordPress? Distribuirlo en los comentarios a continuación.

Etiquetas:
CSS
Parrilla