Cómo crear una cuadrícula de visualización 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 publicación de publicaciones? El diseño de cuadrícula funciona muy bien para sitios centrados en medios como nuestra galería de WordPress u otro sitio tipo escaparate. Los marcos temáticos como Genesis ya tienen un sistema Grid Loop prediseñado. Sin embargo, si está tratando de mostrar una cuadrícula en su tema personalizado de WordPress, estamos aquí para ayudarlo. En este artículo, le mostraremos cómo crear una visualización de cuadrícula en bucle de miniaturas de publicaciones en su tema de WordPress. Nota: Debe tener un buen conocimiento de CSS y cómo funciona el ciclo de WordPress. Antes de comenzar, echemos un vistazo a lo que estamos tratando de lograr:

Si se da cuenta, los artículos de esta página se muestran en una cuadrícula. Hay un borde en los postes del lado izquierdo, pero no del lado derecho. Con un bucle de publicación normal, todas las publicaciones siguen el mismo estilo, por lo que tendrá un borde recto en ambas publicaciones que se vería extraño. También tenga en cuenta que el espaciado es bastante simétrico. Lo cual nuevamente no es posible con el bucle normal para hacer algo como esto. Ahora que puede ver lo que estamos tratando de lograr, veamos cómo lograrlo. Lo primero que debe hacer es asegurarse de que las miniaturas de publicaciones de WordPress estén habilitadas en su tema. También debe pensar en cómo desea cambiar el tamaño de sus imágenes de WordPress según sea necesario. Una vez que haya configurado las miniaturas y los tamaños, comencemos con esto. Le permite configurar nuestras solicitudes de loopback:

El código anterior parece bastante sencillo, ya que hemos estado comentando en línea. Una cosa que probablemente necesitaría modificar es la variable posts_per_page para que se adapte a sus necesidades. También puede agregar otros parámetros de consulta si lo desea. Ahora que hemos comenzado el ciclo, veamos cómo queremos mostrar los mensajes dentro.

Comenzamos el código verificando si el contador es 1, lo que significa mostrar nuestra cuadrícula izquierda. Simplemente entramos y comenzamos un div con una clase CSS personalizada «griditemleft». Dentro hemos agregado la miniatura y el título de la publicación. Puede agregar o restar todos los elementos del bucle (como fragmentos, fechas, información del autor, número de comentarios, etc.). Nota: en nuestras miniaturas llamamos tamaño de imagen extra. Probablemente necesitará reemplazar el nombre del tamaño con su propio tamaño que creó. Después de la primera cuadrícula, agregamos un elseif que verifica si el contador $ coincide con el número especificado en nuestras $ cuadrículas (que debería ser porque estaremos en la segunda publicación). Si el contador coincide, podemos mostrar nuestra cuadrícula derecha que comienza con una clase CSS personalizada «griditemright». Observe que después de cerrar el div griditemright, agregamos una clase clara. Te lo explicaremos cuando lleguemos a la parte de CSS. Una vez que se completa el ciclo, restablecemos el contador a 0, para que pueda comenzar de nuevo en la siguiente fila. Podemos terminar el ciclo que comenzamos agregando este código:

El código anterior básicamente continúa el contador hasta que alcanza el límite especificado en nuestra variable query_post. La razón por la que no agregamos el código de navegación anterior es que mucha gente usa un complemento o método de visualización diferente. Así que dejamos que usted decida por sí mismo. Entonces, nuestro código de ciclo final se verá así:

Ahora que tenemos el código PHP listo, veamos cómo le vamos a diseñar. Nuestra salida predeterminada se vería así:

Estas son las clases que necesita modificar: #gridcontainer {margin: 20px 0; ancho: 100%; } #gridcontainer h2 a {color: # 77787a; tamaño de fuente: 13px;} #gridcontainer .griditemleft {float: left; ancho: 278px; margin: 0 40px 40px 0;} #gridcontainer .griditemright {float: left; width: 278px;} #gridcontainer .postimage {margin: 0 0 10px 0;} Esperamos que este tutorial lo oriente en la dirección correcta para crear una cuadrícula de visualización en bucle para sus publicaciones de WordPress.