使用Ajax在Wordpress中加载更多帖子

时间:2014-03-01 19:40:48

标签: javascript php jquery ajax wordpress

这是我的帖子循环:

<?php query_posts($query_string . '&showposts=8'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <div class="large-4 columns">
        <section class="post-home">
          <section class="the_category">
          <?php
            $categories = get_the_category();
            $separator = ' ';
            $output = '';
            if($categories){
                    foreach($categories as $category) {
                       $output .= '<span class="'.$category->cat_name.'"><a href="'.get_category_link( $category->term_id ).'" title="' . esc_attr( sprintf( __( "Veja todos os posts em %s" ), $category->name ) ) . '">'.$category->cat_name.'</a></span>'.$separator;
                    }
            echo trim($output, $separator);
            }
?>
          </section>

          <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
          <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?> | <?php bloginfo('name') ?> | <?php bloginfo('description') ?>"><figure class="thumb-post" style="background: url('<?php echo $url; ?>') center center no-repeat;" ></figure></a>

          <section class="post-home-content">
            <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?> | <?php bloginfo('name') ?> | <?php bloginfo('description') ?>"><?php the_title(); ?></a></h2>
            <p><?php the_field('sub_titulo'); ?></p>

            <span class="link">Compartilhe</span>

            <time class="post-time" datetime="<?php the_time('d-m-Y'); ?> <?php the_time('G:i'); ?>"><?php the_time('d/m/Y'); ?></time>
          </section>

          <ul class="social">
            <li><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=<?php the_permalink() ?>" title="Compartilhar <?php the_title(); ?> no LinkedIn" target="_blank"><img src="<?php bloginfo('template_url'); ?>/img/in.png" alt="" width="24" /></a></li>
            <li><a href="https://plus.google.com/share?url=<?php the_permalink() ?>" title="Compartilhar <?php the_title(); ?> no Google Plus" target="_blank"><img src="<?php bloginfo('template_url'); ?>/img/gp.png" alt="" width="24" /></a></li>
            <li><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>" title="Compartilhar <?php the_title(); ?> no Facebook" target="_blank"><img src="<?php bloginfo('template_url'); ?>/img/fb.png" alt="" width="24" /></a></li>
            <li><a href="http://twitter.com/share?url=<?php the_permalink() ?>&amp;text=<?php the_title(); ?>&amp;via=chocoladesign" title="Compartilhar <?php the_title(); ?> no Twitter" target="_blank"><img src="<?php bloginfo('template_url'); ?>/img/tw.png" alt="" width="24" /></a></li>
          </ul>
        </section>
      </div>
      <?php endwhile; else: ?>
                <p><?php _e("Nenhum chocolate encontrado! :(", ''); ?></p>
                <?php endif; ?>

在下面,我有这个:

<div id="load-posts">
  <a href="#" class="button">Load more posts</a>
</div>

我的问题是:我如何只需点击链接“加载更多帖子”,就可以使用ajax加载6个帖子。

我尝试了很多插件,但是,不成功。 :/

我想这样做:http://designerthemes.com/preview/?theme=adapt

1 个答案:

答案 0 :(得分:0)

尝试pbd-ajax-load-posts插件。

我在这里发布了一些修补程序。 My code of "load more posts" on wordpress misses some pages. What's wrong with it?