¿Quieres mostrar las publicaciones de WordPress en un diseño de cuadrícula?
Un diseño de cuadrícula le brinda más flexibilidad para 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 cualquier lugar de su sitio en un diseño de cuadrícula.
¿Cuándo necesitas 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 funcionan 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 da 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 fotografía ya utilizan el diseño basado en cuadrículas para mostrar las publicaciones. Sin embargo, si su tema no admite esta funcionalidad, deberá agregarla.
Dicho esto, le mostraremos cómo mostrar sus publicaciones de WordPress en un diseño de cuadrícula. Simplemente use los accesos directos a continuación para ir directamente al método que desea usar.
- Crea un diseño de cuadrícula con el editor de bloques de WordPress
- Cree un diseño de cuadrícula con el complemento Post Grid
- Cree un diseño de cuadrícula con el generador de páginas SeedProd
- Cree un diseño de cuadrícula agregando código a WordPress
Método 1. Cree un diseño de cuadrícula de publicación de WordPress con Block Editor
Con este método, puede mostrar fácilmente 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 postloop a su página.
Luego haga clic en la opción ‘Empezar en blanco’ en la parte superior del bloque para crear una cuadrícula de mensajes.
Esto le brinda algunas opciones diferentes, según el tipo de información que desea mostrar con su cuadrícula de mensajes.
Seleccionaremos la opción ‘Imagen, fecha y título’, pero puedes elegir lo que quieras.
Después de eso, coloque el puntero del mouse sobre la imagen y seleccione la opción ‘Vista de cuadrícula’.
Esto convierte su lista en una cuadrícula de mensajes.
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, 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 los mensajes de la misma manera o dejar más información del mensaje 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 habilite la opción ‘Enlace a publicación’ en el panel de opciones a la derecha.
Luego haz lo mismo con el título de tu publicación.
Cuando haya terminado, haga clic en el botón «Actualizar» o «Publicar» para que su cuadrícula de publicaciones 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 consultar 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 proporciona una manera fácil de agregar una cuadrícula de mensajes personalizable que puede agregar en cualquier parte de su sitio web.
Lo primero que debe hacer es instalar y activar el Publicar cuadrícula enchufar. Para obtener más información, consulte nuestra guía sobre cómo instalar un complemento de WordPress.
Después de la activación, debe visitar Publicar cuadrícula » Agregar nuevo para crear su primera cuadrícula de mensajes.
Luego dale un título a tu cuadrícula de mensajes. Esto no aparecerá en ninguna parte de su página, es solo para ayudarlo a recordar.
A continuación se muestran los ajustes de la cuadrícula de publicaciones divididas en varias secciones con varias pestañas.
Primero debe hacer clic en la pestaña ‘Consultar publicación’. Aquí define los tipos de mensajes que desea mostrar en el cuadro ‘Tipos de mensajes’.
De manera predeterminada, solo se muestran las 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 abre 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 aparecerá en su cuadrícula de publicación.
Seleccionamos 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 para que seleccione.
Simplemente haga clic en el nuevo diseño en la sección ‘Diseños de elementos’ en la parte inferior de la pantalla.
Luego haga clic en la pestaña ‘Estilo del artículo’. 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 de publicación’.
A continuación, abra la página en la que desea mostrar su lista de mensajes y haga clic en el botón de bloqueo ‘Más’.
Luego busque ‘Shortcode’ y seleccione el bloque ‘Shortcode’.
Luego 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 para la creación 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 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 edita su página, haga clic en el botón más ‘Agregar sección’ en cualquier parte de la página.
Esto abrirá una opción para agregar un nuevo bloque.
Luego arrastre el bloque ‘Publicaciones’ a su página y automáticamente agregará una lista de publicaciones a su página.
Ahora puedes personalizar este bloque usando el panel de opciones a 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 los interruptores ‘Mostrar imagen de función’ y ‘Mostrar título’.
Luego, desplácese hacia abajo hasta el botón «Mostrar extracto» y el botón «Mostrar leer más» y desactívelos para crear un diseño de cuadrícula simple para las publicaciones del blog.
Para personalizar el esquema de color, el texto y más, haga clic en la pestaña «Avanzado» en la parte superior de la columna izquierda.
Luego haga clic en el menú desplegable «Texto» y realice los cambios.
Puede cambiar el diseño de su página y publicación de blog con la frecuencia que 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 mensajes 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 algunos conocimientos básicos sobre cómo agregar código a WordPress. Si no lo ha hecho antes, consulte nuestra guía para copiar y pegar código en WordPress.
Antes de agregar código, debe crear un nuevo tamaño de imagen para usar en 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, debe 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 encontrar el archivo de plantilla de tema adecuado.
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 establece la consulta de bucle posterior. 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 muestra 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 se refiere a ‘imagen posterior’, por lo que deberá cambiar esto al nombre del tamaño de la imagen que creó anteriormente.
Luego 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 agregamos para evitar conflictos de código.
Así es como se ve el fragmento de código final en su totalidad.
<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 debe agregar el siguiente CSS a su sitio para asegurarse de que su cuadrícula de publicación se represente correctamente.
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 cambiar los distintos selectores de CSS para ver cómo cambian los diferentes elementos de su ciclo posterior.
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 para elegir el mejor software de diseño web y nuestra selección experta 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.
La publicación Cómo mostrar sus publicaciones de WordPress en un diseño de cuadrícula apareció primero en AprenderWP.