Cómo mostrar sus entradas de WordPress en una estructura / disposición / diseño / plantilla

¿Quieres mostrar entradas de WordPress en una disposición de cuadrícula?

Una disposición en cuadrícula le ofrece más flexibilidad a la hora de mostrar sus entradas en WordPress. Esto puede ser útil a la hora de crear páginas personalizadas.

En este artículo, le mostraremos cómo mostrar fácilmente sus entradas de WordPress en una disposición de cuadrícula en cualquier lugar de su sitio.

¿Cuándo necesita una estructura / disposición / diseño / plantilla para WordPress?

Todos los temas de WordPress son compatibles con la tradicional disposición vertical de las entradas de blog, que funciona bien en la mayoría de los sitios web. Sin embargo, esta disposición puede ocupar mucho espacio, sobre todo si tienes muchas entradas.

Si está creando una página de inicio personalizada para su sitio, entonces puede que desee utilizar la disposición de cuadrícula para mostrar sus entradas recientes.

Así tendrá más espacio para añadir otros elementos a su página de inicio / página de inicio.

Además, la cuadrícula de entradas resaltará las imágenes destacadas, para que sea visualmente atractiva y se pueda hacer clic en ella. También puede utilizar la cuadrícula de entradas para mostrar su porfolio creativo y otros tipos de contenido personalizado.

Muchos temas de revistas y temas de fotografía ya utilizan la disposición en cuadrícula para mostrar las entradas. Sin embargo, si tu tema no es compatible con esta funcionalidad, tendrás que añadirla.

Dicho esto, vamos a mostrarte cómo mostrar tus entradas de WordPress en una disposición de cuadrícula. Simplemente utilice los enlaces rápidos a continuación para saltar directamente al método que desea utilizar.

• Crear una disposición de cuadrícula con el editor de bloques de WordPress
• Crear una disposición de cuadrícula con el plugin Post Grid
• Crear una cuadrícula con el maquetador de páginas SeedProd
• Crear una disposición de cuadrícula añadiendo código a WordPress

Tutorial en vídeo

Si prefiere instrucciones escritas, siga leyendo.

Método 1. Crear una disposición de cuadrícula de entradas de WordPress con el editor de bloques

Este método te permite mostrar tus entradas y miniaturas en una disposición de cuadrícula de entradas utilizando el editor de bloques de WordPress. Hay un bloque de cuadrícula de entradas integrado que te permite crear tu propia cuadrícula.

Para ello, abra la página que desea editar, haga clic en el botón “Más” para añadir un bloque y busque “Bucle de consulta”; a continuación, haga clic en el bloque para añadirlo.

Este bloque añade el bucle de entradas a tu página.

A continuación, haz clic en la opción “Empezar en blanco” de la parte superior del bloque para crear una cuadrícula de entradas.

Esto ofrece varias opciones en función del tipo de información que desee mostrar en la cuadrícula de entradas.

Nosotros seleccionaremos la opción “Imagen, fecha y título”, pero tú puedes elegir lo que quieras.

A continuación, pase el cursor sobre la imagen y seleccione la opción “Vista de cuadrícula”.

Esto convierte tu lista en una cuadrícula de entradas.

A continuación, puede personalizar la información que desea mostrar.

En primer lugar, vamos a borrar la paginación de la parte inferior del bloque. Para ello, basta con hacer clic sobre ella y pulsar el menú de opciones “Tres puntos”.

A continuación, haga clic en “Quitar / eliminar paginación”.

Esto quitará / eliminará automáticamente el elemento del bloque.

Puedes borrar las fechas de las entradas de la misma manera o dejar más información de la entrada para tus visitantes.

A continuación, añadiremos enlaces a la miniatura y al título de la entrada.

Sólo tiene que hacer clic en la miniatura de su entrada y activar el conmutador “Enlazar a entrada” del panel de opciones de la derecha.

A continuación, haga lo mismo con el título de su entrada.

Cuando hayas terminado, haz clic en el botón “Actualizar” o “Publicar” para activar la cuadrícula de entradas.

Ahora, puede visitar su sitio web de WordPress para ver su nueva cuadrícula de entradas de WordPress.

Puedes añadir este bloque a cualquier página o entrada. Si desea utilizarlo como página de archivo de su blog, consulte nuestra guía práctica sobre cómo crear una página independiente para entradas de blog en WordPress.

Método 2. Crear una estructura / disposición / diseño / plantilla de entradas de WordPress con el plugin Post Grid.

Este método ofrece una forma sencilla de añadir una cuadrícula de entradas personalizable que puede añadir en cualquier lugar de su sitio web.

Lo primero que tienes que hacer es instalar y activar el plugin Post Grid. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez activado, debe visitar Cuadrícula de entradas ” Añadir nueva para crear su primera cuadrícula de entradas.

A continuación, dale un título a la cuadrícula de tu entrada. Esto no aparecerá en ninguna parte de su página es sólo para ayudarle a recordar.

Debajo encontrará los ajustes de la cuadrícula de entradas divididos en diferentes secciones con varias pestañas.

En primer lugar, tienes que hacer clic en la pestaña “Consulta de entradas”. Aquí es donde definirá los tipos de entradas que desea mostrar en el cuadro “Tipos de entradas”.

Por defecto, solo mostrará entradas, pero puedes añadir páginas e incluso tipos de contenido personalizados.

A continuación, deberá hacer clic en la pestaña “Disposiciones”.

A continuación, haga clic en el botón “Crear disposición”. Se abrirá una nueva ventana.

Tienes que ponerle un nombre a tu disposición / disposición / diseño / plantilla. A continuación, haga clic en la opción “General” y se abrirá una lista de etiquetas.

Estas etiquetas son la información que se mostrará en la cuadrícula de entradas.

Seleccionaremos la opción “Miniatura con enlace” y la opción “Título de entrada con enlace”.

A continuación, haga clic en “Publicar” o “Actualizar” para guardar la estructura / disposición / diseño / plantilla.

Ahora, vuelva al editor de la cuadrícula de entradas original en la pestaña anterior, y habrá una nueva opción de disposición disponible que puede seleccionar.

Basta con hacer clic en la nueva estructura / disposición / diseño / plantilla de la sección “Estructura de los elementos / artículo”, en la parte inferior de la pantalla.

A continuación, haga clic en la pestaña “Estilo del elemento”. Aquí puedes establecer el tamaño de tu cuadrícula.

Los ajustes por defecto deberían funcionar para la mayoría de los sitios, pero si no es así, puede cambiarlos aquí.

Cuando hayas terminado, haz clic en el botón “Publicar” de la parte superior de la página y tu cuadrícula estará lista para añadirla a tu blog de WordPress.

Ahora, tienes que hacer clic en la pestaña ‘Shortcode’ y luego copiar el shortcode en la casilla ‘Post Grid Shortcode’.

A continuación, abra la página en la que desea mostrar su lista de entradas y haga clic en el botón “Más” para añadir un bloque.

A continuación, busque “Shortcode” y seleccione el bloque “Shortcode”.

A continuación, pegue en el cuadro el shortcode que ha copiado anteriormente.

A continuación, haga clic en el botón “Actualizar” o “Publicar”.

Ahora, usted puede ver su página para ver su estructura / disposición / diseño / plantilla de entradas de WordPress en vivo.

Método 3. Crear una estructura / disposición / diseño / plantilla de la cuadrícula de entradas de WordPress con el plugin SeedProd Page Builder.

Otra forma de crear una estructura / disposición / diseño / plantilla de entradas es utilizando el plugin SeedProd page builder. Es el mejor editor de arrastrar y soltar página de WordPress en el mercado utilizado por más de 1 millón de sitios web.

SeedProd le ayuda a crear fácilmente páginas personalizadas e incluso temas de WordPress completamente personalizados sin escribir ningún código. Puedes utilizar el plugin para crear cualquier tipo de página que desees, como páginas 404, páginas de próximo lanzamiento, páginas de destino y mucho más.

Para obtener más información, consulte nuestra guía sobre cómo crear una página personalizada en WordPress.

En el maquetador SeedProd, cuando esté personalizando su página, simplemente haga clic en el botón “Añadir sección” en cualquier parte de la página.

Aparecerá una opción para añadir un nuevo bloque.

A continuación, arrastra el bloque “Entradas” a tu página y automáticamente se añadirá un catálogo de entradas a tu página.

Ahora, puede personalizar este bloque con el panel de opciones de la izquierda.

En primer lugar, desplázate hasta la sección “Disposición / diseño / plantilla”. Aquí puedes establecer el número de columnas de la cuadrícula de entradas de tu blog y activar los conmutadores “Mostrar imagen característica” y “Mostrar título”.

A continuación, desplácese hacia abajo hasta el conmutador “Mostrar extracto” y los conmutadores “Mostrar leer más” y desactívelos para crear una estructura / disposición / diseño / plantilla de entradas de blog sencilla.

Si desea personalizar la combinación de colores, el texto, etc., haga clic en la pestaña “Avanzado” situada en la parte superior de la columna de la izquierda.

A continuación, haz clic en el menú desplegable “Texto” y realiza los cambios que desees.

Puede seguir personalizando la disposición de la cuadrícula de su página y entradas de blog tanto como desee.

Cuando haya terminado, haga clic en el botón “Guardar” y seleccione “Publicar” en la parte superior de la página para hacer efectivos los cambios.

Ahora, puedes ver tu nueva cuadrícula de entradas en tu sitio web.

Método 4. Crear una disposición de cuadrícula de entradas de WordPress añadiendo código a WordPress

Este método requiere conocimientos básicos sobre cómo añadir 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 añadir código, necesitas crear un nuevo tamaño de imagen que usarás para la cuadrícula de entradas. Para obtener más información, consulte nuestra guía sobre cómo crear tamaños de imagen adicionales en WordPress.

A continuación, tendrás que encontrar el archivo de tema de WordPress adecuado en el que añadirás el fragmento de código. Por ejemplo, puedes añadirlo a tu single.php, para que aparezca en la parte inferior de todas tus entradas.

También puede crear una plantilla de página personalizada y utilizarla para mostrar la disposición en cuadrícula de las entradas de su blog con miniaturas.

Para obtener más información, consulte nuestra hoja de trucos de jerarquía de plantillas de WordPress para ayudarle a encontrar el archivo de plantilla de tema adecuado.

Una vez hecho esto, puede empezar a añadir código a WordPress. Dado que el fragmento de código es bastante largo, lo desglosaremos sección por sección.

En primer lugar, añada el siguiente fragmento de código al archivo de plantilla de su 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 del bucle de entradas. Si lo desea, puede cambiar la variable ‘posts_per_page’ para mostrar más entradas por página.

A continuación, añada el siguiente fragmento de código al archivo de plantilla de su 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 entradas y mostrará el título y la imagen de la entrada. También crea una clase CSS que le mostraremos cómo aplicar estilos más adelante.

También hace referencia a “postimage”, por lo que tendrás que cambiarlo por el nombre del tamaño de imagen que creaste anteriormente.

A continuación, añada 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 bucle. También da la opción de añadir la navegación de entradas, pero la mayoría de los propietarios de sitios web utilizan un plugin diferente para esto, así que no lo incluimos para evitar conflictos de código.

Este es el aspecto final del fragmento de código.

<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, tendrás que añadir el siguiente CSS a tu sitio para asegurarte de que la cuadrícula de entradas se muestra correctamente.

Si no lo ha hecho antes, consulte nuestra guía sobre cómo añadir 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;
}

Puedes modificar los diferentes selectores CSS para ver cómo cambian los diferentes elementos del bucle de tu entrada.

Esperamos que este artículo te haya ayudado a aprender cómo mostrar tus entradas de WordPress en una disposición de cuadrícula. También puedes consultar nuestra guía sobre cómo elegir el mejor software de diseño web y nuestra selección de expertos sobre el mejor software de chat en directo para pequeñas empresas.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.