Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como mostrar facilmente uma lista de páginas com miniaturas no WordPress

Deseja saber como exibir facilmente uma lista de páginas com miniaturas em seu site WordPress?

A exibição de imagens em destaque ao lado dos títulos de suas postagens ou páginas pode ajudar a criar mais interesse visual e fornecer aos visitantes mais informações sobre o conteúdo, para que eles tenham maior probabilidade de clicar e visitar essas páginas.

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

How to easily show a page list with thumbnails in WordPress

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

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

As páginas são usadas para peças de conteúdo mais perenes, como as páginas “Sobre nós”, “Fale conosco” e “Serviços”, enquanto as postagens são usadas para conteúdo de blog que é atualizado com mais frequência.

Suas páginas mais importantes geralmente estão vinculadas ao 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 os links de texto padrão e dar aos visitantes uma ideia melhor do conteúdo de cada página do seu site WordPress.

Quando os visitantes estão engajados e interessados, é provável que visitem mais páginas e permaneçam mais tempo em seu site, o que aumenta a probabilidade de fazerem uma compra ou entrarem em sua lista de e-mails.

Dito isso, vamos examinar algumas maneiras diferentes de mostrar uma lista de páginas com miniaturas em seu site. Basta usar os links rápidos abaixo para ir direto ao método que você deseja usar:

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

Uma maneira de mostrar uma lista de páginas com miniaturas é adicionar código aos arquivos do WordPress.

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

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

Em seguida, você precisa adicionar o seguinte código ao seu arquivo functions.php, em um plug-in específico do site ou usando um plug-in de trechos 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 esse código usando o WPCode, o melhor plug-in de snippets de código. Ele torna seguro e fácil adicionar código personalizado no WordPress sem editar o arquivo functions.php do seu tema.

WPCode

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

Depois que o plug-in for ativado, vá para Code Snippets ” + Add Snippet no 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 “Usar snippet”.

Add a new custom code snippet in WPCode

A partir daí, adicione um título para seu snippet, que pode ser qualquer coisa que o ajude a lembrar para que serve o código.

Em seguida, cole o código acima na caixa “Code Preview” (Visualização de código) e selecione “PHP Snippet” como o tipo de código no menu suspenso.

Paste snippet into the WPCode plugin

Depois disso, basta alternar a chave de “Inativo” para “Ativo” e clicar no botão “Salvar snippet” na parte superior da página.

Activate and save your custom code snippet

Esse snippet de código criará um shortcode que você pode usar para exibir a lista de páginas com miniaturas em qualquer lugar do site.

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

Se você não tiver feito 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]

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

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

[pagelist limit=3]

Basta substituir “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 “Plus” para adicionar o bloco.

Add new shortcode for pagelist

Depois disso, procure o bloco “Shortcode”.

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

Add pagelist shortcode and save

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

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

example page list with thumbnails

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 determinadas páginas, você precisará adicionar o seguinte shortcode ao seu site:

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

Esse shortcode exibirá páginas específicas com base em seu ID de página. Para obter mais detalhes, consulte nosso guia sobre como encontrar IDs de página no WordPress.

Exibir uma lista com suas últimas publicações no blog

Você também pode usar o shortcode para exibir uma lista das últimas postagens do seu blog. Essa pode ser uma ótima maneira de aumentar as visualizações de página em suas postagens de blog.

Basta adicionar o seguinte shortcode ao WordPress:

[pagelist type=post]

Veja como sua lista com as últimas publicações do blog parecerá para seus leitores.

Post list with thumbnails example

Alternativa: Você também pode usar o MonsterInsights para exibir uma lista de publicações com miniaturas em suas páginas e em outras áreas de widgets do site. Para obter mais detalhes, consulte nosso guia sobre como exibir publicações populares por visualizações no WordPress.

Exibir uma lista de páginas com todas as páginas que você publicou

Por fim, 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 mapa do site em HTML para seus leitores. As miniaturas de postagens adicionadas o tornam mais atraente do que uma simples lista de páginas.

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

[pagelist limit="-1"]

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

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

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

Observação: Ao usar esse método, sua lista de páginas precisará ser criada e atualizada manualmente, pois as novas páginas não serão adicionadas automaticamente depois de publicadas.

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

Em seguida, clique no ícone de adição de bloco “Plus” para abrir o menu de blocos.

Click to add new block

Depois disso, procure por “Columns” na caixa de pesquisa.

Em seguida, selecione o bloco “Columns” (Colunas).

Select columns block

Isso exibe uma lista de blocos de colunas disponíveis.

Selecione o bloco de colunas “30/70”. Usaremos a coluna da esquerda para as imagens em miniatura e a coluna da direita para o título da página e um breve resumo.

Select 30/70 columns block

Em seguida, clique no ícone de adição de bloco “Plus”.

Depois disso, selecione o bloco “Image” (Imagem) para adicionar sua imagem em destaque. Isso lhe dá a opção de carregar uma nova imagem ou escolher uma de sua biblioteca de mídia.

Select image block

Se quiser vincular sua imagem, clique no ícone “Insert Link” (Inserir link).

Em seguida, basta adicionar o URL de sua página.

Add link to image block

Depois de adicionar sua imagem, clique no ícone “Mais” para adicionar bloco na coluna da direita.

Em seguida, procure o bloco “Heading” (Título) e clique nele para adicioná-lo à sua página.

Select heading block

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

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

Add link to heading block

Você pode optar por abrir o link na mesma página ou em uma nova guia, clicando no botão de ativação ou desativação.

Se quiser adicionar texto abaixo do título, basta clicar novamente no ícone “Add Block” (Adicionar bloco) e selecionar o bloco “Paragraph” (Parágrafo).

Add paragraph block

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 da coluna e selecione o menu de três pontos “Opção”.

Click options panel

Em seguida, selecione a opção “Duplicate” (Duplicar) na lista suspensa.

Isso criará automaticamente uma cópia da coluna.

Duplicate existing column block

Tudo o que você precisa fazer é seguir as mesmas etapas acima para alterar a imagem, o título e o texto.

Quando terminar de fazer alterações em sua 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 atraente com miniaturas de posts.

Page list with thumbnails example

Observação: Há outro bloco disponível chamado bloco “Page List” (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 quiser criar páginas totalmente personalizadas que também incluam uma lista de páginas com miniaturas, você poderá usar o plug-in SeedProd para fazer isso usando um construtor de arrastar e soltar. Para obter mais detalhes, consulte nosso guia sobre como criar uma página personalizada no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como mostrar facilmente uma lista de páginas com miniaturas no WordPress. Talvez você também queira ver nossas escolhas de especialistas dos melhores criadores de temas para WordPress e nosso guia sobre como adicionar rolagem infinita ao seu site WordPress.

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

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

5 ComentáriosDeixe uma resposta

  1. Rodney

    I want to do something a little different and I may be trying to use the wrong plugin or method. I want a pane on one site with a page list but I want the page selected from the list to display on the same page. In other words, it appears that you never leave the webpage you are on, only the information displayed on that page changes based on what link you selected from the list in the side pane.

    • WPBeginner Support

      For that you may want to look into a plugin such as facetwp

      Administrador

  2. Jason

    I want to make List of pages [Vertical grid with one item per row] How can I do that? I am using Porto theme.

  3. Zahid

    Do you know how to show recent pages first and and only 10 pages
    Thanks ?

  4. Kevin

    Thanks for your guide. But could you guide me how to show a list of Page with Thumbnails in Home Page

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.