需要帮助来完成此操作。我想为循环中的第一个项目添加不同的样式。
我试图使用https://i.stack.imgur.com/8SU5A.png和How to determine the first and last iteration in a foreach loop?不知何故它没有被淘汰。上面的两个块似乎也分享了应用代码的速度问题
查看代码中的注释以更好地理解我的问题。
<?php
$prod_categories = get_terms( 'product_cat', array( 'posts_per_page' => -1, 'orderby' => 'date', 'order' => 'ASC', 'hide_empty' => true ));
foreach( $prod_categories as $prod_cat => $item ) {
$cat_thumb_id = get_woocommerce_term_meta( $prod_cat->term_id, 'thumbnail_id', true );
$shop_catalog_img = wp_get_attachment_image_src( $cat_thumb_id, 'shop_catalog' );
$term_link = get_term_link( $prod_cat, 'product_cat' ); ?>
<!-- if first item echo
<div class="col-md-8 fig-hold">
<a href="<?php echo $term_link; ?>" style="text-decoration: none;">
<div class="figure">
<img src="<?php echo $shop_catalog_img[0]; ?>" class="img-responsive" alt="<?php echo $prod_cat->name; ?>" />
<div class="figureName"><?php echo $prod_cat->name; ?></div>
</div>
</a>
</div>
else -->
<div class="col-md-4 fig-hold">
<a href="<?php echo $term_link; ?>" style="text-decoration: none;">
<div class="figure">
<img src="<?php echo $shop_catalog_img[0]; ?>" class="img-responsive" alt="<?php echo $prod_cat->name; ?>" />
<div class="figureName"><?php echo $prod_cat->name; ?></div>
</div>
</a>
</div>
<?php } wp_reset_query(); ?>
答案 0 :(得分:0)
您可以添加一个计数器,并根据该计数器向第一个元素添加一个类,现在您可以使用CSS
设置该类的样式:
<?php
$prod_categories = get_terms('product_cat', array(
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'ASC',
'hide_empty' => true
));
$count = 0;
$class = '';
foreach ($prod_categories as $prod_cat => $item) {
$count++;
if ($count == 1) {
$class = 'extra_class';
}else{
$class = '';
}
$cat_thumb_id = get_woocommerce_term_meta($prod_cat->term_id, 'thumbnail_id', true);
$shop_catalog_img = wp_get_attachment_image_src($cat_thumb_id, 'shop_catalog');
$term_link = get_term_link($prod_cat, 'product_cat');
?>
<div class="col-md-4 fig-hold <?php echo $class; ?>">
<a href="<?php echo $term_link; ?>" style="text-decoration: none;">
<div class="figure">
<img src="<?php echo $shop_catalog_img[0]; ?>" class="img-responsive" alt="<?php echo $prod_cat->name; ?>" />
<div class="figureName"><?php echo $prod_cat->name; ?></div>
</div>
</a>
</div>
<?php
} wp_reset_query();
?>
答案 1 :(得分:0)
这是我的最终代码。谢谢@ionut
<?php
$prod_categories = get_terms( 'product_cat',
array( 'posts_per_page' => -1, 'orderby' => 'date', 'order' => 'ASC', 'hide_empty' => true ));
foreach( $prod_categories as $prod_cat ) {
$cat_thumb_id = get_woocommerce_term_meta( $prod_cat->term_id, 'thumbnail_id', true );
$shop_catalog_img = wp_get_attachment_image_src( $cat_thumb_id, 'shop_catalog' );
$term_link = get_term_link( $prod_cat, 'product_cat' );
$count++;
if ($count == 1) { $class = 'col-md-8'; } else{ $class = 'col-md-4'; }
?>
<div class="<?php echo $class; ?> fig-hold">
<a href="<?php echo $term_link; ?>" style="text-decoration: none;">
<div class="figure">
<img src="<?php echo $shop_catalog_img[0]; ?>" class="img-responsive" alt="<?php echo $prod_cat->name; ?>" />
<div class="figureName"><?php echo $prod_cat->name; ?></div>
</div>
</a>
</div>
<?php } wp_reset_query(); ?>