wordpress：在两列中显示帖子
我有一个主题，在一列中显示最新的四个帖子。我想将其转换为两列中的两个帖子。
我在彼此旁边制作了两个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>
1 个答案:
答案 0 :(得分：0)
如果我理解你想要实现的目标 - 将几个帖子分成两列，我无法准确理解你想如何将它实现到代码中。如果您依赖此条件$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中的一个或其他，然后打印它们的值。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？