Cómo crear una visualización de cuadrícula de miniaturas de publicaciones en temas de WordPress

Al crear diseños de sitios de WordPress, ¿alguna vez ha tenido la necesidad de crear una cuadrícula de publicaciones? El diseño de la cuadrícula funciona muy bien para los sitios centrados en los medios, como nuestra galería de WordPress u otro sitio de tipo escaparate. Los marcos de temas como Genesis ya tienen un sistema Grid Loop pre-construido. Sin embargo, si está tratando de hacer una visualización de cuadrícula en su tema personalizado de WordPress, entonces estamos aquí para ayudarlo. En este artículo, le mostraremos cómo crear una visualización de bucle de cuadrícula de miniaturas de publicaciones en su tema de WordPress.

Nota: debe tener una comprensión justa de CSS y cómo funciona el bucle de WordPress.

Antes de comenzar, echemos un vistazo a lo que estamos tratando de lograr:

Si observa, las publicaciones en esta página se muestran en una cuadrícula. Hay un borde en los postes en el lado izquierdo, pero no en el lado derecho. Con un bucle de publicaciones normal, todas las publicaciones siguen el mismo estilo, por lo que tendrá un borde derecho en ambas publicaciones que se vería extraño. Observa también, el espaciado es bastante simétrico. Lo que de nuevo no es posible con el bucle normal para hacer algo como esto. Ahora que puede ver lo que estamos tratando de lograr, echemos un vistazo a cómo lograrlo.

Lo primero que debe hacer es asegurarse de que su tema tenga activadas las miniaturas de publicaciones de WordPress. También debes pensar en cómo quieres redimensionar tus imágenes de WordPress porque las necesitarás.

Una vez que tenga la configuración de miniaturas y tamaños, comencemos esto. Permite configurar nuestras consultas de bucle:

El código anterior parece bastante sencillo porque hemos realizado comentarios en línea. Una cosa que probablemente necesitaría editar es la variable posts_per_page para satisfacer sus necesidades. También puede agregar otros parámetros de consulta si lo desea. Ahora que hemos iniciado el ciclo, veamos cómo queremos mostrar las publicaciones dentro de él..

Comenzamos el código verificando si el contador es 1, lo que significa mostrar nuestra cuadrícula izquierda. Simplemente vamos y comenzamos un div con una clase de css personalizada "griditemleft". Dentro de ella agregamos la miniatura del post y el título del post. Puede agregar o restar cualquier elemento del bucle (como extractos, fechas, información del autor, conteo de comentarios, etc.). Aviso: En nuestras miniaturas, estamos llamando a un tamaño de imagen adicional. Probablemente tendrá que reemplazar el nombre de tamaño con el tamaño que creó..

Después de la primera cuadrícula, agregamos un elseif que mira para ver si el contador de $ coincide con el número especificado en nuestras cuadrículas de $ (que debería porque estaremos en la segunda publicación). Si el contador coincide, entonces podemos mostrar nuestra cuadrícula derecha que comienza con una clase de css personalizada "griditemright". Observe que después de cerrar la división griditemright, estamos agregando una clase clara. Esto lo explicaremos cuando lleguemos a la parte CSS..

Una vez que el bucle termina con esto, restablecemos el contador a 0, para que pueda comenzar de nuevo en la siguiente fila.

Simplemente podemos terminar el ciclo que comenzamos agregando este código:

El código anterior básicamente continúa con el contador hasta que alcanza el límite que se especifica en nuestra variable query_post. La razón por la que no agregamos el código de navegación de publicación anterior es porque muchas personas usan un complemento o un método de visualización diferente para esto. Así que lo dejamos abierto para que usted decida por sí mismo..

Así que nuestro código de bucle final se verá así:

Ahora que tenemos el código PHP listo, veamos cómo lo vamos a diseñar..

Nuestra salida por defecto se vería así:

    Publicar imagen 
Título de la entrada
    Publicar imagen 
Título de la entrada
    

Aquí están las clases que necesitas modificar:

 #gridcontainer margen: 20px 0; ancho: 100%;  #gridcontainer h2 a color: # 77787a; font-size: 13px; #gridcontainer .griditemleft float: left; ancho: 278px; margen: 0 40px 40px 0; #gridcontainer .griditemright float: left; ancho: 278px; #gridcontainer .postimage margen: 0 0 10px 0; 

Esperamos que este tutorial lo guíe en la dirección correcta hacia la creación de una cuadrícula para sus publicaciones de WordPress..