Woocommerce AFC图像仅在图像不为空时显示

Question

嗨，有这个代码来显示商店页面上类别的多个图像，我遇到的问题是，如果AFC图像只有一个，它仍然显示一个空点，而不仅仅是一个图像。我该如何修复它，以便如果没有图像只显示那里的图像?

add_action('woocommerce_before_subcategory_title', 'wpse_add_custom_text_under_category_title', 10);
function wpse_add_custom_text_under_category_title($category) {
$term_id = 'product_cat_'.$category->term_id;
$size = "shop_catalog";
$cat_img_1 = '<img src="'.get_field('category_image_1', $term_id).'"/>';
$cat_img_2 = '<img src="'.get_field('category_image_2', $term_id).'"/>';
$cat_img_3 = '<img src="'.get_field('category_image_3', $term_id).'"/>';
if (!empty($cat_img_1)&&empty($cat_img_2)&&empty($cat_img_3)) {
echo'<ol class="carousel__viewport">';
echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_1.'<div class="carousel__snapper"></div></li>';
echo'</ol>';
}elseif (!empty($cat_img_1)&&!empty($cat_img_2)&&empty($cat_img_3)) {
echo'<ol class="carousel__viewport">';
echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_1.'<div class="carousel__snapper"></div></li>';
echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_2.'<div class="carousel__snapper"></div></li>';
echo'</ol>';
}elseif (!empty($cat_img_1)&&!empty($cat_img_2)&&!empty($cat_img_3)) {
echo'<ol class="carousel__viewport">';
echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_1.'<div class="carousel__snapper"></div></li>';
echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_2.'<div class="carousel__snapper"></div></li>';
echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_3.'<div class="carousel__snapper"></div></li>';
echo'</ol>';
}

Answer 1

正如我在评论中指出的那样，使您的图像成为array()

add_action('woocommerce_before_subcategory_title', 'wpse_add_custom_text_under_category_title', 10);
function wpse_add_custom_text_under_category_title($category) {
$term_id = 'product_cat_'.$category->term_id;
$slides = array();
if(get_field('category_image_1', $term_id)):
$slides[] .= '<img src="'.get_field('category_image_1', $term_id).'"/>';
endif;
if(get_field('category_image_2', $term_id)):
$slides[] .= '<img src="'.get_field('category_image_2', $term_id).'"/>';
endif;
if(get_field('category_image_3', $term_id)):
$slides[] .= '<img src="'.get_field('category_image_3', $term_id).'"/>';
endif;
if($slides):
echo '<ol class="carousel__viewport">';
foreach($slides as $slide) {
echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$slide.'</li>';
}
echo '</ol>';
endif;
}

Answer 2

如果你不想对你的代码做大的改变，试试这个

add_action('woocommerce_before_subcategory_title', 'wpse_add_custom_text_under_category_title', 10);
function wpse_add_custom_text_under_category_title($category) {
$term_id = 'product_cat_'.$category->term_id;
$size = "shop_catalog";

if( get_field('category_image_1', $term_id) ) {
$cat_img_1 = '<img src="'.get_field('category_image_1', $term_id).'"/>';
}

if( get_field('category_image_2', $term_id) ) {
$cat_img_2 = '<img src="'.get_field('category_image_2', $term_id).'"/>';
}

if( get_field('category_image_3', $term_id) ) {
$cat_img_3 = '<img src="'.get_field('category_image_3', $term_id).'"/>';
}

if (!empty($cat_img_1)&&empty($cat_img_2)&&empty($cat_img_3)) {
echo'<ol class="carousel__viewport">';
echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_1.'<div class="carousel__snapper"></div></li>';
echo'</ol>';
}elseif (!empty($cat_img_1)&&!empty($cat_img_2)&&empty($cat_img_3)) {
echo'<ol class="carousel__viewport">';
echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_1.'<div class="carousel__snapper"></div></li>';
echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_2.'<div class="carousel__snapper"></div></li>';
echo'</ol>';
}elseif (!empty($cat_img_1)&&!empty($cat_img_2)&&!empty($cat_img_3)) {
echo'<ol class="carousel__viewport">';
echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_1.'<div class="carousel__snapper"></div></li>';
echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_2.'<div class="carousel__snapper"></div></li>';
echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$cat_img_3.'<div class="carousel__snapper"></div></li>';
echo'</ol>';
}
}

这里是一个更优化的版本，我将所有的图片添加到数组中，然后通过循环来显示图片。

add_action('woocommerce_before_subcategory_title', 'wpse_add_custom_text_under_category_title', 10);
function wpse_add_custom_text_under_category_title($category) {
$term_id = 'product_cat_'.$category->term_id;
$size = "shop_catalog";

$images_array = array();
$images_array[] = get_field('category_image_1', $term_id);
$images_array[] = get_field('category_image_2', $term_id);
$images_array[] = get_field('category_image_3', $term_id);

$result_images_array = array_filter($array);  


if(empty($result_images_array)) {

echo'<ol class="carousel__viewport">';


foreach($result_images_array as $image_src) {

echo '<li id="carousel__slide" tabindex="0" class="carousel__slide">'.$image_src.'<div class="carousel__snapper"></div></li>';

}


echo'</ol>';

}   

}