wordpress：在两列中显示帖子答案

【问题标题】：wordpress: show posts in two columnswordpress：在两列中显示帖子
【发布时间】：2016-01-27 16:48:34
【问题描述】：

我有一个主题，可以在一列中显示最新的四篇文章。我想将此转换为两列中的两个帖子。

我制作了两个相邻的divs，第一个按降序排列，另一个按升序排列。然后我将其设置为仅显示 2 个帖子。

但现在它在左侧 div 中显示 2 个帖子，在右侧 div 中显示所有 4 个帖子：

我不明白它为什么这样做。代码如下：

<section class="container">
  <div class="left-half">
    <article>
       <!-- =========================
 SECTION: LATEST NEWS   
============================== -->
<?php

    $parallax_number_of_posts = get_option('posts_per_page');
    $args = array( 'post_type' => 'post', 'posts_per_page' => $parallax_number_of_posts, 'order' => 'ASC','ignore_sticky_posts' => true );
    $the_query = new WP_Query( $args );
    if ( $the_query->have_posts() ) {
        $parallax_one_latest_news_title = get_theme_mod('parallax_one_latest_news_title',esc_html__('Latest news','parallax-one'));
        if($parallax_number_of_posts > 0) {
        ?>
            <section class="brief timeline" id="latestnews" role="region" aria-label="<?php esc_html_e('Latest blog posts','parallax-one'); ?>">
                <div class="section-overlay-layer">
                    <div align="center" class="container">
                        <div class="row">

                            <!-- TIMELINE HEADING / TEXT  -->
                            <?php
                                if(!empty($parallax_one_latest_news_title)){
                                    echo '<div class="col-md-12 timeline-text text-left"><h2 class="text-left dark-text">'.esc_attr($parallax_one_latest_news_title).'</h2><div class="colored-line-left"></div></div>';
                                } elseif ( isset( $wp_customize )   ) {
                                    echo '<div class="col-md-12 timeline-text text-left paralax_one_only_customizer"><h2 class="text-left dark-text "></h2><div class="colored-line-left "></div></div>';
                                }
                            ?>

                            <div class="parallax-slider-whole-wrap">
                                <!--<div class="controls-wrap">
                                    <button class="control_next icon icon-arrow-carrot-down"><span class="screen-reader-text"><?php esc_attr_e('Post slider navigation: Down','parallax-one')?></span></button>
                                    <button class="control_prev fade-btn icon icon-arrow-carrot-up"><span class="screen-reader-text"><?php esc_attr_e('Post slider navigation: Up','parallax-one')?></span></button>
                                </div>-->
                                <!-- TIMLEINE SCROLLER -->
                                <div itemscope itemtype="http://schema.org/Blog" id="parallax_slider" class="col-md-6 timeline-section">
                                    <ul class="vertical-timeline" id="timeline-scroll">

                                        <?php

                                            $i_latest_posts= 0;

                                            while (  $the_query->have_posts() ) :  $the_query->the_post();

                                                $i_latest_posts++;


                                                if ( !wp_is_mobile() ){
                                                    if($i_latest_posts % 2 == 1){
                                                        echo '<li>';
                                                    }
                                                } else  {
                                                    echo '<li>';
                                                }
                                        ?>

                                                <div itemscope itemprop="blogPosts" itemtype="http://schema.org/BlogPosting" id="post-<?php the_ID(); ?>" class="timeline-box-wrap" title="<?php printf( esc_html__( 'Latest News: %s', 'parallax-one' ), get_the_title() ) ?>">

                                                    <div itemscope itemprop="image" class="icon-container white-text">
                                                        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                                            <?php 

                                                                if ( has_post_thumbnail() ) :
                                                                    the_post_thumbnail('parallax-one-post-thumbnail-latest-news');
                                                                else: ?>
                                                                    <img src="<?php echo parallax_get_file('/images/no-thumbnail-latest-news.jpg'); ?>" width="150" height="150" alt="<?php the_title(); ?>">
                                                            <?php 
                                                                endif; 
                                                            ?>
                                                        </a>
                                                    </div>
<div class="info">
                                                        <header class="entry-header">
                                                            <h1 itemprop="headline" class="entry-title"><br><br><br>
                                                                <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
                                                            </h1>

                                                    <!-- .entry-meta -->
                                                        </header>
                                                        <div itemprop="description" class="entry-content entry-summary">
                                                            <?php the_excerpt(); ?>
                                                            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="read-more"><?php printf( esc_html__( 'Bekijk de fotos %s', 'textdomain' ), '<span class="screen-reader-text">  '.get_the_title().'</span>' ); ?></a>
                                                        </div>
                                                    </div>
                                                </div>

                                            <?php
                                            if ( !wp_is_mobile() ){
                                                if($i_latest_posts % 2 == 0){
                                                    echo '</li>';
                                                }
                                            } else {
                                                echo '</li>';
                                            }

                                        endwhile;
                                        wp_reset_postdata(); 
                                        ?>
                                    </ul>
                                </div>

                            </div><!-- .parallax-slider-whole-wrap -->
                        </div>
                    </div>
                </div>
            </section>
    <?php
        }
    } ?>
    </article>
  </div>

<!--rechts-->

<div class="right-half">
    <article>


       <!-- =========================
 SECTION: LATEST NEWS   
============================== -->
<?php

    $parallax_number_of_posts = get_option('posts_per_page');
    $args = array( 'post_type' => 'post', 'posts_per_page' => $parallax_number_of_posts, 'order' => 'DESC','ignore_sticky_posts' => true );
    $the_query = new WP_Query( $args );
    if ( $the_query->have_posts() ) {
        $parallax_one_latest_news_title = get_theme_mod('parallax_one_latest_news_title',esc_html__('Latest news','parallax-one'));
        if($parallax_number_of_posts > 0) {
        ?>
            <section class="brief timeline" id="latestnews" role="region" aria-label="<?php esc_html_e('Latest blog posts','parallax-one'); ?>">
                <div class="section-overlay-layer">
                    <div align="center" class="container">
                        <div class="row">

                            <!-- TIMELINE HEADING / TEXT  -->

<br>
<br>
<br>
                            <div class="parallax-slider-whole-wrap">
                                <div class="controls-wrap">
                                    <button class="control_next icon icon-arrow-carrot-down"><span class="screen-reader-text"><?php esc_attr_e('Post slider navigation: Down','parallax-one')?></span></button>
                                    <button class="control_prev fade-btn icon icon-arrow-carrot-up"><span class="screen-reader-text"><?php esc_attr_e('Post slider navigation: Up','parallax-one')?></span></button>
                                </div>
                                <!-- TIMLEINE SCROLLER -->
                                <div itemscope itemtype="http://schema.org/Blog" id="parallax_slider" class="col-md-6 timeline-section">
                                    <ul class="vertical-timeline" id="timeline-scroll">

                                        <?php

                                            $i_latest_posts= 0;

                                            while (  $the_query->have_posts() ) :  $the_query->the_post();

                                                $i_latest_posts++;


                                                if ( !wp_is_mobile() ){
                                                    if($i_latest_posts % 2 == 1){
                                                        echo '<li>';
                                                    }
                                                } else  {
                                                    echo '<li>';
                                                }
                                        ?>

                                                <div itemscope itemprop="blogPosts" itemtype="http://schema.org/BlogPosting" id="post-<?php the_ID(); ?>" class="timeline-box-wrap" title="<?php printf( esc_html__( 'Latest News: %s', 'parallax-one' ), get_the_title() ) ?>">

                                                    <div itemscope itemprop="image" class="icon-container white-text">
                                                        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                                            <?php 

                                                                if ( has_post_thumbnail() ) :
                                                                    the_post_thumbnail('parallax-one-post-thumbnail-latest-news');
                                                                else: ?>
                                                                    <img src="<?php echo parallax_get_file('/images/no-thumbnail-latest-news.jpg'); ?>" width="150" height="150" alt="<?php the_title(); ?>">
                                                            <?php 
                                                                endif; 
                                                            ?>
                                                        </a>
                                                    </div>
<div class="info">
                                                        <header class="entry-header">
                                                            <h1 itemprop="headline" class="entry-title"><br><br><br>
                                                                <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
                                                            </h1>

                                                    <!-- .entry-meta -->
                                                        </header>
                                                        <div itemprop="description" class="entry-content entry-summary">
                                                            <?php the_excerpt(); ?>
                                                            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="read-more"><?php printf( esc_html__( 'Bekijk de fotos %s', 'textdomain' ), '<span class="screen-reader-text">  '.get_the_title().'</span>' ); ?></a>
                                                        </div>
                                                    </div>
                                                </div>

                                            <?php
                                            if ( !wp_is_mobile() ){
                                                if($i_latest_posts % 2 == 0){
                                                    echo '</li>';
                                                }
                                            } else {
                                                echo '</li>';
                                            }

                                        endwhile;
                                        wp_reset_postdata(); 
                                        ?>
                                    </ul>
                                </div>

                            </div><!-- .parallax-slider-whole-wrap -->
                        </div>
                    </div>
                </div>
            </section>
    <?php
        }
    } ?>
    </article>
  </div>
</section>

【问题讨论】：

请尽量减少你的代码，现在有太多不相关的代码
我知道，但我找不到必要的...对不起
请参考stackoverflow.com/help/mcve 甚至不清楚你指的是哪个div标签？如果您需要高质量的帮助，您必须提供更多指导。

标签： php wordpress multiple-columns

【解决方案1】：

如果我正确理解您想要实现的目标 - 将几篇文章分成两列，我无法准确理解您希望如何在代码中实现这一目标。如果您依赖此条件$the_query->current_post % 2 == 1 过滤帖子，那么在您的代码中它只过滤li 元素的打印，但随后循环继续并显示帖子本身，即您使用此代码实现的目的是将两个帖子（div.timeline-box-wrap）元素在一个li。如果你想使用这种分离方法，你应该稍微改变一下代码（我会简化它，但主要是，你必须停止如果您的条件通过，则当前循环）。

您不需要使用相同的查询两次查询数据库 - 这是性能问题，因此您可以使用相同的结果并循环两次。

您可以使用$the_query->current_post 获取当前帖子和过滤器。

<section class="container">
<div class="left-half">
<article>
    <?php
    $parallax_number_of_posts = get_option('posts_per_page');
    $args = array( 'post_type' => 'product', 'posts_per_page' => $parallax_number_of_posts, 'order' => 'ASC','ignore_sticky_posts' => true );
    $the_query = new WP_Query( $args );
    if ( $the_query->have_posts() ) {
        if($parallax_number_of_posts > 0) {
            ?>
            <section class="brief timeline" id="latestnews" role="region" aria-label="<?php esc_html_e('Latest blog posts','parallax-one'); ?>">
                <ul class="vertical-timeline" id="timeline-scroll">
                <?php while (  $the_query->have_posts() ) :  $the_query->the_post();
                    if($the_query->current_post % 2 == 1)
                        continue; ?>
                        <li><?php the_title() ?></li>
                <?php endwhile; ?>
                </ul>
            </section>
            <?php
        }
    } ?>
</article>
</div>

<div class="right-half">
<article>
    <?php
    $the_query->rewind_posts();
    if ( $the_query->have_posts() ) {
        if($parallax_number_of_posts > 0) {
            ?>
            <section class="brief timeline" id="latestnews" role="region" aria-label="<?php esc_html_e('Latest blog posts','parallax-one'); ?>">
                <ul class="vertical-timeline" id="timeline-scroll">
                    <?php while (  $the_query->have_posts() ) :  $the_query->the_post();
                        if($the_query->current_post % 2 == 0)
                            continue; ?>
                        <li><?php the_title() ?></li>
                    <?php endwhile; ?>
                </ul>
            </section>
            <?php
        }
    } ?>
</article>
</div>
</section>

附：如果您设置 2 个变量：$left 和 $right 并仅使用一个循环来设置一个或另一个与 html，然后打印它们的值，则可以简化更多。

【讨论】：