创建for循环以显示动态数据
Dea*_*orm 6 php wordpress for-loop function
我目前正在开发一个自定义WordPress模板.在这个模板中,我试图显示特定类别的所有帖子,将其视为一种产品细分(没有销售或任何东西).所以我现在所拥有的是动态显示所有帖子图像和标题,所有样式和过滤ACF的设置.
我想要实现的是以下结果:(使用bootstrap).
每行4列,但有超过4个帖子.(因此,当需要特定类别的第二行或第三行时),创建用于显示帖子5的折叠功能.
经过一番尝试,我得出的结论是,最好的方法是创建一个for循环,结合过滤,这将创建我正在尝试创建的视图.可悲的是,在尝试了一些不同的方法后,我有点卡住了.代码如下所示:
<div id="items">
<?php
if (have_rows('products_category')) {
while (have_rows('products_category')) : the_row();
// Your loop code
$title = get_sub_field('product_category_name');
$slug = get_sub_field('product_category_slug');
/* Start the filter categpries segment */
$category = get_category_by_slug($slug);
$filter_id = $category->term_id;
$filters = array();
var_dump($filters);
array_push($filters, $filter_id);
var_dump($filters);
array_push($filters, 7);
var_dump($filters);
?>
<div id="items" class="row products margin-0 justify-content-between">
<div class=" <?php echo $filter_id ?> ">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0 padding-b-10">
<h2><?php echo $title ?></h2>
</div>
<div class="col-lg-12 padding-0">
<div id="products" class="row products margin-0 justify-content-between">
<?php $argsNew = array(
'offset' => 0,
'category' => $filters,
'orderby' => 'date',
'order' => 'DESC',
'include' => '',
'exclude' => '',
'meta_key' => '',
'meta_value' => '',
'post_type' => 'post',
'post_mime_type' => '',
'post_parent' => '',
'author' => '',
'author_name' => '',
'post_status' => 'publish',
'posts_per_page' => -1,
'suppress_filters' => false,
'connected_items' => get_queried_object(),
);
$posts_array = get_posts($argsNew);
$number_posts = count($posts_array);
echo $number_posts;
$i = 0;
foreach ($posts_array as $post) : setup_postdata($post);
$i++;
if($i <= 4) {
?>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
<?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
<?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="%s" rel="bookmark">', esc_url(get_permalink())),
'</a></h2>'); ?>
<?php
?>
</div>
<?php
}
else if($i > 4) {
?>
</div>
<div class="row">
<button data-toggle="collapse" class="btn-collapse" data-target="#products_collapse_<?php echo $filter_id ?>">Show more</button>
</div>
<div id="products_collapse_<?php echo $filter_id ?>" class="row products collapse margin-0 justify-content-between">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
<?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
<?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="%s" rel="bookmark">', esc_url(get_permalink())),
'</a></h2>'); ?>
</div>
</div>
<?php
}
endforeach;
wp_reset_postdata(); ?>
</div>
</div>
</div>
<?php
endwhile;
}
else {
// no rows found
echo "nothing found!";
}
?>
</div>
UPDATE
我尝试使用$number_posts和count方法创建for循环但遗憾的是视图严重损坏.所以我的问题是:
- 创建一个for循环/计数器来计算显示的foreach类别的帖子数.
- 指定这些结果的视图:
for - > 1,2,3,4项.将它们排成一排.(1 1 1 1).如果(超过4项).放置项目> 5(依此类推).在崩溃块下.
例如
3项:
Normal view:
1 1 1.
7项:
视图+崩溃(
1 1 1 1
-collapse button-
1 1 1
(more items)
)
任何人都可以向我展示正确的方向,还是帮助我解决这个问题？提前致谢!
PS:如果您有任何疑问,请在下面的评论中询问
假设该字段products_category返回所选类别 ID 的数组：
这将起作用：
<div id="items">
<?php
// Retrieve all product categories
$terms = get_terms( 'product_cat' );
// Retrieve chosen categories to display
$specified_cats = get_field( "products_category" );
// Loop though product cats
foreach ( $terms as $term ) {
$filter_id = $term->term_id;
// If the current product category id is not in the array 'specified_cats' just to the next iteration
if(!in_array($filter_id, $specified_cats)){
continue;
}
$title = $term->name;
$slug = $term->slug;
?>
<div id="items" class="row products margin-0 justify-content-between">
<div class=" <?php echo $filter_id ?> ">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0 padding-b-10">
<h2><?php echo $title ?></h2>
</div>
<div class="col-lg-12 padding-0">
<div id="products" class="row products margin-0 justify-content-between">
<?php
$argsNew = array (
'offset' => 0,
'orderby' => 'date',
'order' => 'DESC',
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => -1,
'product_cat'=> $term->name
);
$posts_array = get_posts($argsNew);
$number_posts = count($posts_array);
$i = 0;
foreach ($posts_array as $post) : setup_postdata($post);
$i++;
if($i <= 4) {
?>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
<?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
<?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="%s" rel="bookmark">', esc_url(get_permalink())),
'</a></h2>'); ?>
<?php
?>
</div>
<?php
}else if($i > 4) {
?>
<div class="row">
<button data-toggle="collapse" class="btn-collapse" data-target="#products_collapse_<?php echo $filter_id ?>">Show more</button>
</div>
<div id="products_collapse_<?php echo $filter_id ?>" class="row products collapse margin-0 justify-content-between">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 margin-fix padding-s-15 padding-b-30 image_filter">
<?php echo get_the_post_thumbnail($post->ID, '', array('class' => 'img-responsive big_image products_image img_small')); ?>
<?php the_title(sprintf('<h2 class="text-center big_image_product_text products_text"><a href="%s" rel="bookmark">', esc_url(get_permalink())),
'</a></h2>'); ?>
</div>
</div>
<?php
}
endforeach;
wp_reset_postdata(); ?>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php
}
?>
</div>
该代码已经过测试并且可以工作。我什至添加了 Bootstrap 以确保一切正常运行：
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>