如何显示组字段元数据 + 容器 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>';
}
我不是程序员,所以我对解决方案一无所知。 我一直在使用 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>';
}