¿Quiere aprender a mostrar fácilmente una lista de páginas con miniaturas en su sitio de WordPress?
Mostrar imágenes destacadas junto a su publicación o títulos de página puede ayudar a crear más interés visual y brindar a sus visitantes más información sobre el contenido, por lo que es más probable que hagan clic y visiten esas páginas.
En este artículo, le 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 llamadas publicaciones y páginas.
Las páginas se utilizan para piezas de contenido más permanentes, como las páginas «Acerca de nosotros», «Contáctenos» y «Servicios», mientras que las publicaciones se utilizan para contenido de blog que se actualiza con más frecuencia.
Sus páginas más importantes generalmente están vinculadas desde su menú de navegación principal, pero es posible que tenga más páginas que desee mostrar.
Al agregar una lista de páginas con miniaturas, puede hacer que sus enlaces sean más atractivos que los enlaces de texto estándar y brindarles a sus visitantes una mejor idea del contenido de cada página en su sitio web de WordPress.
Cuando los visitantes están comprometidos e interesados, es probable que visiten más páginas y permanezcan en su sitio web por más tiempo, lo que hace que sea más probable que realicen una compra o se unan a su lista de correo electrónico.
Dicho esto, veamos algunas formas diferentes de mostrar una lista de páginas con miniaturas en su sitio web. Simplemente use los enlaces rápidos a continuación para saltar directamente al método que desea usar:
Método 1. Muestre una lista de páginas con miniaturas agregando código a WordPress
Una forma de mostrar una lista de páginas con miniaturas es agregar código a sus archivos de WordPress.
Este método es más avanzado, pero la ventaja es que podrá usar códigos abreviados personalizables. En lugar de tener que actualizar manualmente la lista cada vez que publica una nueva página, los códigos abreviados generarán automáticamente una lista actualizada de páginas para usted.
Si no ha agregado código a su sitio de WordPress antes, puede ver nuestra guía para principiantes para pegar fragmentos de la web en WordPress.
Luego, debe agregar el siguiente código a su archivo functions.php, en un complemento específico del sitio o mediante el uso de un complemento 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="https://www.wpbeginner.com/plugins/how-to-easily-show-a-page-list-with-thumbnails-in-wordpress/" . 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>";
});
Este fragmento de código creará un código abreviado que puede usar para mostrar su lista de páginas con miniaturas en cualquier lugar de su sitio.
Antes de usar el código abreviado, deberá agregar el siguiente CSS a su sitio para asegurarse de que su lista de páginas 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.
.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, debe agregar el siguiente código abreviado a WordPress para agregar su lista de páginas:
[pagelist]
Este shortcode mostrará una lista de páginas que contiene sus últimas 10 páginas, por orden de fecha de publicación. Se actualizará automáticamente a medida que se agreguen nuevas páginas.
Si desea limitar la cantidad de páginas que se mostrarán, puede usar el código abreviado a continuación:
[pagelist limit=3]
Simplemente reemplace ‘3’ con el número de páginas que desea mostrar.
Para agregar el código abreviado a WordPress, abra la página que desea editar y luego haga clic en el botón Agregar bloque ‘Más’.
Después de eso, busca el bloque ‘Shortcode’.
Luego, haga clic en el bloque ‘Código corto’ para agregarlo a su sitio y simplemente pegue el código corto de arriba.
Una vez que haya terminado, asegúrese de hacer clic en ‘Guardar’ o ‘Publicar’ para guardar los cambios.
Después de eso, sus visitantes podrán ver su lista de páginas con miniaturas.
También puede usar el código abreviado en un widget para mostrar su lista de páginas en su barra lateral o pie de página.
Mostrar una lista de páginas con páginas de sitios específicos
Para mostrar una lista de páginas con solo ciertas páginas, deberá agregar el siguiente código abreviado a su sitio:
[pagelist id="20, 10, 35"]
Este shortcode mostrará páginas específicas en función de su ID de página. Para obtener más detalles, consulte nuestra guía sobre cómo encontrar ID de página en WordPress.
Mostrar una lista con sus últimas publicaciones de blog
También puede usar el código abreviado para mostrar una lista de sus últimas publicaciones de blog. Esta puede ser una excelente manera de aumentar las páginas vistas en las publicaciones de su blog.
Simplemente agregue el siguiente código abreviado a WordPress:
[pagelist type=post]
Así es como sus lectores verán su lista con sus últimas publicaciones de blog.
Alternativa: También puedes usar MonsterInsights para mostrar una lista de publicaciones con miniaturas en sus páginas y otras áreas de widgets del sitio web. Para obtener más detalles, consulte nuestra guía sobre cómo mostrar publicaciones populares por vistas en WordPress.
Muestra una lista de páginas con cada página que hayas publicado
Finalmente, puede mostrar una lista de páginas con miniaturas que tiene cada página que ha publicado.
Esto puede ser útil si desea crear una página de archivo o una página de mapa del sitio HTML para sus lectores. Las miniaturas de publicaciones agregadas lo hacen más atractivo que una simple lista de páginas.
Deberá agregar el siguiente código abreviado a su sitio:
[pagelist limit="-1"]
A medida que publique nuevas páginas, su 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 usando el editor de bloques de WordPress.
Nota: Cuando use este método, su lista de páginas deberá crearse y actualizarse manualmente, ya que las nuevas páginas no se agregarán automáticamente una vez que se publiquen.
Para hacer esto, abra la página que desea editar.
Luego, haga clic en el ícono de agregar bloque ‘Más’ para abrir el menú de bloque.
Después de eso, busque ‘Columnas’ en el cuadro de búsqueda.
Luego, seleccione el bloque ‘Columnas’.
Esto abre una lista de bloques de columnas disponibles.
Seleccione el bloque de columnas ’30/70′. Usaremos la columna de la izquierda para las imágenes en miniatura y la columna de la derecha para el título de la página y un breve resumen.
Luego, haga clic en el ícono de agregar bloque ‘Más’.
Después de eso, seleccione el bloque ‘Imagen’ para agregar su imagen destacada. Esto le da la opción de cargar una nueva imagen o elegir una de su biblioteca de medios.
Si desea vincular su imagen, haga clic en el icono ‘Insertar enlace’.
Luego, simplemente agregue la URL de su página.
Una vez que haya agregado su imagen, haga clic en el ícono de agregar bloque ‘Más’ en la columna de la derecha.
Luego, busque el bloque ‘Título’ y haga clic en él para agregarlo a su página.
Luego, ingrese el título de su página y resáltelo.
Luego, haga clic en el icono ‘Enlace’ para agregar un enlace a la página.
Puede elegir que el enlace se abra en la misma página, o en una nueva pestaña, haciendo clic en el botón para activarlo o desactivarlo.
Si desea agregar texto debajo de su título, simplemente haga clic en el ícono ‘Agregar bloque’ nuevamente y seleccione el bloque ‘Párrafo’.
Luego, simplemente escriba en el área de texto disponible.
Para agregar más elementos a su lista utilizando el formato que acaba de crear, haga clic en el bloque de columnas y seleccione el menú «Opción» de tres puntos.
Luego, seleccione la opción ‘Duplicar’ de la lista desplegable.
Esto creará automáticamente una copia de la columna.
Todo lo que necesita hacer es seguir los mismos pasos anteriores para cambiar la imagen, el encabezado y el texto.
Una vez que haya terminado de hacer cambios en su lista de páginas, asegúrese de hacer clic en el botón ‘Actualizar’ o ‘Publicar’ en la parte superior de la página.
Ahora, sus visitantes verán una lista de páginas más atractiva con miniaturas de publicaciones.
Nota: Hay otro bloque disponible llamado bloque ‘Lista de páginas’ que le 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 desea crear páginas completamente personalizadas que también incluyan una lista de páginas con miniaturas, puede utilizar el Producto de semilla complemento para hacer esto usando un generador de arrastrar y soltar. Para obtener más detalles, consulte nuestra guía sobre cómo crear una página personalizada en WordPress.
Esperamos que este artículo le haya ayudado a aprender cómo mostrar fácilmente una lista de páginas con miniaturas en WordPress. También es posible que desee ver nuestras selecciones de expertos del mejor software de chat en vivo para pequeñas empresas y nuestra guía sobre cómo registrar un nombre de dominio.
.