Cómo Mostrar Fácilmente una Lista de Páginas con Miniaturas en WordPress

¿Quieres una forma fácil de hacer que las listas de tus páginas de WordPress sean más atractivas? Agregar miniaturas es una técnica simple pero efectiva para mejorar el atractivo visual y la navegación del sitio.

Mostrar imágenes destacadas junto a los títulos de tus páginas brinda a tus visitantes más información sobre el contenido, por lo que es más probable que hagan clic y visiten esas páginas.

En WPBeginner, hemos ayudado a muchos usuarios a optimizar sus sitios de WordPress y sabemos que este truco puede marcar una gran diferencia. 

En este artículo, te mostraremos cómo mostrar una lista de páginas con miniaturas en WordPress, paso a paso.

¿Por qué mostrar una lista de páginas con miniaturas en WordPress?

WordPress tiene dos tipos de publicaciones diferentes llamados publicaciones y páginas.

Las páginas se utilizan para contenido más perenne, como las páginas "Acerca de nosotros", "Contáctanos" y "Servicios", mientras que las publicaciones se utilizan para contenido de blog que se actualiza con más frecuencia.

Tus páginas más importantes generalmente están vinculadas desde tu menú de navegación principal, pero es posible que tengas más páginas que quieras mostrar.

Al agregar una lista de páginas con miniaturas, puedes hacer que tus enlaces sean más atractivos que los enlaces de texto estándar y dar a tus visitantes una mejor idea del contenido de cada página en tu sitio web de WordPress.

Cuando los visitantes están comprometidos e interesados, es probable que visiten más páginas y permanezcan más tiempo en tu sitio web, lo que aumenta la probabilidad de que realicen una compra o se unan a tu lista de correo electrónico.

Dicho esto, veamos algunas formas diferentes en las que puedes mostrar una lista de páginas con miniaturas en tu sitio web. Simplemente usa los enlaces rápidos a continuación para saltar directamente al método que deseas usar:

• Método 1. Mostrar una lista de páginas con miniaturas agregando código a WordPress
• Método 2. Mostrar una lista de páginas con miniaturas usando el editor de bloques de WordPress

Método 1. Mostrar una lista de páginas con miniaturas agregando código a WordPress

Una forma de mostrar una lista de páginas con miniaturas es agregando código a tus archivos de WordPress.

Este método es más avanzado, pero la ventaja es que podrás usar shortcodes personalizables. En lugar de tener que actualizar manualmente la lista cada vez que publicas una nueva página, los shortcodes generarán automáticamente una lista actualizada de páginas para ti.

Si no has agregado código a tu sitio de WordPress antes, puedes consultar nuestra guía para principiantes sobre pegar fragmentos de la web en WordPress.

Luego, necesitas agregar el siguiente código a tu archivo functions.php, en un plugin específico para tu sitio, o usando un plugin de fragmentos de código:

add_shortcode('pagelist', function ($args) {
    $args = wp_parse_args($args, [
        'type'  => 'page',
        'limit' => 10,
    ]);
    $out = [];
    $ids = [];
    // Check if we have a predefined list od IDs
    if ( ! empty($args['id'])) {
        $ids = array_filter(explode(',', $args['id']), function ($id) {
            return ! empty($id);
        });
        $ids = array_map('intval', $ids);
    }
    // If we don't have a predefined list od IDs, get the latest posts based on 'limit' parameter
    if (empty($ids)) {
        $queryArgs = [
            'post_type'              => isset($args['type']) && post_type_exists($args['type']) ? $args['type'] : 'page',
            'posts_per_page'         => ! empty($args['limit']) && is_numeric($args['limit']) ? intval($args['limit']) : 10,
            'ignore_sticky_posts'    => true,
            'fields'                 => 'ids',
            'cache_results'          => false,
            'update_post_meta_cache' => false,
            'update_post_term_cache' => false,
        ];
        $ids = get_posts($queryArgs);
        wp_reset_postdata();
    }
    foreach ($ids as $id) {
        $img = has_post_thumbnail($id)
            ? get_the_post_thumbnail($id, [60, 60])
            : '<span class="wpb-post-list__no-image"></span>';
        $excerpt = has_excerpt($id) ? wpautop(get_the_excerpt($id)) : '';
        $out[] = "<a href='" . get_the_permalink($id) . "' class='wpb-page-list__item'>
            <div>{$img}</div>
            <div>
                <div><h4>" . get_the_title($id) . "</h4></div>
                {$excerpt}
            </div>
        </a>";
    }
    return "<div class='wpb-page-list'>" . implode('', $out) . "</div>";
});

Recomendamos agregar este código usando WPCode, es el mejor plugin de fragmentos de código del mercado.

WPCode hace que sea seguro y fácil agregar código personalizado en WordPress sin editar el archivo functions.php de tu tema.

Para empezar, necesitas instalar y activar el plugin gratuito WPCode. Si necesitas ayuda, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activado, ve a Fragmentos de código » + Agregar fragmento desde tu panel de WordPress.

En la página Agregar fragmento, pasa el cursor sobre la opción 'Agregar tu código personalizado (Nuevo fragmento)' y haz clic en el botón 'Agregar fragmento personalizado'.

A continuación, en la ventana emergente que aparece en la pantalla, selecciona 'Fragmento de PHP' como tipo de código.

A partir de ahí, necesitas agregar un título para tu fragmento, que puede ser cualquier cosa para ayudarte a recordar para qué es el código.

Luego, pegue el código de arriba en el cuadro 'Vista previa del código'.

Después de eso, simplemente cambia el interruptor de ‘Inactive’ a ‘Active’ y haz clic en el botón ‘Save Snippet’ en la parte superior de la página.

Este fragmento de código creará un shortcode que puedes usar para mostrar tu lista de páginas con miniaturas en cualquier lugar de tu sitio.

Antes de usar el shortcode, deberás agregar el siguiente CSS a tu sitio para asegurarte de que tu lista de páginas se muestre correctamente.

Si no has hecho esto antes, consulta nuestra guía sobre cómo agregar fácilmente CSS personalizado a tu sitio de WordPress.

.wpb-page-list{
    display: block;
    margin: 10px 0 35px;
}
.wpb-page-list__item{
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-column-gap: 16px;
    align-items: center;
    text-decoration: none;
    margin: 10px 0;
}
.wpb-page-list__item:hover h4{
    text-decoration: underline;
}
.wpb-post-list img,
.wpb-post-list__no-image{
    display: block;
    width: 60px;
    height: 60px;
}
.wpb-post-list__no-image{
    background: #aaa;
}
.wpb-page-list__item h4{
    font-size: 20px;
}
.wpb-page-list__item p {
    font-size: 1rem;
    color: #555;
}

Después de eso, necesitas agregar el siguiente shortcode a WordPress para añadir tu lista de páginas:

[pagelist]

Este shortcode mostrará una lista de tus últimas 10 páginas, ordenadas por fecha de publicación. Se actualizará automáticamente a medida que se agreguen nuevas páginas.

Si deseas limitar el número de páginas que se mostrarán, puedes usar el shortcode a continuación:

[pagelist limit=3]

Simplemente reemplaza '3' con el número de páginas que deseas mostrar.

Para agregar el shortcode a WordPress, abre la página que deseas editar y luego haz clic en el botón 'Más' para agregar un bloque.

Después de eso, busca el bloque 'Shortcode'.

Luego, haz clic en el bloque 'Shortcode' para agregarlo a tu sitio y simplemente pega el shortcode de arriba.

Una vez que hayas terminado, asegúrate de hacer clic en 'Guardar' o 'Publicar' para guardar tus cambios.

Después de eso, tus visitantes podrán ver tu lista de páginas con miniaturas.

También puedes usar el shortcode en un widget para mostrar tu lista de páginas en tu barra lateral o pie de página.

Mostrar una lista de páginas con páginas específicas del sitio

Para mostrar una lista de páginas con solo ciertas páginas, deberás agregar el siguiente shortcode a tu sitio:

[pagelist id="20, 10, 35"]

Este shortcode mostrará páginas específicas según su ID. Para más detalles, consulta nuestra guía sobre cómo encontrar los IDs de página en WordPress.

Muestra una lista con tus últimas entradas de blog

También puedes usar el shortcode para mostrar una lista de tus últimas entradas de blog. Esto puede ser una excelente manera de aumentar las visitas a la página en tus entradas de blog.

Simplemente agrega el siguiente shortcode a WordPress:

[pagelist type=post]

Así es como se verá tu lista con tus últimas entradas de blog para tus lectores.

Muestra una lista de páginas con todas las páginas que has publicado

Finalmente, puedes mostrar una lista de páginas con miniaturas que contenga todas las páginas que has publicado.

Esto puede ser útil si deseas crear una página de archivo o una página de mapa del sitio HTML para tus lectores. Las miniaturas de las entradas añadidas hacen que sea más atractivo que una simple lista de páginas.

Necesitarás agregar el siguiente shortcode a tu sitio:

[pagelist limit="-1"]

A medida que publiques nuevas páginas, tu lista de páginas se actualizará automáticamente.

Método 2. Mostrar una lista de páginas con miniaturas usando el editor de bloques de WordPress

Otra forma de mostrar una lista de páginas en WordPress es utilizando el editor de bloques de WordPress.

Nota: Al usar este método, tu lista de páginas deberá crearse y actualizarse manualmente, ya que las nuevas páginas no se agregarán automáticamente una vez publicadas.

Para hacer esto, abre la página que deseas editar.

Luego, haz clic en el ícono de ‘Más’ para agregar un bloque y abrir el menú de bloques.

Después de eso, busca ‘Columnas’ en el cuadro de búsqueda.

Luego, selecciona el bloque ‘Columnas’.

Esto muestra una lista de bloques de columnas disponibles.

Selecciona el bloque de columna ’30/70’. Usaremos la columna izquierda para las miniaturas de las imágenes y la columna derecha para el título de la página y un breve resumen.

Luego, haz clic en el ícono de ‘Más’ para agregar un bloque.

Después de eso, selecciona el bloque ‘Imagen’ para agregar tu imagen destacada. Esto te da la opción de subir una nueva imagen o elegir una de tu biblioteca de medios.

Si deseas enlazar tu imagen, haz clic en el ícono ‘Insertar enlace’.

Luego, simplemente agrega la URL de tu página.

Una vez que hayas agregado tu imagen, haz clic en el ícono de ‘Más’ para agregar un bloque en la columna derecha.

Luego, busca el bloque ‘Encabezado’ y haz clic en él para agregarlo a tu página.

A continuación, ingresa el título de tu página y resáltalo.

Luego, haz clic en el ícono ‘Enlace’ para agregar un enlace a la página.

Puedes elegir que el enlace se abra en la misma página, o en una pestaña nueva, activando o desactivando el interruptor.

Si deseas agregar texto debajo de tu encabezado, simplemente haz clic nuevamente en el ícono 'Agregar Bloque' y selecciona el bloque 'Párrafo'.

Luego, simplemente escribe en el área de texto disponible.

Para agregar más elementos a tu lista utilizando el formato que acabas de crear, haz clic en el bloque de columna y selecciona el menú de 'Opción' de los tres puntos.

Luego, selecciona la opción 'Duplicar' de la lista desplegable.

Esto creará automáticamente una copia de la columna.

Todo lo que necesitas hacer es seguir los mismos pasos que arriba para cambiar la imagen, el encabezado y el texto.

Una vez que hayas terminado de hacer cambios en la lista de tu página, asegúrate de hacer clic en el botón 'Actualizar' o 'Publicar' en la parte superior de la página.

Ahora, tus visitantes verán una lista de página más atractiva con miniaturas de las publicaciones.

Nota: Hay otro bloque disponible llamado bloque 'Lista de Páginas' que te permite agregar una lista de páginas sin miniaturas.

Sin embargo, el método manual anterior es la única forma de agregar una lista con miniaturas usando el editor de bloques.

Si buscas crear páginas completamente personalizadas que también incluyan una lista de páginas con miniaturas, entonces puedes usar el plugin SeedProd para hacerlo usando un constructor de arrastrar y soltar. Para más detalles, consulta nuestra guía sobre cómo crear una página personalizada en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo mostrar fácilmente una lista de páginas con miniaturas en WordPress. También es posible que desees ver nuestras selecciones expertas de los mejores constructores de temas de WordPress y nuestra guía sobre cómo agregar scroll infinito a tu sitio de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.