Question

我有一个主题，在一列中显示最新的四个帖子。我想将其转换为两列中的两个帖子。

我在彼此旁边制作了两个div，并按顺序排列第一个，另一个按升序排列。然后我将其设置为仅显示2个帖子。

但现在它显示左侧div中的2个帖子和右侧div中的所有四个帖子：

我不明白为什么会这样做。这是代码：

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

Answer 1

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

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

您可以使用$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>

P.S。如果设置2个变量，可以简化更多：$left和$right，并且只使用一个循环来设置html中的一个或其他，然后打印它们的值。

wordpress：在两列中显示帖子

1 个答案: