Call post on the page that is shown

3

I have a post page that shows the title of the post and I want it to click on the title to open a DIV with the post itself.

I do not have Javascript issues that are required for this. My problem is that all news is being displayed, rather than just the one associated with the clicked title.

I think my problem is in the loop, but I could not resolve it.

This is my current code:

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

The post-single div will appear when you click on the title.

    
asked by anonymous 15.12.2014 / 17:37

3 answers

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><figureclass="effect-goliath">
    <img src="http://lorempixel.com/output/city-q-c-100-50-1.jpg"/><figcaption><h2>titleum</h2></figcaption></figure><divclass="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>titleum</h2></figcaption></figure><divclass="post-single">
    <span class="close">Fechar</span>
     <h2>title title title </h2>
    <p>content content content content </p> 
    <span class="close">Fechar</span>
</div>
    
23.12.2014 / 22:17
0

The post-single div has no id or name. This makes me think that you should be using a javascript that locates the div and shows it. But, as you are doing a loop for all posts in:

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

This means that all divs will be rendered without id or specific name for each record. So when you find a div in javascript it will find all and open all. Need to find a way to put an id in each and make javascript locate the specific one you want to open. If you can show the javascript code that you use to open the div, maybe you can help out a bit more.

    
16.12.2014 / 15:52
0

You can create the single-NAME.php page, and assign the the_content() and whatever you want (image, etc ...) functions to show on that page.

When you click on the <a> tag that has the_permalink() it will automatically direct you to single .

Wordpress understands this all automatically.

    
23.12.2016 / 14:52