Como exibir postagens relacionadas no tema GeneratePress?

Está procurando saber como exibir postagens relacionadas no tema GeneratePress? Neste guia, vamos explicar tudo o que você precisa saber para fazer isso. Se você optou pelo tema GeneratePress para o seu blog, fez uma excelente escolha.

Atualmente, estou utilizando o GeneratePress Premium e estou muito satisfeito com ele. Agradeço à equipe responsável por este tema.

O GeneratePress se destaca por seu design que é ao mesmo tempo simples e elegante, garantindo que as páginas sejam carregadas rapidamente. Além disso, ele oferece uma ampla gama de funcionalidades que permitem personalizar e otimizar a experiência do usuário de maneira eficiente.

Ao instalar o tema padrão GeneratePress, ele tem um tamanho menor que 30 kb. É por isso que faltam coisas no tema GP.

Se o dono do tema incluir todas as coisas dentro do tema WordPress, ele ficará pesado. Então, com plugin ou sem plugin, você pode conseguir qualquer coisa que quiser no seu site.

Maneiras de exibir postagens relacionadas no tema GeneratPress

1. Usando o plugin de postagens relacionadas disponível no diretório WordPress.org.
2. Usando código personalizado em functions.php no tema filho.
3. Com técnicas de código + plugin.

Neste artigo relacionado no tema GeneratePress, usaremos a terceira etapa para obter postagens relacionadas abaixo do artigo único.

Eu pessoalmente usei esse método no meu blog para mostrar posts relacionados. Você pode encontrá-lo depois do conteúdo em um único post.

Etapas para exibir postagens relacionadas no tema GeneratePress

Para mostrar posts relacionados no GeneratePress Theme, usei o WP Show Posts Plugin e Elements Modules do tema. Vamos mergulhar nos detalhes.

1. Instale o plugin WP Show Posts.
2. Ative o Módulo Elementos.
3. Postagens relacionadas a estilo.
4. Abrir postagens relacionadas em nova aba.

1. Usando o plugin WP Show Posts

Tom Usborne, a pessoa por trás do GeneratePress Theme, desenvolve o plugin WP Show Posts. Sem comprometer a velocidade da página do site, posso usar este plugin.

Então, vamos começar

• Instale o plugin WP Show Posts.
• Vá para WP Show Posts na barra lateral e clique em Adicionar novo.
• Nomeie a nova lista como related.As na captura de tela abaixo.

Vá para a seção Posts > Tipo de post como um post. Taxonomia como uma categoria. Post por página como 3. Lembre-se do seu Shortcode Post ID . O Post ID é necessário na etapa 4.

Vá para a seção Colunas > Colunas como 3. Colunas com medianiz como 2em.

Vá para a seção Imagens > Verifique as Imagens . Mencione a largura da imagem (px) e a altura da imagem (px) com 211 e 150, respectivamente. Alinhamento da imagem como Centro. Localização da imagem como Acima do título.

Em seguida, vá para a seção Conteúdo > Tipo de conteúdo como Nenhum. Comprimento do trecho (palavras) como 30. Marque Incluir título . Elementos do título como p. Deixe todos os outros em branco.

Vá para a seção Meta > Desmarque todas as configurações.

Vá para Mais configurações > Marque Excluir atual e  Ignorar postagens fixas e deixe todas as configurações como estão.

2. Usando o módulo Elements no GeneratePress

Agora, vamos começar nosso segundo passo para exibir postagens relacionadas no tema GeneratePress Premium.

Ative o Módulo de Elementos. Vá para Appearance > GeneratePress > Elements > Activate

E

Vá para Appearance > Elements > Add New

Escolha Elemento Tipo como Gancho . Nomeie-o como Postagem Relacionada .

Cole o seguinte código postal relacionado no Hook.

Explicar<div class="wpsp-related-posts1  grid-container">
	<h2>Related Posts</h2>
<?php
if ( is_single() ) {
    $cats =  get_the_category();
    $cat = $cats[0];
} else {
    $cat = get_category( get_query_var( 'cat' ) );
}

$cat_slug = $cat->slug;
$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );
wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' );
?>
</div>

Confira: Análise do GeneratePress

Use este código somente se precisar mostrar postagens relacionadas por Tags

Explicar<div class="wpsp-related-posts1  grid-container">
	<h2>Related Posts</h2>
<?php    
if ( is_single() ) {
        $tags =  get_the_tags();
        $tags_list = [];
        foreach ($tags as $tag)
            $tags_list[] = $tag->slug;
        $tag_string = implode( ', ', $tags_list);
    } else {
        $tag_string = get_tag( get_query_var( 'tag' ) );
    }

    $list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );
    wpsp_display( $list->ID, 'tax_term="' . $tag_string . '"' );
    ?>
</div>

Vá para Configurações do Hook e escolha o hook para exibir after_content e marque Executar PHP .

Vá para as Regras de exibição, selecione Localização como Todos os singulares e Exclua todas as páginas

Clique no botão Publicar .

3. Postagens relacionadas ao estilo

Agora, é hora de estilizar as postagens relacionadas usando CSS.

Vá paraAppearance > Customize > Additional CSS

Cole o seguinte código na seção CSS Adicional. Você pode ajustar o estilo de acordo com suas necessidades.

Explicar.wpsp-related-posts1 {
    background-color: #fff;
    padding: 24px 20px 10px 20px;
    margin-top: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}

Atualizar

Se você quiser mostrar as postagens relacionadas em uma lista numérica (não postagens relacionadas a miniaturas), basta ajustar algumas configurações, conforme mencionado abaixo, nas configurações do plugin WP Show Posts acima e usar o código CSS.

• Vá para  a seção Posts  > Posts por página como 5 ou 10 (como desejar)
• Vá para  a seção Colunas  >  Colunas  como 1
• Desmarque a opção Imagens no menu Imagens.

Nota: Você precisa lembrar do seu ID de shortcode wp show posts conforme mencionado na captura de tela acima e alterar o ID de shortcode post no código CSS abaixo. Aqui eu tenho o ID de shortcode post #wpsp-2938 no código CSS, altere-o e veja o resultado.

Explicar.wpsp-related-posts1 {
    background-color: #fff;
    padding: 15px 20px 50px 20px;
    margin-top: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
    counter-reset: wplogout-list;
}

#wpsp-2938 p{
    counter-increment: wplogout-list;
    margin-bottom: -25px;
}

#wpsp-2938 p:before { 
    content: counter(wplogout-list) ". ";
    color: #1b78e2;
}

O resultado que diz respeito às postagens que estão relacionadas a esse tema específico está conectado e organizado através de uma lista que foi elaborada de forma a facilitar a visualização e o entendimento. Essa lista específica serve para reunir todas as informações pertinentes de maneira clara e acessível..

4. Abra Postagens Relacionadas em Nova Aba

Vamos abrir cada postagem do WordPress na nova aba. (Esta é uma parte opcional)

• Com este código JavaScript, você pode abrir cada postagem na página em branco.
• Como mencionado acima, vá para Appearance > Elements > Add New
• Escolha Elemento Tipo como  Gancho . Nomeie-o como  Abrir Post Relacionado em Nova Aba .
• Cole o código JavaScript da nova aba.

Explicar<script>
	jQuery(function($){
		$( document ).on( 'click', '#wpsp-2938 a', function(e) { 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    window.open(url, '_blank');
});
});
</script>

Observação: no código acima, em #wpsp- 2938 , cole o shortcode post id gerado pelo WP Show Posts Plugin ao criar uma nova lista na etapa 1.

Vá para Configurações de Hook e escolha o hook a ser exibido no  wp_footer e deixe todas as outras configurações em branco.

Vá para  Regras de exibição  e selecione  Localização  como  Todos os singulares  e  Excluir  todas as  páginas .

Clique no  botão Publicar.

Conclusão

Espero que este artigo sobre Exibir postagens relacionadas no tema GeneratePress ajude você a atingir seu objetivo de exibir postagens relacionadas em uma única postagem.

Se você estiver procurando por mais tutoriais relacionados a GP, você pode verificar a categoria GeneratePress para mais

Se você tiver alguma outra técnica ou algum problema, sinta-se à vontade para comentar.