Wordpress отображает контент без перезагрузки страницы

Question

У меня есть следующий код:

$('.left article').on('click', function(event) {
   var article_content = $(this).children('.article-content').html()
	$('.right').html(article_content);
});

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

section {
  display: flex;
}

section > div {
  flex: 0 0 50%;
  padding: 15px;
  width: 50%;
}

.left .article-content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="left">
     <article>
        <h2>My post title</h2>
        <div class="article-content"><p>This is the content for the first article</p></div>
        </article>

     <article>
        <h2>Another post title</h2>
        <div class="article-content"><p>Content for the the second post</p></div>
        </article>

     <article>
        <h2>Third post title</h2>
        <div class="article-content"><p>This is the content for the third post</p></div>
        </article>
  </div>


  <div class="right">

  </div>
</section>

Я хочу реализовать это с помощью сообщений из пользовательских типов сообщений, поэтому в первом столбце мне нужно отобразить список заголовков, а во втором яхочу отобразить содержание поста.Я сделал это, используя следующий код:

 <section>
        <div class="left">
            <article>
                <h2>
                    <ul>
                        <?php global $post;
                        $wpposts = get_posts('numberposts=3&post_type=>book');
                        foreach($wpposts as $post):
                            setup_postdata($post);?>
                            <li>
                                    <?php the_title(); ?>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </h2>
                <div class="article-content">
                    <p>
                    <?php the_content(); ?>
                    </p>
                </div>
            </article>
        </div>


        <div class="right">

        </div>
    </section>

но когда я нажимаю на ссылку, я получаю весь контент, и нажимаю второй раз на другой заголовок, я не получаю результат.

Кто знает, что я должен изменить?

Answer 1

Похоже, ваш цикл неверен.Попробуйте это:

 <section>
        <div class="left">
           <?php global $post;
                        $wpposts = get_posts('numberposts=3&post_type=>book');
                        foreach($wpposts as $post):
                            setup_postdata($post);?>
            <article>
                <h2>
                    <ul>
                            <li>
                                    <?php the_title(); ?>
                            </li>

                    </ul>
                </h2>
                <div class="article-content">
                    <p>
                    <?php the_content(); ?>
                    </p>
                </div>
            </article>
           <?php endforeach; ?>
        </div>


        <div class="right">

        </div>
    </section>

Теперь каждое сообщение будет обернуто в <article>.