[英]WordPress custom post type query display
I have a custom post type that I have a query for and it works great except for it is not displaying the way I would like it to.我有一个自定义帖子类型,我有一个查询,它工作得很好,除了它没有显示我想要的方式。 I want my projects to display 3 in a row.我希望我的项目连续显示 3 个。 I'm using Bootstrap and for some reason it is stacking them instead of displaying them in a row.我正在使用 Bootstrap,出于某种原因,它正在堆叠它们而不是连续显示它们。 I inspected the markup and it is creating a new div and a new row for each project.我检查了标记,它正在为每个项目创建一个新的 div 和一个新行。 I've tried playing around with the loop but it is still showing the projects the same way.我尝试过使用循环,但它仍然以相同的方式显示项目。 Here is the code I am working with:这是我正在使用的代码:
<div class="container portfolio">
<?php
$args = array( 'post_type' => 'projects', 'posts_per_page' => 30);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="row js--wp-4">
<div class="col-md-4">
<div class="card">
<img src="<?php the_field('background_img_small'); ?>" alt="" class="site-image">
<div class="overlay text-center">
<h2 class="card-title"><?php the_title(); ?></h2>
<p class="card-info"><?php the_field('short_desc'); ?></p>
<div class="d-flex justify-content-center align-items-center">
<a href="portfolio-single.html"><button type="button" class="btn btn-md btn-outline-secondary">View Project</button></a>
</div>
</div>
</div>
</div>
</div>
<?php endwhile;
wp_reset_postdata(); ?>
<?php else: ?>
<p><?php _e( 'Sorry there are no posts' ); ?></p>
<?php endif; ?>
</div>
Here is the way it needs to be displayed:这是它需要显示的方式:
Here is the way it is diplaying now with three posts to test:这是它现在显示的方式,需要测试三个帖子:
Solved.解决了。 I just had the row inside the loop and it kept displaying each project in a new row.我只是在循环中有一行,它不断在新行中显示每个项目。 Oops but here is the right code:糟糕,但这是正确的代码:
<div class="container portfolio">
<?php
$args = array( 'post_type' => 'projects' );
$the_query = new WP_Query( $args );
?>
<div class=" row js--wp-4">
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="col-md-4">
<div class="card">
<img src="<?php the_field('background_img_small'); ?>" alt="" class="site-image">
<div class="overlay text-center">
<h2 class="card-title"><?php the_title(); ?></h2>
<p class="card-info"><?php the_field('short_desc'); ?></p>
<div class="d-flex justify-content-center align-items-center">
<a href="portfolio-single.html"><button type="button" class="btn btn-md btn-outline-secondary">View Project</button></a>
</div>
</div>
</div>
</div>
<?php endwhile;
wp_reset_query(); ?>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.