Como Mostrar Facilmente uma Lista de Páginas com Miniaturas no WordPress

Quer uma maneira fácil de tornar as listas de páginas do seu WordPress mais envolventes? Adicionar miniaturas é uma técnica simples, porém eficaz, para aumentar o apelo visual e melhorar a navegação do site.

Exibir imagens em destaque ao lado dos títulos das suas páginas fornece mais informações aos seus visitantes sobre o conteúdo, aumentando a probabilidade de eles clicarem e visitarem essas páginas.

Na WPBeginner, ajudamos muitos usuários a otimizar seus sites WordPress e sabemos que este truque pode fazer uma grande diferença. 

Neste artigo, mostraremos como exibir uma lista de páginas com miniaturas no WordPress, passo a passo.

Por que exibir uma lista de páginas com miniaturas no WordPress?

O WordPress tem dois tipos de postagem diferentes chamados posts e páginas.

Páginas são usadas para conteúdos mais perenes, como páginas "Sobre nós", "Contato" e "Serviços", enquanto posts são usados para conteúdo de blog que é atualizado com mais frequência.

Suas páginas mais importantes geralmente são vinculadas a partir do seu menu de navegação principal, mas você pode ter mais páginas que deseja exibir.

Ao adicionar uma lista de páginas com miniaturas, você pode tornar seus links mais atraentes do que links de texto padrão e dar aos seus visitantes uma ideia melhor do conteúdo de cada página no seu site WordPress.

Quando os visitantes estão engajados e interessados, eles provavelmente visitarão mais páginas e permanecerão em seu site por mais tempo, o que aumenta a probabilidade de fazerem uma compra ou se inscreverem em sua lista de e-mail.

Dito isso, vamos analisar algumas maneiras diferentes de exibir uma lista de páginas com miniaturas em seu site. Basta usar os links rápidos abaixo para pular diretamente para o método que você deseja usar:

• Método 1. Exibir uma lista de páginas com miniaturas adicionando código ao WordPress
• Método 2. Exibir uma lista de páginas com miniaturas usando o Editor de Blocos do WordPress

Método 1. Exibir uma lista de páginas com miniaturas adicionando código ao WordPress

Uma maneira de exibir uma lista de páginas com miniaturas é adicionando código aos seus arquivos do WordPress.

Este método é mais avançado, mas a vantagem é que você poderá usar shortcodes personalizáveis. Em vez de ter que atualizar manualmente a lista sempre que publicar uma nova página, os shortcodes gerarão automaticamente uma lista atualizada de páginas para você.

Se você nunca adicionou código ao seu site WordPress antes, pode consultar nosso guia para iniciantes sobre colar trechos da web no WordPress.

Em seguida, você precisa adicionar o seguinte código ao seu arquivo functions.php, em um plugin específico do site, ou usando um plugin de snippets 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 adicionar este código usando WPCode, é o melhor plugin de snippets de código do mercado.

O WPCode torna seguro e fácil adicionar código personalizado no WordPress sem editar o arquivo functions.php do seu tema.

Para começar, você precisa instalar e ativar o plugin gratuito WPCode. Se precisar de ajuda, consulte nosso tutorial sobre como instalar um plugin do WordPress.

Assim que o plugin for ativado, vá para Snippets de Código » + Adicionar Snippet no seu painel do WordPress.

Na página Adicionar Snippet, passe o mouse sobre a opção ‘Adicionar Seu Código Personalizado (Novo Snippet)’ e clique no botão ‘Adicionar Snippet Personalizado’.

Em seguida, no pop-up que aparece na tela, selecione ‘Snippet PHP’ como o tipo de código.

A partir daí, você precisa adicionar um título para o seu snippet, que pode ser qualquer coisa para ajudá-lo a lembrar para que serve o código.

Em seguida, cole o código acima na caixa ‘Visualização do Código’.

Depois disso, basta alternar o interruptor de ‘Inativo’ para ‘Ativo’ e clicar no botão ‘Salvar Trecho’ na parte superior da página.

Este trecho de código criará um shortcode que você pode usar para exibir sua lista de páginas com miniaturas em qualquer lugar do seu site.

Antes de usar o shortcode, você precisará adicionar o seguinte CSS ao seu site para garantir que sua lista de páginas seja exibida de forma agradável.

Se você nunca fez isso antes, consulte nosso guia sobre como adicionar facilmente CSS personalizado ao seu site 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;
}

Depois disso, você precisa adicionar o seguinte shortcode ao WordPress para adicionar sua lista de páginas:

[pagelist]

Este shortcode exibirá uma lista de páginas contendo suas 10 páginas mais recentes, por ordem de data de publicação. Ele será atualizado automaticamente à medida que novas páginas forem adicionadas.

Se você quiser limitar o número de páginas a serem exibidas, poderá usar o shortcode abaixo:

[pagelist limit=3]

Simplesmente substitua '3' pelo número de páginas que você deseja exibir.

Para adicionar o shortcode ao WordPress, abra a página que você deseja editar e clique no botão 'Mais' para adicionar um bloco.

Depois disso, procure pelo bloco 'Shortcode'.

Em seguida, clique no bloco 'Shortcode' para adicioná-lo ao seu site e simplesmente cole o shortcode acima.

Quando terminar, certifique-se de clicar em 'Salvar' ou 'Publicar' para salvar suas alterações.

Depois disso, seus visitantes poderão ver sua lista de páginas com miniaturas.

Você também pode usar o shortcode em um widget para exibir sua lista de páginas na barra lateral ou no rodapé.

Exibir uma Lista de Páginas com Páginas Específicas do Site

Para exibir uma lista de páginas com apenas algumas páginas específicas, você precisará adicionar o seguinte shortcode ao seu site:

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

Este shortcode exibirá páginas específicas com base em seus IDs. Para mais detalhes, consulte nosso guia sobre como encontrar IDs de páginas no WordPress.

Exibir uma Lista com Seus Posts Mais Recentes do Blog

Você também pode usar o shortcode para exibir uma lista dos seus posts mais recentes do blog. Isso pode ser uma ótima maneira de aumentar as visualizações de página dos seus posts.

Simplesmente adicione o seguinte shortcode ao WordPress:

[pagelist type=post]

Veja como sua lista com seus posts mais recentes do blog aparecerá para seus leitores.

Exibir uma Lista de Páginas com Todas as Páginas que Você Publicou

Finalmente, você pode mostrar uma lista de páginas com miniaturas que contém todas as páginas que você publicou.

Isso pode ser útil se você quiser criar uma página de arquivo ou uma página de sitemap HTML para seus leitores. As miniaturas de posts adicionadas as tornam mais envolventes do que uma simples lista de páginas.

Você precisará adicionar o seguinte shortcode ao seu site:

[pagelist limit="-1"]

À medida que você publica novas páginas, sua lista de páginas será atualizada automaticamente.

Método 2. Exibir uma lista de páginas com miniaturas usando o Editor de Blocos do WordPress

Outra maneira de exibir uma lista de páginas no WordPress é usando o editor de blocos do WordPress.

Observação: Ao usar este método, sua lista de páginas precisará ser criada e atualizada manualmente, pois novas páginas não serão adicionadas automaticamente após serem publicadas.

Para fazer isso, abra a página que você deseja editar.

Em seguida, clique no ícone de adição de bloco ‘Mais’ para abrir o menu de blocos.

Depois disso, pesquise por ‘Colunas’ na caixa de pesquisa.

Em seguida, selecione o bloco ‘Colunas’.

Isso exibirá uma lista de blocos de colunas disponíveis.

Selecione o bloco de coluna ’30/70’. Usaremos a coluna esquerda para as miniaturas das imagens e a coluna direita para o título da página e um breve resumo.

Em seguida, clique no ícone de adição de bloco ‘Mais’.

Depois disso, selecione o bloco ‘Imagem’ para adicionar sua imagem em destaque. Isso lhe dará a opção de fazer upload de uma nova imagem ou escolher uma de sua biblioteca de mídia.

Se você quiser vincular sua imagem, clique no ícone ‘Inserir link’.

Em seguida, simplesmente adicione a URL da sua página.

Depois de adicionar sua imagem, clique no ícone de adição de bloco ‘Mais’ na coluna direita.

Em seguida, pesquise pelo bloco ‘Título’ e clique nele para adicioná-lo à sua página.

Em seguida, insira o título da sua página e destaque-o.

Em seguida, clique no ícone ‘Link’ para adicionar um link à página.

Você pode escolher se o link abrirá na mesma página ou em uma nova aba, clicando no interruptor para ligar ou desligar.

Se você quiser adicionar texto abaixo do seu título, basta clicar novamente no ícone ‘Adicionar Bloco’ e selecionar o bloco ‘Parágrafo’.

Em seguida, basta digitar na área de texto disponível.

Para adicionar mais itens à sua lista usando a formatação que você acabou de criar, clique no bloco de coluna e selecione o menu de ‘Opções’ com os três pontos.

Em seguida, selecione a opção ‘Duplicar’ na lista suspensa.

Isso criará automaticamente uma cópia da coluna.

Tudo o que você precisa fazer é seguir os mesmos passos acima para alterar a imagem, o título e o texto.

Quando terminar de fazer alterações na lista de páginas, certifique-se de clicar no botão ‘Atualizar’ ou ‘Publicar’ na parte superior da página.

Agora, seus visitantes verão uma lista de páginas mais envolvente com miniaturas de posts.

Observação: Existe outro bloco disponível chamado bloco ‘Lista de Páginas’ que permite adicionar uma lista de páginas sem miniaturas.

No entanto, o método manual acima é a única maneira de adicionar uma lista com miniaturas usando o editor de blocos.

Se você está procurando criar páginas completamente personalizadas que também incluam uma lista de páginas com miniaturas, então você pode usar o plugin SeedProd para fazer isso usando um construtor de arrastar e soltar. Para mais detalhes, veja nosso guia sobre como criar uma página personalizada no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como exibir facilmente uma lista de páginas com miniaturas no WordPress. Você também pode querer ver nossas seleções de especialistas dos melhores construtores de temas do WordPress e nosso guia sobre como adicionar rolagem infinita ao seu site WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.