¿Quieres mostrar las publicaciones de WordPress en un diseño de cuadrícula?
Un diseño de cuadrícula le brinda más flexibilidad al mostrar sus publicaciones en WordPress. Esto puede ser útil al crear páginas personalizadas.
En este artículo, le mostraremos cómo mostrar fácilmente sus publicaciones de WordPress en un diseño de cuadrícula en cualquier lugar de su sitio.
¿Cuándo necesita un diseño de cuadrícula para WordPress?
Todos los temas de WordPress admiten el diseño vertical tradicional de las publicaciones de blog, y esto funciona bien para la mayoría de los tipos de sitios web. Sin embargo, este diseño puede ocupar mucho espacio, especialmente si tiene muchas publicaciones.
Si está creando una página de inicio personalizada para su sitio, es posible que desee utilizar el diseño de cuadrícula para mostrar sus publicaciones recientes.
Esto le dará más espacio para agregar otros elementos a su página de inicio.
Además, su cuadrícula de publicación resaltará sus imágenes destacadas, por lo que es visualmente atractivo y se puede hacer clic en él. También puede usar la cuadrícula de publicaciones para mostrar su cartera creativa y otros tipos de contenido personalizado.
Muchos temas de revistas y temas de fotografía ya utilizan el diseño basado en cuadrículas para mostrar las publicaciones. Sin embargo, si su tema no es compatible con esta funcionalidad, deberá agregarlo.
Dicho esto, le mostraremos cómo mostrar sus publicaciones de WordPress en un diseño de cuadrícula. Simplemente use los enlaces rápidos a continuación para saltar directamente al método que desea usar.
Método 1. Cree un diseño de cuadrícula de publicación de WordPress con Block Editor
Este método le permite simplemente mostrar sus publicaciones y miniaturas en un diseño de cuadrícula de publicación utilizando el editor de bloques de WordPress. Hay un bloque de cuadrícula posterior incorporado que le permite crear su propia cuadrícula.
Para hacer esto, abra la página que desea editar, luego haga clic en el botón Agregar bloque ‘Más’ y busque ‘Bucle de consulta’, luego haga clic en el bloque para agregarlo.
Este bloque agrega su bucle de publicación a su página.
Luego, haga clic en la opción ‘Comenzar en blanco’ en la parte superior del bloque para crear una cuadrícula de publicaciones.
Esto brinda algunas opciones diferentes según el tipo de información que desea mostrar con su cuadrícula de publicación.
Seleccionaremos la opción ‘Imagen, fecha y título’, pero puedes elegir lo que quieras.
Después de eso, pase el cursor sobre la imagen y seleccione la opción ‘Vista de cuadrícula’.
Esto convierte su lista en una cuadrícula de publicaciones.
A continuación, puede personalizar la información que desea mostrar.
Primero, vamos a eliminar la paginación en la parte inferior del bloque. Para hacer esto, simplemente haga clic en él y haga clic en el menú de opciones ‘Tres puntos’.
Luego, haga clic en ‘Eliminar paginación’.
Esto eliminará automáticamente el elemento del bloque.
Puede eliminar las fechas de las publicaciones de la misma manera o dejar más información de la publicación para sus visitantes.
A continuación, agregaremos enlaces tanto a la miniatura de la publicación como al título de la publicación.
Simplemente haga clic en la miniatura de su publicación y active la opción ‘Enlace a publicación’ en el panel de opciones de la derecha.
Luego, haz lo mismo con el título de tu publicación.
Una vez que haya terminado, haga clic en el botón ‘Actualizar’ o ‘Publicar’ para que su cuadrícula de publicación esté activa.
Ahora, puede visitar su sitio web de WordPress para ver su nueva cuadrícula de publicaciones de WordPress.
Puede agregar este bloque a cualquier página o publicación. Si desea usar esto como su página de archivo de blog, puede ver nuestra guía sobre cómo crear una página separada para publicaciones de blog en WordPress.
Método 2. Cree un diseño de cuadrícula de publicación de WordPress con el complemento de cuadrícula de publicación
Este método ofrece una forma sencilla de agregar una cuadrícula de publicación personalizable que puede agregar en cualquier lugar de su sitio web.
Lo primero que debe hacer es instalar y activar el Publicar cuadrícula enchufar. Para obtener más detalles, consulte nuestra guía sobre cómo instalar un complemento de WordPress.
Tras la activación, debe visitar Publicar cuadrícula » Agregar nuevo para crear su primera cuadrícula de publicación.
Luego, dale un título a tu cuadrícula de publicaciones. Esto no aparecerá en ninguna parte de su página, es solo para ayudarlo a recordar.
Debajo de esto, encontrará la configuración de la cuadrícula de publicaciones dividida en diferentes secciones con múltiples pestañas.
Primero, debe hacer clic en la pestaña ‘Consultar publicación’. Aquí es donde definirá los tipos de publicación que desea mostrar en el cuadro ‘Tipos de publicación’.
De forma predeterminada, solo mostrará publicaciones, pero puede agregar páginas e incluso tipos de publicaciones personalizadas.
Después de eso, debe hacer clic en la pestaña ‘Diseños’.
Luego, haga clic en el botón ‘Crear diseño’. Esto se abrirá en una nueva ventana.
Necesitas nombrar tu diseño. Luego, haga clic en la opción ‘General’ y se abrirá una lista de etiquetas.
Estas etiquetas son la información que se mostrará en su cuadrícula de publicación.
Seleccionaremos la opción ‘Miniatura con enlace’ y la opción ‘Publicar título con enlace’.
Luego, haga clic en ‘Publicar’ o ‘Actualizar’ para guardar su diseño.
Ahora, regrese al editor de cuadrícula de publicación original en la pestaña anterior, y habrá una nueva opción de diseño disponible que puede seleccionar.
Simplemente haga clic en el nuevo diseño en la sección ‘Diseños de elementos’ en la parte inferior de la pantalla.
A continuación, haga clic en la pestaña ‘Estilo de elemento’. Aquí puede establecer el tamaño de su cuadrícula.
La configuración predeterminada debería funcionar para la mayoría de los sitios, pero si no, puede cambiarla aquí.
Una vez que haya terminado, haga clic en el botón ‘Publicar’ en la parte superior de la página y su cuadrícula estará lista para agregarse a su blog de WordPress.
Ahora, debe hacer clic en la pestaña ‘Código corto’ y luego copiar el código corto en el cuadro ‘Código corto de cuadrícula posterior’.
Después de eso, abra la página donde desea mostrar su lista de publicaciones y haga clic en el botón Agregar bloque ‘Más’.
Luego, busque ‘Código corto’ y seleccione el bloque ‘Código corto’.
A continuación, pegue el código abreviado que copió anteriormente en el cuadro.
Luego, haga clic en el botón ‘Actualizar’ o ‘Publicar’.
Ahora, puede ver su página para ver el diseño de la cuadrícula de publicaciones de WordPress en vivo.
Método 3. Cree un diseño de cuadrícula de publicación de WordPress con el complemento SeedProd Page Builder
Otra forma de crear un diseño de cuadrícula posterior es usar el Producto de semilla Complemento del creador de páginas. Es el mejor generador de páginas de WordPress de arrastrar y soltar en el mercado utilizado por más de 1 millón de sitios web.
SeedProd lo ayuda a crear fácilmente páginas personalizadas e incluso temas de WordPress completamente personalizados sin escribir ningún código. Puede usar el complemento para crear cualquier tipo de página que desee, como páginas 404, próximamente páginas, páginas de destino y más.
Para obtener más información, consulte nuestra guía sobre cómo crear una página personalizada en WordPress.
En el generador de SeedProd, mientras personaliza su página, simplemente haga clic en el botón «Agregar sección» en cualquier parte de la página.
Esto abrirá una opción para agregar un nuevo bloque.
A continuación, arrastre el bloque ‘Publicaciones’ a su página y automáticamente agregará una lista de publicaciones a su página.
Ahora, puede personalizar este bloque con el panel de opciones de la izquierda.
Primero, desplácese hacia abajo hasta la sección ‘Diseño’. Aquí puede establecer el número de columnas para la cuadrícula de su publicación de blog y activar las opciones ‘Mostrar imagen destacada’ y ‘Mostrar título’.
A continuación, desplácese hacia abajo hasta el botón ‘Mostrar extracto’ y ‘Mostrar leer más’ y desactívelos para crear un diseño de cuadrícula de publicación de blog simple.
Si desea personalizar el esquema de color, el texto y más, haga clic en la pestaña «Avanzado» en la parte superior de la columna de la izquierda.
Luego, haga clic en el menú desplegable ‘Texto’ y realice sus cambios.
Puede continuar personalizando su página y el diseño de la cuadrícula de publicaciones de blog tanto como desee.
Una vez que haya terminado, haga clic en el botón ‘Guardar’ y seleccione el menú desplegable ‘Publicar’ en la parte superior de la página para hacer sus cambios en vivo.
Ahora, puede ver su nueva cuadrícula de publicaciones en su sitio web.
Método 4. Cree un diseño de cuadrícula de publicación de WordPress agregando código a WordPress
Este método requiere una comprensión básica de cómo agregar código a WordPress. Si no lo ha hecho antes, consulte nuestra guía sobre cómo copiar y pegar código en WordPress.
Antes de agregar código, debe crear un nuevo tamaño de imagen que usará para su cuadrícula de publicación. Para obtener más información, consulte nuestra guía sobre cómo crear tamaños de imagen adicionales en WordPress.
A continuación, deberá encontrar el archivo de tema de WordPress correcto donde agregará el fragmento de código. Por ejemplo, puede agregarlo a su single.php, para que aparezca en la parte inferior de todas sus publicaciones.
También puede crear una plantilla de página personalizada y usarla para mostrar el diseño de cuadrícula de su publicación de blog con miniaturas.
Para obtener más información, consulte nuestra hoja de trucos de la jerarquía de plantillas de WordPress para ayudar a encontrar el archivo de plantilla de tema correcto.
Una vez que haya hecho eso, puede comenzar a agregar código a WordPress. Dado que el fragmento de código es bastante largo, lo desglosaremos sección por sección.
Primero, agregue el siguiente fragmento de código a su archivo de plantilla de tema.
<?php $counter = 1; //start counter $grids = 2; //Grids per row global $query_string; //Need this to make pagination work /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/ query_posts($query_string . '&caller_get_posts=1&posts_per_page=12'); if(have_posts()) : while(have_posts()) : the_post(); ?>
Este fragmento de código configura la consulta de post loop. Puede cambiar la variable ‘posts_per_page’ para mostrar más publicaciones por página si lo desea.
Luego, agregue el siguiente fragmento de código a su archivo de plantilla de tema.
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="griditemleft">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
Este fragmento de código crea dos columnas para nuestras publicaciones y mostrará el título y la imagen de la publicación. También crea una clase CSS a la que le mostraremos cómo aplicar estilo más adelante.
También hace referencia a ‘postimage’, por lo que deberá cambiarlo por el nombre del tamaño de imagen que creó anteriormente.
Después de eso, agregue el siguiente fragmento de código al final.
<?php $counter++; endwhile; //Post Navigation code goes here endif; ?>
Este fragmento de código simplemente cierra el ciclo. También ofrece la opción de agregar navegación posterior, pero la mayoría de los propietarios de sitios web usan un complemento diferente para esto, por lo que no lo incluimos para evitar conflictos de código.
Así es como se ve el fragmento de código final en conjunto.
<div id="gridcontainer">
<?php
$counter = 1; //start counter
$grids = 2; //Grids per row
global $query_string; //Need this to make pagination work
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');
if(have_posts()) : while(have_posts()) : the_post();
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
<div class="griditemleft">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
<div class="postimage">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
</div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>
</div>
Ahora, deberá agregar el siguiente CSS a su sitio para asegurarse de que su cuadrícula de publicaciones se muestre bien.
Si no lo ha hecho antes, consulte nuestra guía sobre cómo agregar fácilmente CSS personalizado a su sitio de WordPress.
#gridcontainer{
margin: 20px 0;
width: 100%;
}
#gridcontainer h2 a{
color: #77787a;
font-size: 13px;
}
#gridcontainer .griditemleft{
float: left;
width: 278px;
margin: 0 40px 40px 0;
}
#gridcontainer .griditemright{
float: left;
width: 278px;
}
#gridcontainer .postimage{
margin: 0 0 10px 0;
}
Puede modificar los diferentes selectores de CSS para ver cómo cambian los diferentes elementos de su ciclo de publicación.
Esperamos que este artículo le haya ayudado a aprender cómo mostrar sus publicaciones de WordPress en un diseño de cuadrícula. También puede consultar nuestra guía sobre cómo elegir el mejor software de diseño web y nuestra selección de expertos del mejor software de chat en vivo para pequeñas empresas.
Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.