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
- Usando o plugin de postagens relacionadas disponível no diretório WordPress.org.
- Usando código personalizado em
functions.phpno tema filho. - 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.
- Instale o plugin WP Show Posts.
- Ative o Módulo Elementos.
- Postagens relacionadas a estilo.
- 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.