Como Exibir Trechos de Posts em Temas do WordPress

Trechos dão aos visitantes uma prévia curta do seu conteúdo, ajudando-os a entender rapidamente sobre o que é cada post e incentivando-os a clicar para ler mais. Eles são especialmente úteis em listas de posts, páginas de arquivo e resultados de pesquisa.

Exibir trechos de posts também pode deixar seu site com uma aparência mais limpa e carregar mais rápido, mostrando apenas uma parte de cada post. No entanto, muitos temas do WordPress não exibem trechos por padrão, o que pode deixar suas páginas de blog com uma sensação de desordem ou incompletas.

No WPBeginner, exibimos trechos em nossas páginas iniciais e de blog. Isso nos permite destacar mais posts de uma vez e facilita para os visitantes navegarem em nosso conteúdo. Com o tempo, também personalizamos e otimizamos muitos temas do WordPress para melhorar a legibilidade e o desempenho.

Neste artigo, mostraremos como adicionar facilmente trechos de posts ao seu tema do WordPress.

Como exibir trechos de posts em temas do WordPress

💡 Resposta Rápida: 3 Maneiras de Exibir Trechos de Posts

Se você deseja habilitar rapidamente trechos de posts em seu site WordPress, aqui estão os três métodos mais comuns:

  • Método 1: Usando Código (Temas Clássicos) – Melhor para usuários confortáveis com pequenas edições de código. Você simplesmente substitui the_content por the_excerpt nos arquivos do seu tema usando um tema filho ou um trecho de código.
  • Método 2: Editor de Site Completo (Temas de Blocos) – Melhor para usuários com temas modernos baseados em blocos. Você pode arrastar e soltar o bloco "Trecho do Post" diretamente em seus modelos de arquivo através do Editor de Site.
  • Método 3: Theme Builder (Design Personalizado) – Ideal para usuários que desejam um visual completamente personalizado. Usando um plugin como o SeedProd, você pode construir visualmente sua página de blog e ativar "Mostrar Resumo" com um clique.

Por que Exibir Trechos de Posts no WordPress?

Por padrão, o WordPress exibirá posts completos na página inicial, na página de blog e nas páginas de arquivo em todo o seu site.

No entanto, a alternância para resumos de posts oferece várias vantagens importantes:

  • Melhor Experiência do Usuário: Os resumos permitem que os usuários escaneiem rapidamente os tópicos e encontrem o conteúdo que desejam ler, em vez de rolar por artigos completos.
  • Melhora na Velocidade do Site: Como apenas uma parte de cada artigo é carregada, suas páginas carregarão muito mais rápido, o que melhora o desempenho.
  • Otimização para Dispositivos Móveis: Exibir posts completos causa rolagem excessiva, o que é uma experiência ruim para usuários de smartphones e tablets. Os resumos resolvem esse problema.
  • Aumento de Engajamento: Ao destacar mais posts antecipadamente, você aumenta a probabilidade de os usuários clicarem para ler vários artigos, impulsionando suas visualizações de página.

O WordPress tem suporte integrado para resumos de posts, mas nem todos os temas os utilizam.

Agora, vamos mostrar como exibir resumos de posts em qualquer tema do WordPress.

Como Verificar se o Seu Tema WordPress Suporta Trechos de Posts

A maioria dos temas populares do WordPress inclui uma configuração que permite exibir resumos de posts em vez do post completo.

Para ver se o seu tema suporta trechos de posts, visite a página Aparência » Personalizar no painel do WordPress.

A localização dessas configurações variará dependendo do seu tema WordPress, mas você precisa procurar por quaisquer configurações rotuladas como 'Blog'.

Adicionando trechos de posts a um tema do WordPress usando o Personalizador

Por exemplo, se você estiver usando o tema WordPress Sydney, precisará selecionar 'Blog' e, em seguida, clicar em 'Arquivos do Blog'.

Em seguida, você pode rolar para baixo até a seção 'Elementos do Post' e expandir a aba 'Conteúdo'. Depois de fazer isso, selecione a opção 'Resumo' no menu suspenso em 'Tipo de Conteúdo'.

Adicionando trechos de posts ao seu site WordPress

Se o seu tema tiver uma opção 'Configurações do Tema' ou 'Configurações Gerais do Post', você também poderá ativar os trechos de posts nessas seções.

Depois de fazer isso, basta clicar no botão 'Publicar'. Agora, se você visitar o blog, o arquivo ou a página inicial, deverá ver uma lista de resumos de posts em vez de posts completos.

Se o seu tema não tiver suporte integrado para trechos de posts, você precisará adicioná-lo. Simplesmente use os links rápidos abaixo para pular para o método que você deseja usar:

Método 1: Adicionar Resumos de Posts ao WordPress Usando Código (Fácil)

Se o seu tema WordPress não suportar resumos de posts por padrão, você sempre poderá adicionar esse recurso manualmente.

Passo 1: Crie um Tema Filho

Você pode editar seus arquivos de tema do WordPress diretamente, mas recomendamos criar um tema filho em vez disso. Dessa forma, quando você atualizar seu tema WordPress, você não perderá as alterações que fez.

Para mais detalhes, veja nosso guia para iniciantes sobre como criar um tema filho do WordPress.

Passo 2: Localize os Arquivos de Modelo

Após fazer isso, você precisará encontrar o template que controla cada página onde você deseja exibir trechos de posts. Para a maioria dos temas, este será home.php, content.php, category.php e archive.php.

Para obter ajuda para encontrar o arquivo correto, consulte nosso guia para iniciantes sobre a hierarquia de templates do WordPress.

Etapa 3: Substitua a Tag de Conteúdo pela Tag de Resumo

Assim que isso for feito, localize simplesmente o seguinte código em cada arquivo:

<?php the_content(); ?>

Em seguida, substitua este código pela tag the_excerpt:

<?php the_excerpt(); ?>

Com isso feito, salve o arquivo e verifique seu site. Agora você deverá ver trechos de posts onde o artigo completo costumava estar.

Altere o Comprimento Padrão do Trecho do WordPress

Por padrão, o WordPress exibirá as primeiras 55 palavras de cada post e, em seguida, adicionará reticências (...) para indicar que há mais conteúdo.

Você pode alterar isso para exibir mais ou menos palavras adicionando código ao seu site WordPress. Embora seja possível editar os arquivos do tema diretamente, isso pode ser complicado.

Um erro simples também pode causar muitos erros comuns do WordPress e pode até mesmo quebrar completamente seu site.

Por esse motivo, recomendamos o uso do WPCode. Ele facilita a adição de snippets de código no WordPress sem a necessidade de editar os arquivos do seu tema. Dessa forma, você pode atualizar ou alterar seu tema sem perder o código personalizado.

Passo 1: Instalar e Ativar o WPCode

Primeiro, você precisa instalar e ativar o plugin gratuito WPCode. Para mais informações, você pode ver nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Etapa 2: Adicione um Novo Snippet

Após a ativação, visite a página Code Snippets » + Add Snippet no painel do WordPress. Em seguida, clique no botão ‘+ Add Custom Snippet’ na opção ‘Add Your Custom Code (New Snippet)’.

Como mostrar trechos de posts usando código

Em seguida, você precisa selecionar o tipo de código nas opções que aparecem na tela.

Para este tutorial, escolha ‘PHP Snippet’.

Selecione a opção de trecho PHP

Na próxima tela, digite um título para o trecho de código. Isso é apenas para sua referência, então você pode usar o que quiser.

Personalizando seus trechos de posts usando código
Etapa 3: Insira o Código Personalizado

Com isso feito, basta colar o seguinte no editor de código:

return 100;
}
add_filter('excerpt_length', 'new_excerpt_length');

// Changing excerpt more
function new_excerpt_more($more) {
return '...';
}
add_filter('excerpt_more', 'new_excerpt_more');

Este código altera o comprimento do trecho do post para 100 caracteres. Você pode alterar o ‘100’ para qualquer número que desejar.

Etapa 4: Salve e Ative o Snippet de Código

Após colar o código, alterne o interruptor de ‘Inactive’ para ‘Active’ no canto superior direito e, em seguida, clique no botão ‘Save Snippet’.

Salvar e ativar o snippet de código WPCode

Para mais dicas sobre como ajustar seus trechos de post, consulte nosso guia sobre como personalizar trechos do WordPress sem código.

Método 2: Adicionar Resumos de Posts Usando o Editor do Site Completo (Apenas Temas de Blocos)

Se você estiver usando um dos temas mais recentes do WordPress baseados em blocos, então você pode adicionar trechos de post usando o editor de site completo.

Etapa 1: Abra o Editor de Site Completo

Para começar, vá para Appearance » Editor no painel do WordPress.

Usando o editor em tamanho real (FSE)
Etapa 2: Selecione os Modelos

Por padrão, o editor de site completo exibe o modelo inicial do seu tema, mas você pode adicionar um trecho a qualquer modelo.

No menu do lado esquerdo, clique em ‘Modelos’.

Exibindo trechos de posts no WordPress usando o editor de site completo (FSE)

Agora você verá uma lista de todos os modelos que compõem o seu tema WordPress. Dependendo do seu tema, você pode querer adicionar trechos aos modelos de arquivo, índice, pesquisa ou similares.

Simplesmente encontre o modelo que você deseja editar e clique nele.

Exibindo trechos de posts usando o editor de site completo do WordPress (FSE)
Etapa 3: Edite o Modelo

O WordPress agora mostrará uma prévia deste modelo.

Para prosseguir e editar o modelo, clique no pequeno ícone de lápis.

Exibindo trechos de posts usando o editor de site completo do WordPress (FSE)
Etapa 4: Adicione o Bloco de Resumo do Post

Agora, clique no ícone de ‘+’.

No painel de pesquisa que aparece, digite ‘Trecho do Post’.

Adicionando o bloco de trechos de posts a um tema do WordPress baseado em blocos

Quando o bloco correto aparecer, arraste e solte-o no seu layout.

Você pode repetir este processo para adicionar vários trechos de posts ao modelo.

Adicionando o bloco de trechos de posts a um tema do WordPress baseado em blocos
Etapa 5: Personalize as Configurações do Bloco

Para ajustar a aparência do trecho, basta clicar para selecionar o bloco Trecho do Post.

No menu do lado direito, você pode começar escolhendo se o link 'Leia mais' aparece na mesma linha do trecho usando o alternador 'Mostrar link em nova linha'.

Você também pode ajustar o número máximo de palavras exibidas alterando a configuração ‘Comprimento do excerto’ na barra lateral do bloco.

Adicionando um botão 'Leia mais' a uma página de arquivo de blog

Com isso feito, selecione a aba 'Estilos'. Aqui, você pode alterar a cor do texto, adicionar uma cor de fundo, alterar o tamanho da fonte e muito mais.

À medida que você faz alterações, a pré-visualização ao vivo será atualizada automaticamente, para que você possa experimentar diferentes configurações para ver o que fica melhor.

Como personalizar um trecho de post do WordPress
Etapa 6: Salve suas alterações

Quando estiver satisfeito com a configuração do trecho do post, clique no botão 'Salvar' para tornar suas alterações visíveis.

Você deseja exibir trechos de posts em mais páginas e posts? Então, simplesmente repita os passos acima, mas desta vez escolha um novo modelo no menu do lado esquerdo.

Método 3: Adicionar Resumos de Posts ao WordPress Usando um Theme Builder (Avançado)

Se você deseja controle total sobre a aparência do arquivo, página de blog, página inicial e o restante do seu site, então você pode criar um tema personalizado.

Isso permite que você crie suas próprias páginas e exiba trechos em qualquer lugar do seu site.

SeedProd é o melhor construtor de temas WordPress que permite criar facilmente um tema WordPress personalizado sem escrever nenhum código. Ele também possui um bloco de Posts pronto que você pode arrastar e soltar em qualquer página.

Observação: Existe um plugin gratuito SeedProd que permite criar páginas de em breve e de modo de manutenção bonitas, independentemente do seu orçamento. No entanto, você precisará do plano SeedProd Pro ou Elite para desbloquear o construtor de temas.

Etapa 1: Instalar e Ativar o SeedProd

Primeiro, você precisa instalar e ativar o plugin SeedProd . Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin WordPress.

Após a ativação, vá para a página SeedProd » Configurações e insira a chave de licença do plugin. Você pode encontrar essas informações em sua conta no site da SeedProd.

Adicionando uma chave de licença do SeedProd ao WordPress

Após inserir a chave de licença, você está pronto para criar um tema WordPress personalizado usando o construtor de temas do SeedProd.

Etapa 2: Escolha um Kit de Modelo

Primeiro, você precisa ir para a página SeedProd » Construtor de Temas .

O construtor de temas SeedProd

Aqui, você pode usar um dos kits de site e modelos do SeedProd prontos como ponto de partida ou criar um modelo manualmente do zero.

Recomendamos começar com um tema existente, pois ele cria automaticamente todos os arquivos de modelo necessários e lhe dá uma vantagem inicial.

Dito isso, clique no botão ‘Theme Template Kits’.

Criando um tema personalizado do WordPress usando SeedProd
Etapa 3: Selecione um Tema

Agora você pode escolher qualquer um dos modelos disponíveis.

Todos esses temas são totalmente personalizáveis, para que você possa ajustá-los para se adequar perfeitamente ao seu blog ou site WordPress.

Escolhendo um modelo de tema para seu site ou blog WordPress

Após escolher um tema, o SeedProd criará automaticamente todos os modelos de tema de que você precisa.

Você pode pensar nisso como a versão rascunho do seu tema WordPress personalizado.

Personalizando as páginas de blog, arquivo e pesquisa usando SeedProd
Etapa 4: Edite o Modelo do Blog

Agora você pode personalizar cada modelo usando o editor de arrastar e soltar do SeedProd.

Como queremos adicionar trechos de posts ao nosso site, passe o mouse sobre o modelo que controla a listagem do seu blog (geralmente chamado de ‘Índice do Blog, Arquivos, Pesquisa’) e clique no link ‘Editar Design’ quando ele aparecer.

Como adicionar trechos de posts ao seu tema WordPress com SeedProd

Isso carregará o construtor de arrastar e soltar do SeedProd.

À direita, você verá uma prévia do modelo. Por padrão, o modelo da página do blog mostrará o cabeçalho, o arquivo, o título e todos os seus posts.

O editor de temas e construtor de páginas de arrastar e soltar do SeedProd

O lado esquerdo mostra um menu com todos os diferentes blocos que você pode usar.

Você pode adicionar novos blocos arrastando-os para a página e, em seguida, reorganizá-los arrastando-os para cima e para baixo com o mouse.

Você pode personalizar qualquer bloco clicando nele e, em seguida, usando as configurações no menu esquerdo. Quando você fizer uma alteração, a pré-visualização do SeedProd será atualizada automaticamente para mostrar essas alterações em ação.

Como personalizar qualquer bloco em um tema do WordPress
Etapa 5: Selecione o Bloco de Posts

Como queremos personalizar os excertos das postagens, basta clicar para selecionar o bloco 'Posts' na pré-visualização ao vivo.

Depois de fazer isso, selecione o conteúdo que você deseja mostrar neste bloco usando as configurações no menu esquerdo.

Por exemplo, você pode alterar o layout das colunas, exibir paginação, mostrar a imagem em destaque e alterar a tag de título.

Como adicionar trechos de posts a um tema do WordPress sem escrever código
Etapa 6: Ative o Trecho

Para mostrar o excerto da postagem, basta clicar na alternância 'Mostrar Excerpt' para que ela fique laranja.

Depois de fazer isso, você pode alterar quantos caracteres o SeedProd mostra no excerto digitando um novo número em 'Comprimento do Excerpt'.

Adicionando trechos de blog a um tema do WordPress

O SeedProd também pode adicionar um link 'Leia Mais' a cada excerto, o que incentivará os leitores a abrir o artigo completo.

Você pode adicionar ou remover este link usando a alternância 'Mostrar Leia Mais'.

Adicionando um botão 'Leia Mais' aos seus trechos de posts

Você também pode substituir o texto 'Leia Mais' por sua própria mensagem digitando no campo 'Texto Leia Mais'.

Etapa 7: Salve suas alterações

Quando estiver satisfeito com a configuração do excerto da postagem, clique no botão 'Salvar' no canto superior direito da sua tela.

Personalizando o link 'Leia mais' em um trecho de postagem

Agora você pode personalizar os outros modelos do SeedProd indo para SeedProd » Theme Builder e seguindo o mesmo processo descrito acima.

Para mostrar os excertos das postagens aos visitantes, você primeiro precisa habilitar seu tema SeedProd. Para fazer isso, vá para SeedProd » Theme Builder e, em seguida, clique na alternância 'Habilitar Tema SeedProd' para que mostre 'Sim'.

Como habilitar um tema personalizado do WordPress usando SeedProd

Agora, se você visitar qualquer uma das suas páginas de blog, verá os excertos das postagens ao vivo.

Bônus: Mostrar Resumos Para Conteúdo Protegido por Senha

Se você tem um site de membros, então você pode ter algum conteúdo que não está disponível para o público em geral. No entanto, ainda é uma boa ideia mostrar um trecho do seu conteúdo protegido por senha.

Isso pode intrigar os usuários e incentivá-los a comprar suas assinaturas para ter acesso a conteúdo exclusivo em seu site.

Você pode fazer isso facilmente usando Restrict Content Pro, que é um popular plugin de proteção de conteúdo. Após a ativação, basta abrir uma postagem de sua preferência no editor de blocos do WordPress, onde você pode adicionar um trecho para ela no painel de blocos.

Depois disso, você pode configurar as configurações de restrição no menu suspenso.

Adicionar um trecho para a postagem restrita

Finalmente, publique a postagem e visite seu site WordPress.

Aqui, os usuários poderão ver o trecho e o título da postagem para o conteúdo restrito, assim como qualquer outra postagem. No entanto, o conteúdo em si ficará oculto para o público.

Prévia do trecho de conteúdo protegido

Para instruções detalhadas, você também pode ver nosso tutorial sobre como mostrar o trecho de uma postagem protegida por senha no WordPress.

Perguntas Frequentes Sobre a Exibição de Posts no WordPress

Aqui estão algumas perguntas que nossos leitores fizeram com frequência sobre como exibir posts e seus trechos no WordPress:

Como exibir trechos em uma página do WordPress?

Você pode exibir trechos de posts em qualquer página do WordPress usando o bloco embutido ‘Últimos Posts’. Simplesmente adicione o bloco à sua página, depois no painel de configurações do bloco, ative a opção ‘Conteúdo do post’ e selecione ‘Trecho’ para mostrar um resumo em vez do artigo completo.

Como pré-visualizar um post no WordPress?

Para pré-visualizar um post, clique no link ‘Pré-visualizar’ localizado no canto superior direito do editor de conteúdo. Você pode então selecionar ‘Pré-visualizar em nova aba’ para ver exatamente como seu post e seu trecho aparecerão para os visitantes no desktop, tablet ou celular antes de publicá-lo.

Como exibir posts populares no WordPress?

A maneira mais fácil de exibir posts populares é usando um plugin como MonsterInsights. Ele rastreia automaticamente quais artigos recebem mais tráfego e os exibe em um widget ou bloco de ‘Posts Populares’, ajudando você a manter os visitantes engajados com seu melhor conteúdo.

Para mais informações, veja nosso tutorial sobre como exibir posts populares no WordPress.

Como exibir posts recentes no WordPress?

Você pode exibir posts recentes em qualquer lugar do seu site usando o bloco ‘Posts Recentes’ ou o widget ‘Posts Recentes’. Uma vez adicionado, você pode personalizar as configurações de exibição para incluir a data do post, a imagem em destaque e um pequeno trecho para incentivar os leitores a clicar.

Para começar, confira nosso guia para iniciantes sobre como exibir posts recentes no WordPress.

Como exibir posts específicos no WordPress?

Para exibir posts específicos, você pode usar o bloco ‘Posts Recentes’ e filtrar os resultados por uma categoria ou tag específica. Para um controle mais avançado, construtores visuais como SeedProd permitem que você selecione manualmente IDs de posts específicos para criar uma lista curada de conteúdo.

Esperamos que este artigo tenha ajudado você a aprender como exibir trechos de posts em temas do WordPress. Você também pode querer ver nosso guia sobre como criar imagens interativas no WordPress e nossas escolhas de especialistas para os melhores temas de edição de site completo do 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.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

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

Interações do Leitor

95 CommentsLeave a Reply

    • Você deve ser capaz de adicionar isso, mas o trecho é normalmente um resumo do artigo ou o início do artigo, então não é sempre a coisa mais útil para incluir em seus artigos.

      Admin

  1. para o avião, isso é o que funcionou para mim – Vá para a página inicial e clique em editar. Vá para o editor de blocos e clique no bloco – Posts do Blog. Você verá uma configuração que diz ‘configurações de controle de post’

    Lá você pode ativar ou desativar a configuração de mostrar trecho

  2. Olá, obrigado por isso. Eu não tenho esses arquivos no meu tema filho. Se eu simplesmente fizer isso no meu tema pai, não será apagado se houver uma atualização?

    • Correto, se você colocá-lo em seu tema pai e o tema pai for atualizado, suas alterações seriam perdidas

      Admin

  3. Obrigado por este post. Eu também quero pedir ajuda sobre como adicionar preenchimento ao redor do trecho. Eu adicionei linhas de borda ao redor do meu trecho; o problema é que o trecho está tocando as linhas de borda. Como adiciono preenchimento ao redor dos trechos, impedindo que eles toquem nas linhas de borda? Agradeço antecipadamente.

  4. Olá,
    Estou usando o tema ‘Enlightenment’, mas tenho um problema: em minhas postagens, não consigo ver o trecho curto da postagem, ou seja, ele aparece em branco. E isso acontece apenas com o tema ‘Enlightenment’. Porque o mesmo código que estou usando em outro tema está funcionando bem. Alguém pode me dar uma solução para isso?

Deixar uma resposta

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