如何显示组字段元数据 + 容器 div(如果存在)并在字段为空时显示默认文本? [CMB2]

How to display Group Field metadata + Container div if it exists and display default text if fields are empty? [CMB2]

我不是程序员,所以我对解决方案一无所知。 我一直在使用 CMB2 对于 Portfolio/Project 自定义 post 类型。

我合并了一个幻灯片,每张幻灯片都使用组字段元数据。

主页上有 2 个 post 标记为 "Empty Project" 和 "Test Project 1"。 如果单击“空项目”,您将被定向到它的单个 post 页面,在那里您将看到一个带有红色背景的“.flexslider”div。如果组字段为空,那是我想删除的 div。我的意思是完成删除 div 不留空 div 而不是将背景颜色更改为白色。

如果您单击 "Test Project 1",将在 "flexslider" 幻灯片中使用可重复组字段上传图像。那是元字段的结果,元字段在其中保存了元数据。

METABOX// 这是我用来注册可重复字段的代码,它允许我为幻灯片插入图像和标题。

add_action( 'cmb2_admin_init', 'gallery_metabox' );
function gallery_metabox() {
$prefix = 'gallery_';

/**
 * Repeatable Field Groups
 */
$cmb_group = new_cmb2_box( array(
    'id'           => $prefix . 'metabox',
    'title'        => __( 'Gallery', 'cmb2' ),
    'object_types' => array( 'portfolio', ),
) );

// $group_field_id is the field id string, so in this case: $prefix . 'demo'
$group_field_id = $cmb_group->add_field( array(
    'id'          => $prefix . 'demo',
    'type'        => 'group',
    'options'     => array(
    'group_title'   => __( 'Image {#}', 'cmb2' ), // {#} gets replaced by row number
        'add_button'    => __( 'Add Another Image', 'cmb2' ),
        'remove_button' => __( 'Remove Image', 'cmb2' ),
        'sortable'      => true, // beta
        'closed'     => true, // true to have the groups closed by default
    ),
) );


$cmb_group->add_group_field( $group_field_id, array(
    'name' => __( 'Image', 'cmb2' ),
    'id'   => 'image',
    'type' => 'file',
) );

$cmb_group->add_group_field( $group_field_id, array(
    'name' => __( 'Image Caption', 'cmb2' ),
    'id'   => 'image_caption',
    'type' => 'text',
) );

 }

我按照 来显示这些组字段的元数据。 当我使用这段代码时一切正常:

FRONT-END//

<div class="flexslider">
  <ul class="slides">

            <?php $entries = get_post_meta( get_the_ID(), 'gallery_demo', true );


                foreach ( (array) $entries as $key => $entry ) {

                    $img = $img_url = $caption = '';
                if ( isset( $entry['image_id'] ) ) {
                    $img = wp_get_attachment_image( $entry['image_id'], 'share-pick', null, array(
                        'class' => 'thumb',
                    ) );
                }
                    if ( isset( $entry['image_id'] ) ) {
                    $img_url = wp_get_attachment_image_url( $entry['image_id'], null );
                }
                $caption = isset( $entry['image_caption'] ) ? wpautop( $entry['image_caption'] ) : '';
                    echo '<li data-thumb="'. $img_url .'">';
                    echo $img;
                    echo $caption;
                    echo '</li>';


            } ?>
  </ul>
  </div>

但我非常想仅在数据存在时显示 .flexslider 容器 + 元数据。如果字段为空,那么我想显示默认文本或者更好的是删除整个 div 本身。 我尽力进行研究,但我似乎无法弄清楚哪里出了问题。

我也试过这段代码:

尝试//

<?php $entries = get_post_meta( get_the_ID(), 'gallery_demo', true );
if(empty ($entry)) { echo ''; }
else {
   foreach ( (array) $entries as $key => $entry ) {
     echo '<div class="flexslider">';
     echo '<ul class="slides">';
   $img = $img_url = $caption = '';

   if ( isset( $entry['image_id'] ) ) {
     $img = wp_get_attachment_image( $entry['image_id'], 'share-pick', null, array(
'class' => 'thumb',
   ) );
}

if ( isset( $entry['image_id'] ) ) {
    $img_url = wp_get_attachment_image_url( $entry['image_id'], null );
}

$caption = isset( $entry['image_caption'] ) ? wpautop( $entry['image_caption'] ) : '';
    echo '<li data-thumb="'. $img_url .'">';
    echo $img;
    echo $caption;
    echo '</li>';
    echo '</ul>';
    echo '</div>';      
    }   
  }
 ?>

上面代码唯一的好处是当元字段为空时它确实删除了 div 但如果元数据确实存在 div 仍然存在。

编辑// 我尝试在下面的答案中使用“@stweb”代码:

$entries = get_post_meta( get_the_ID(), 'gallery_demo', true );

foreach ( (array) $entries as $key => $entry ) {
   if(empty($entry)){
      continue;
   }
   echo '<div class="flexslider">';
   echo '<ul class="slides">';
   $img = $img_url = $caption = '';

   if ( isset( $entry['image_id'] ) ) {
     $img = wp_get_attachment_image( $entry['image_id'], 'share-pick',   
   null, array(    'class' => 'thumb', ) );
   }

   if ( isset( $entry['image_id'] ) ) {
     $img_url = wp_get_attachment_image_url( $entry['image_id'], null );
   }

   $caption = isset( $entry['image_caption'] ) ? wpautop(    
   $entry['image_caption'] ) : '';
   echo '<li data-thumb="'. $img_url .'">';
   echo $img;
   echo $caption;
   echo '</li>';
   echo '</ul>';
   echo '</div>';      
} 

但什么也没有发生...红色 div 只是停在那里而不是消失。

我基本上想弄清楚如何仅在图像上传到 Group Field 时才显示第一段代码,如果没有,则什么都不显示,甚至连容器也不显示 div.

谁能解释一下我哪里出错了?

试试这个:

$entries = get_post_meta( get_the_ID(), 'gallery_demo', true );

foreach ( (array) $entries as $key => $entry ) {
   if(empty($entry)){
      continue;
   }
   echo '<div class="flexslider">';
   echo '<ul class="slides">';
   $img = $img_url = $caption = '';

   if ( isset( $entry['image_id'] ) ) {
     $img = wp_get_attachment_image( $entry['image_id'], 'share-pick',   
   null, array(    'class' => 'thumb', ) );
   }

   if ( isset( $entry['image_id'] ) ) {
     $img_url = wp_get_attachment_image_url( $entry['image_id'], null );
   }

   $caption = isset( $entry['image_caption'] ) ? wpautop(    
   $entry['image_caption'] ) : '';
   echo '<li data-thumb="'. $img_url .'">';
   echo $img;
   echo $caption;
   echo '</li>';
   echo '</ul>';
   echo '</div>';      
} 

更新:

foreach ( (array) $entries as $key => $entry ) {
    if ( !isset( $entry['image_id'] )  ||  $entry['image_id']  == ''  ) {
        continue;
    }
    echo '<div class="flexslider">';
    echo '<ul class="slides">';
    $img = $img_url = $caption = '';

    if ( isset( $entry['image_id'] ) ) {
       $img = wp_get_attachment_image( $entry['image_id'], 'share-pick', 
       null, array(    'class' => 'thumb', ) );
    } 

    if ( isset( $entry['image_id'] ) ) {
       $img_url = wp_get_attachment_image_url( $entry['image_id'], null );
    }

    $caption = isset( $entry['image_caption'] ) ? wpautop(         
    $entry['image_caption'] ) : '';
    echo '<li data-thumb="'. $img_url .'">';
    echo $img;
    echo $caption;
    echo '</li>';
    echo '</ul>';
    echo '</div>';      
}