我目前正在开发自定义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>
更新
我尝试使用$number_posts
和count方法创建for循环但遗憾的是视图严重损坏。所以我的问题是:
for - &gt;项目1,2,3,4。将它们排成一排。 (1 1 1 1)。 如果(超过4项)。放置物品&gt; 5(依此类推)。在崩溃的情况下。
e.g。
3项:
Normal view:
1 1 1.
7项:
查看+崩溃(
1 1 1 1
-collapse button-
1 1 1
(more items)
)
有人能告诉我正确的方向,还是帮助我解决这个问题? 提前谢谢!
PS:如果您有任何疑问,请在下面的评论中询问他们
答案 0 :(得分:2)
假设字段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>