使用CMB2 Repeater在WordPress页面上显示重复字段

CMB2是一个非常棒的WordPress插件，它为WordPress开发者提供了一个优秀的框架，以便在自定义文章类型和页面中添加自定义meta箱和字段。CMB2 Repeater是CMB2提供的一个重要功能，用于在WordPress页面上添加重复字段。这个功能使得开发者能够轻松地在单个页面上重复的添加任意数量的字段。

使用CMB2 Repeater步骤

下面是使用CMB2 Repeater向WordPress页面添加重复字段的步骤：

1.第一步，需要确保您的WordPress主题中已经安装和启用了CMB2插件；

2.创建一个自定义函数来存储您的字段。此函数将创建一个新的‘cmb2_meta_box’，允许您添加自定义集合来显示重复字段。以下是一个示例：

function my_repeater_fields() { 
    $cmb = new_cmb2_box( array(
        'id'           => 'my_repeater_metabox',
        'title'        => __( 'My Repeating Field Group', 'cmb2' ),
        'object_types' => array( 'page', ), // post type
    ) );

    $group_field_id = $cmb->add_field( array(
        'id'          => 'my_group',
        'type'        => 'group',
        'description' => __( 'Generates reusable form entries', 'cmb2' ),
        'options'     => array(
            'group_title'   => __( 'Entry {#}', 'cmb2' ), // since version 1.1.4, {#} gets replaced by row number
            'add_button'    => __( 'Add Another Entry', 'cmb2' ),
            'remove_button' => __( 'Remove Entry', 'cmb2' ),
            'sortable'      => true, // beta
        ),
    ) );

    $cmb->add_group_field( $group_field_id, array(
        'name'    => 'Entry Title',
        'id'      => 'title',
        'type'    => 'text',
        // 'repeatable' => true, // Repeatable fields are supported w/in repeatable groups (for most types)
    ) );

    $cmb->add_group_field( $group_field_id, array(
        'name' => 'Description',
        'description' => 'Write a short description for this row',
        'id'   => 'description',
        'type' => 'textarea_small',
    ) );

    $cmb->add_group_field( $group_field_id, array(
        'name' => 'Entry Image',
        'id'   => 'image',
        'type' => 'file',
    ) );

    // If you want to use repeatable fields, use this code
    // $cmb->add_group_field( $group_field_id, array(
    //     'name'    => 'Repeating Field',
    //     'id'      => 'repeater',
    //     'type'    => 'text',
    //     'repeatable' => true, // Repeatable fields are supported w/in repeatable groups (for most types)
    // ) );
}

3.在您的页面中包括以下代码：

<?php 
$meta_key = 'my_group'; 
$meta = get_post_meta(get_the_ID(), $meta_key, true); 
?>

<!-- Add row button for repeater and repeater nav anchor -->
<button class="button add-row" data-target="<?php echo esc_attr($meta_key); ?>">Add Row</button>
<ul class="entries-list entries-<?php echo esc_attr($meta_key); ?>">
    <?php if ($meta) : ?>
        <?php foreach ($meta as $entry_id => $entry) : ?>
            <li class="entry" data-entry-id="<?php echo esc_attr($entry_id); ?>">
                <h3 class="entry-title"><?php echo esc_html($entry['title']); ?></h3>
                <div class="entry-image"><img src="<?php echo esc_url($entry['image']); ?>">
                <div class="entry-description"><?php echo wpautop( wp_kses_post( $entry['description'] ) ); ?></div>
                <button class="remove-entry button" data-target="<?php echo esc_attr($entry_id); ?>">Remove Entry</button>
            </li>
        <?php endforeach ?>
    <?php endif ?>
</ul>

<!-- Repeater Template for backbone js -->
<script type="text/template" id="tmpl-entry-content-<?php echo esc_attr($meta_key); ?>">
    
    <li class="entry" data-entry-id="{{data.ID}}">
        <h3 class="entry-title"><?php echo esc_html($entry['title']); ?></h3>
        <div class="entry-image"><img src="<?php echo esc_url($entry['image']); ?>">
        <div class="entry-description"><?php echo wpautop( wp_kses_post( $entry['description'] ) ); ?></div>
        <button class="remove-entry button" data-target="<?php echo esc_attr('__id__'); ?>">Remove Entry</button>
    </li>
                        
</script>

<!-- JavaScript file to handle repeater -->
<script>
jQuery(function($){
    var $wrapper = $('.entries-<?php echo esc_attr($meta_key); ?>');
 
    // Add Repeater
    $('.add-row').on('click', function(ev){
        ev.preventDefault();
        var $template = wp.template('entry-content-<?php echo esc_attr($meta_key); ?>'),
            $newRow   = $($template({ID: '__id__'})),
            $anchor   = $(this);
 
        $wrapper.append($newRow);
        return false;
    });
 
    // Remove Repeater
    $wrapper.on('click', '.remove-post', function(ev){
        ev.preventDefault();
        var $row = $(this).parents('.entry');
 
        $row.remove();
        return false;
    });
});
</script>

4.最后，只需在页面上添加以下代码即可看到CMB2 Repeater在WordPress页面上的效果：

<?php my_repeater_fields(); ?>

结束语

使用CMB2 Repeater，您可以轻松地向WordPress页面添加重复字段，而不需要编写冗长的代码，并且易于管理。如果您是一个WordPress开发者或者您正在寻找解决方案来轻松地向页面添加重复字段，那么CMB2 Repeater是您不应该错过的功能。