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 exibir trechos de postagens em temas do WordPress

Os trechos fornecem uma breve prévia do seu conteúdo, permitindo que os visitantes entendam rapidamente do que se trata cada postagem e incentivando-os a clicar para ver mais. Isso é especialmente útil para listagens de blogs, arquivos e páginas de resultados de pesquisa.

Ao exibir trechos de postagens, você pode tornar o layout do seu site visualmente atraente e reduzir o tempo de carregamento. Entretanto, a maioria dos temas do WordPress não mostra trechos de postagens por padrão. Você terá que configurar isso por conta própria.

Na WPBeginner, sempre exibimos trechos de nossos artigos nas páginas inicial e do blog. Essa abordagem nos permite destacar mais publicações antecipadamente, facilitando a navegação dos visitantes em nosso conteúdo. Também temos muita experiência na personalização de temas do WordPress e na otimização de blogs.

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

How to display post excerpts in WordPress themes

Por que exibir trechos de postagens no WordPress?

Por padrão, o WordPress mostrará publicações completas na página inicial, na página do blog e nas páginas de arquivo em seu site. No entanto, essa não é a melhor experiência para os usuários que desejam navegar rapidamente pelas diferentes publicações e encontrar a que desejam ler primeiro.

Isso também pode significar muita rolagem, o que é um grande problema para usuários de smartphones e tablets.

À medida que você publica mais posts, o WordPress também pode dividir seus blogs em várias páginas usando a paginação. À medida que suas postagens mais antigas são empurradas para outras páginas, elas geralmente recebem muito menos visualizações e menos engajamento.

Por esse motivo, muitos proprietários de blogs mostram trechos de postagens em suas páginas de arquivo e de índice do blog. Como apenas uma parte de cada artigo é carregada, isso pode aumentar a velocidade e o desempenho do WordPress.

An example of post excerpts in a WordPress theme

O WordPress tem suporte interno para trechos de postagens, mas nem todos os temas usam esse recurso.

Dito isso, vamos mostrar a você como exibir trechos de postagens em qualquer tema do WordPress.

Como verificar se seu tema do WordPress suporta trechos de postagens

Os temas mais populares do WordPress têm uma configuração que permite mostrar trechos de postagens em vez da postagem completa.

Para ver se seu tema oferece suporte a trechos de postagens, visite a página Appearance ” Customize (Aparência ” Personalizar ) no painel do WordPress.

O local dessas configurações varia de acordo com o seu tema do WordPress, mas você precisa procurar as configurações rotuladas como “Blog”.

Adding post excerpts to a WordPress theme using the Customizer

Por exemplo, se estiver usando o tema Astra do WordPress, será necessário selecionar “Blog” e clicar em “Blog/Arquivo”.

Em seguida, role para baixo até a seção “Post Elements” e expanda a guia “Excerpt”. Depois de fazer isso, selecione a opção “Excerto”.

Adding post excerpts to your WordPress website

Se o seu tema tiver uma opção de “Configurações de tema” ou “Configurações gerais de postagem”, você também poderá ativar trechos de postagem nessas seções.

Depois de fazer isso, basta clicar no botão “Publish” (Publicar). Agora, se você visitar o blog, o arquivo ou a página inicial, verá uma lista de trechos do blog em vez de postagens completas.

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

Método 1: Adicionar trechos de postagens ao WordPress usando código (fácil)

Se o seu tema do WordPress não for compatível com trechos de postagens por padrão, você sempre poderá adicionar esse recurso manualmente.

Você pode editar os arquivos do tema do WordPress diretamente, mas recomendamos a criação de um tema filho. Dessa forma, quando você atualizar o tema do WordPress, não perderá as alterações feitas.

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

Depois de fazer isso, você precisará encontrar o modelo que controla cada página em que deseja mostrar trechos de postagens. Na maioria dos temas, esse modelo 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 modelos do WordPress.

Feito isso, basta localizar o seguinte código em cada arquivo:

<?php the_content(); ?>

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

<?php the_excerpt(); ?>

Feito isso, salve o arquivo e verifique seu site. Agora você deverá ver trechos de postagens onde antes estava o artigo completo.

Alterar o comprimento padrão do trecho do WordPress

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

Você pode alterar isso para mostrar 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 simples erro também pode causar muitos erros comuns do WordPress e pode até mesmo danificar completamente seu site.

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

Primeiro, você precisa instalar e ativar o plug-in gratuito WPCode. Para obter mais informações, consulte nosso guia para iniciantes sobre como instalar um plug-in do WordPress.

Após a ativação, visite a página Code Snippets ” + Add Snippet no painel do WordPress e clique no botão “Use Snippet” na opção “Add Your Custom Code (New Snippet)”.

How to show post excerpts using code

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

Depois disso, abra a lista suspensa “Code Type” (Tipo de código) e escolha “PHP Snippet”.

Customizing your post excerpts using code

Feito isso, 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');

Esse código altera o tamanho do trecho da postagem para 100 caracteres. Você pode alterar o “100” para qualquer número que desejar.

Depois de colar o código, alterne a chave de “Inativo” para “Ativo” no canto superior direito e, em seguida, clique no botão “Salvar snippet”.

Save and activate code snippet WPCode

Para obter mais dicas sobre como ajustar os trechos de suas postagens, consulte nosso guia sobre como personalizar os trechos do WordPress sem código.

Método 2: Adicionar trechos de postagens usando o editor completo do site (somente temas de blocos)

Se estiver usando um dos temas mais recentes de blocos do WordPress, você poderá adicionar trechos de postagens usando o editor completo do site.

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

Using the full-size editor (FSE)

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

No menu do lado esquerdo, basta clicar em “Templates”.

Displaying post excerpts in WordPress using the full-site editor (FSE)

Agora você verá uma lista de todos os modelos que compõem seu tema do WordPress. Dependendo do seu tema, talvez você queira adicionar trechos ao arquivo, índice, pesquisa ou modelo semelhante.

Basta localizar o modelo que você deseja editar e dar um clique nele.

Displaying post excerpts using the WordPress full-site editor (FSE)

O WordPress agora mostrará uma visualização desse modelo.

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

Displaying post excerpts using the WordPress full-site editor (FSE)

Agora, clique no ícone “+”.

No painel de pesquisa que aparece, digite “Post Excerpt”.

Adding the post excerpt block to a block-based WordPress theme

Quando o bloco certo aparecer, arraste-o e solte-o em seu layout.

Você pode repetir esse processo para adicionar vários trechos de postagens ao modelo.

Adding the post excerpt block to a block-based WordPress theme

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

No menu à direita, você pode começar escolhendo se o link “Leia mais” aparecerá na mesma linha do trecho usando o botão de alternância “Mostrar link em nova linha”.

Adding a read more button to a blog archive page

Feito isso, selecione a guia “Styles” (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ê fizer alterações, a visualização ao vivo será atualizada automaticamente, para que você possa experimentar configurações diferentes e ver qual é a melhor.

How to customize a WordPress post excerpt

Quando estiver satisfeito com a configuração do trecho da postagem, clique no botão “Save” (Salvar) para ativar as alterações.

Deseja mostrar trechos de postagens em mais páginas e postagens? Então, basta repetir as etapas acima, mas dessa vez escolha um novo modelo no menu à esquerda.

Método 3: Adicionar trechos de postagens ao WordPress usando um construtor de temas (avançado)

Se você quiser ter controle total sobre a aparência do arquivo, da página do blog, da página inicial e do restante do site, poderá criar um tema personalizado.

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

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

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

Primeiro, você precisa instalar e ativar o plug-in SeedProd. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

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

Adding a SeedProd license key to WordPress

Depois de inserir a chave de licença, você estará pronto para criar um tema WordPress personalizado usando o construtor de temas SeedProd.

Primeiro, você precisa ir para a página do SeedProd ” Theme Builder.

The SeedProd theme builder

Aqui, você pode usar um dos kits e modelos de site prontos do SeedProd como ponto de partida ou criar manualmente um modelo 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” (Kits de modelos de temas).

Creating a custom WordPress theme using SeedProd

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

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

Choosing a theme template for your WordPress website or blog

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

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

Customizing the blog, archive, and search pages using SeedProd

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

Como queremos adicionar trechos de postagens ao nosso site, passe o mouse sobre o modelo“Blog Index, Archives, Search” e clique no link “Edit Design” quando ele aparecer.

How to add post excerpts to your WordPress theme with SeedProd

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

À direita, você verá uma visualização do modelo. Por padrão, o modelo da página do blog mostrará o cabeçalho, o arquivo, o título e todas as suas postagens.

The SeedProd drag and drop theme editor and page builder

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 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 à esquerda. Quando você fizer uma alteração, a visualização do SeedProd será atualizada automaticamente para mostrar essas alterações em ação.

How to customize any block in a WordPress theme

Como queremos personalizar os trechos das postagens, basta clicar para selecionar o bloco “Posts” na visualização ao vivo.

Depois disso, selecione o conteúdo que você deseja mostrar nesse bloco usando as configurações no menu à esquerda.

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

How to add post excerpts to a WordPress theme without writing code

Para mostrar o trecho da postagem, basta clicar no botão de alternância “Show Excerpt” para que ele fique laranja.

Depois de fazer isso, você pode alterar o número de caracteres que o SeedProd mostra no trecho digitando um novo número em ‘Excerpt Length’ (Comprimento do trecho).

Adding blog excerpts to a WordPress theme

O SeedProd também pode adicionar um link “Leia mais” a cada trecho, o que incentivará os leitores a abrir o artigo completo.

Você pode adicionar ou remover esse link usando o botão de alternância “Show Read More”.

Adding a 'Read More' button to your post excerpts

Você também pode substituir o texto “Leia mais” por sua própria mensagem, digitando no campo “Texto de leitura”.

Quando estiver satisfeito com a configuração do trecho da postagem, clique no botão “Save” (Salvar) no canto superior direito da tela.

Customizing the 'Read More' link in a post excerpt

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

Para mostrar os trechos das postagens aos visitantes, primeiro você precisa ativar o tema do SeedProd. Para fazer isso, vá para SeedProd ” Theme Builder e clique no botão “Enable SeedProd Theme” (Ativar tema do SeedProd) para que apareça “Yes” (Sim).

How to enable a custom WordPress theme using SeedProd

Agora, se você visitar qualquer uma das páginas do seu blog, verá os trechos das postagens ao vivo.

Bônus: Mostrar trechos de conteúdo protegido por senha

Se você tiver um site de associação, talvez tenha algum conteúdo que não esteja disponível para o público geral. No entanto, ainda é uma boa ideia mostrar um trecho de 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 o 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ê poderá adicionar um trecho a ela no painel de blocos.

Depois disso, você pode configurar sua restrição no menu suspenso.

Add an excerpt for the restricted post

Por fim, publique a postagem e acesse seu site do WordPress.

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

Protected content excerpt preview

Para obter instruções detalhadas, consulte também nosso tutorial sobre como mostrar um trecho de uma publicação protegida por senha no WordPress.

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

93 ComentáriosDeixe uma resposta

  1. Manasi

    for the plane these this is what worked for me – Go to the home page and clkick edit. Go to the block editor and click on the block – Blog Posts. You will seea setting which states ‘post control settings’

    There you can enable or disable the show excerpt setting

    • WPBeginner Support

      Thanks for sharing where you found your settings

      Administrador

  2. Dicado

    Hi thanks for this. I don’t have those files in my child theme. If I just go ahead and do this in my parent theme, won’t it be erased if there is an update?

    • WPBeginner Support

      Correct, if you place it in your parent theme and the parent theme is updated your changes would be lost

      Administrador

  3. Shawn

    Thanks for this post – I used this back in 2016 and again today in 2019!

    • WPBeginner Support

      Glad our recommendations can continue to be helpful :)

      Administrador

  4. John

    Thanks for this post. I also want to ask for help on how to add padding around excerpt. I have added border lines around my excerpt; the problem is the excerpt is touching the borderlines. How do I add padding around the excerpts, preventing it from touching the borderlines? Thanks in advance.

  5. Atul Jagtap

    Hi their,
    I am using ‘Enlightenment’ theme but I have a problem that in my post I can’t see the short Post Excerpt ie it’s come blank. And this happened only with ‘Enlightenment’ this theme. Because same code I am using in other theme is working fine. So is anybody give me solution on this?

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.