Customização da página de postagem

(@nncl)

Olá pessoal.

Estou com um problema meio que bobo mas que não estou conseguindo resolver. Eu tenho uma página de postagens que mostra o título da postagem, e quero que quando a pessoa clicar no título abra uma div com a postagem em si – js tranquilo.

O meu problema é que quando o título é clicado para aparecer a div com a postagem é mostrado todas as notícias. Acredito que o meu problema esteja no loop, mas não consegui resolver.

A seguir, o meu código. PS: a div post-single é a que vai aparecer quando clicar no título.

<!-- laço -->
			<?php query_posts('posts_per_page=2&cat=36');?>
			<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

				<figure class="effect-goliath">
					<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>" alt="<?php the_title(); ?>"/>
					<figcaption>
						<h2><?php the_title(); ?></h2>
						<p><?php wp_limit_post(39,'...',true);?>...</p>
						<!-- <a href="<?php the_permalink() ?>">Veja mais</a> -->
					</figcaption>
				</figure>

				<div class="post-single">
					<span class="close">Fechar</span>
					<h2><?php the_title(); ?></h2>
					<p><?php the_content(); ?></p>
					<span class="close">Fechar</span>
				</div>

			<?php endwhile?>
			<?php else: ?>
				<h2>Nada Encontrado</h2>
				<p>Erro 404</p>
				<p>Lamentamos mas não foram encontrados artigos.</p>
			<?php endif; ?>
			<?php wp_reset_query(); ?>
			<!-- fim laço -->

Visualizando 3 respostas - 1 até 3 (de um total de 3)

Moderador Leo Baiano
(@leobaiano)

9 anos, 4 meses atrás

No loop você definiu para mostrar 2 posts (posts_per_page=2), provavelmente estão aparecendo 2 divs .post-single e quando você clica no titulo seu js está abrindo as duas.

Porque você não inclui o ID do post em uma tag tipo data-id, retira a div post-single de dentro do loop e deixa ele vazio, só com HTML, e inclui os dados (titulo, conteúdo) na hora do click no titulo? Faz isso com JS e ajax.

Se tiver dúvidas sobre como trabalhar com AJAX no WordPress da uma olhada na documentação: http://codex.wordpress.org/AJAX_in_Plugins

Criador do tópico Cauê
(@nncl)

9 anos, 4 meses atrás

Obrigado pelo feedback Leo.

Como eu guardaria o título do devido post para ser mostrado no momento do click? Como ele não pegaria o dos outros posts também?
Moderador Leo Baiano
(@leobaiano)

9 anos, 4 meses atrás
Como eu disse, você vai incluir o ID do post na tag , por exemplo:

<a href="javascript:;" title="<?php echo the_title(); ?>" data-id="<?php echo $post->ID; ?>" class="post"><?php the_title(); ?></a>

Ai no javascript você precisaria fazer algo tipo assim:
```
$(".post").on("click", function(){
var post_id = $(this).attr("data-id"); // pega o ID do post que foi clicado
$.get( admin_url, {
    action: 'exibir_post',
    id: post_id
},
function(data){
// Aqui é onde você vai receber os dados do post, inserir na div post-single e exibir ela
},"json"
);
});
```
Lembrando que onde tem admin_url você deve colocar a URL do ajax do WP, veja isso no link que te passei. Outra coisa, no functions.php você precisa criar a função que vai receber o GET do javascript, consultar os dados do post através do ID enviado pelo js e retornar as informações do post em json.

Mãos a obra agora!

Visualizando 3 respostas - 1 até 3 (de um total de 3)

O tópico ‘Customização da página de postagem’ está fechado para novas respostas.

Customização da página de postagem

Tags de tópico

Visualizações