3

Eu tenho uma página de postagens que mostra o título da postagem e quero que ao clicar no no título abrisse uma DIV com a postagem em si.

Não tenho problemas quanto ao Javascript necessário para isso. O meu problema é que todas as notícias estão sendo mostradas, ao invés de apenas aquela associada ao título clicado.

Acredito que o meu problema esteja no loop, mas não consegui resolver.

Esse é meu código atual:

<!-- 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 -->

A div post-single é a que vai aparecer quando se clicar no título.

3 Respostas 3

2

$(function () {
    $(document).on('click','.effect-goliath', effectgoliath);
    
    function effectgoliath(e){
        $this = $(this);
        //$this.siblings('.post-single').css('display','none');
        $this.siblings('.post-single').slideUp();
        
        //$this.next().css('display','block');
        $this.next().slideDown().one('click','.close',function(e){
            $this.next().slideUp();
        });
    }
    
});
.post-single {
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure class="effect-goliath">
    <img src="http://lorempixel.com/output/city-q-c-100-50-1.jpg" />
    <figcaption>
         <h2>title um</h2>
    </figcaption>
</figure>
<div class="post-single">
    <span class="close">Fechar</span>
     <h2>title title title </h2>
    <p>content content content content </p> 
    <span class="close">Fechar</span>
</div>

<figure class="effect-goliath">
    <img src="http://lorempixel.com/output/people-q-c-100-50-5.jpg" />
    <figcaption>
         <h2>title um</h2>
    </figcaption>
</figure>
<div class="post-single">
    <span class="close">Fechar</span>
     <h2>title title title </h2>
    <p>content content content content </p> 
    <span class="close">Fechar</span>
</div>

0

O div post-single, não tem id ou name. Isso me faz pensar que vc deve estar usando um javascript que localiza a div e mostra ela. Só que, como vc está fazendo um loop para todos os posts em:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

isso quer dizer que todas as div serão renderizadas sem id ou name específico para cada registro. Por isso, quando vc localizar uma div no javascript vai localizar todas e abrir todas. Precisa achar um jeito de colocar um id em cada uma e fazer o javascript localizar a específica que vc quer abrir. Se puder mostrar o código javascript que vc usa para abrir a div, talvez possa auxiliar um pouco mais.

0

Você pode criar a página single-NOME.php, e atribuir as funções the_content() e o que você quiser (imagem, etc..) para mostra nessa pagina.

Ao clicar na tag <a> que tem o the_permalink() ele vai direcionar automaticamente você para o single.

O Wordpress entende tudo isso de forma automática.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .