动态创建 Wordpress Metabox

Question

我已经搜索了几天，但没有找到有关如何允许管理员用户通过单击按钮来复制自定义帖子类型的元框的信息。

    add_meta_box(  
    'Presentation', // $id  
    'Presentation', // $title   
    'show_custom_presentation_meta_box', // $callback  
    'presentations', // $page  
    'normal', // $context  
    'high', // $priority
     $custom_presenter_meta_fields); // $callback_args  

看到 add_meta_box 函数在 add_meta_boxes 操作中被调用，我不确定是否可以存储任何变量，以允许在用户保存带有其他元框的帖子后循环添加正确数量的元框。

我已经实现了动态字段，当用户单击按钮时，会添加一个额外的文本字段并在更新帖子时保存。

我不想复制元框内的字段。单击 + 时，我希望创建整个元框的副本。

我们将不胜感激。谢谢！

Answer 1

我发现创建动态元框的第一步是创建您希望在按钮单击时复制的附加元框。

在单独的元框中，我们需要一个包含所需动态元框计数的字段。 *请注意，此字段可以隐藏或可见。

global $presenter_count;

add_meta_box(  
    'Meetings', // $id  
    'Meetings Info', // $title   
    'show_custom_meetings_meta_box', // $callback  
    'meetings', // $page  
    'normal', // $context  
    'high', // $priority
     $custom_meetings_meta_fields); // $callback_args          

$c = 0;
$count = get_post_meta($post_id, 'meetings_presenter_count', true);

while ( $c < $count) {

    $presenter_count = 0;

    add_meta_box(  
        'Presentation'.$c, // $id  
        'Presentation '.++$c, // $title   
        'show_custom_meetings_meta_box', // $callback  
        'meetings', // $page  
        'normal', // $context  
        'low', // $priority
         $custom_meetings_presenter_meta_fields); // $callback_args  
}

在构建字段的回调函数中，我们要确保调用的是我们设置的全局变量 $presenter_count。

每次执行 while 循环时，根据来自演示文稿数量字段的 meta_value，演示者计数会增加，这将为我们的字段设置正确的数组。

// Callback args for metabox
$custom_meetings_presenter_meta_fields = array(  
        array(  
            'label' => 'Presenter\'s Name',
            'desc'  => 'The presenter\'s prefix and name',
            'id'    => $prefix.'name',
            'type'  => 'presenter_name'
        ));

// Callback function
    function show_custom_meetings_meta_box($post, $custom_meetings_field) {  
global $custom_meetings_meta_fields, $custom_meetings_presenter_meta_fields, $post, $presenter_count;
// Use nonce for verification 

echo '<input type="hidden" name="custom_meta_box_nonce" value="'.wp_create_nonce(basename(__FILE__)).'" />'; 
    // Begin the field table and loop 
    echo '<table class="form-table">';  
    foreach ($custom_meetings_field['args'] as $field) {  
        // get value of this field if it exists for this post  
        $meta = get_post_meta($post->ID, $field['id'], true);  
        // begin a table row with  
        echo '<tr> 
                <th><label for="'.$field['id'].'">'.$field['label'].'</label></th> 
                <td>';  
                switch($field['type']) {  
                    // Presenter Name
                    case 'presenter_name':  

                        $c = $presenter_count;

                        echo '<input type="text" name="'.$field['id'].'['.$c.']" id="'.$field['id'].'-'.$c.'" value="'.$meta[$c].'" size="30" /> 
                            <br /><span class="description">'.$field['desc'].'</span>';  

                    break; 
                } //end switch  
        echo '</td></tr>';  

        }

    } // end foreach  
    echo '</table>'; // end table  
}  

我们还需要为用户设置一个按钮以在命令上添加元框。

按钮背后的代码：

jQuery('.add-presentation').on('click', function(){
    var c  = jQuery('#meetings_presenter_count').val(); // get presenter count
    var pc = 0;
    if ( c != '' ) {
        pc = c + 1;
        // write a condition that allows for one presenter to exist
        jQuery('#Presentation'+pc).after('Insert Metabox');
        jQuery('#meetings_presenter_count').val(pc); // Increment presenter count
    }else{ // If no presenter box exists make count = 1
        jQuery('#meetings_presenter_count').val('1');
        jQuery('#Meetings').after('Insert Metabox');
    }

});

Answer 2

这里无法给出完整的答案，但可以指点一下。

要复制元框，您需要添加 javascript。

1. 在所有输入字段中，确保 name="" 字段的前缀类似于 name="1_text" name="1_firstname"
2. 使用 jquery 选择第一个元框。
3. 复制它。使用 +1 name="2_text" name="2_firstname" 更改名称属性 在您的示例中还增加了盒子的 ID 'Presentation', // $id
4. 保存时检测这些不同的名称并根据需要保存它们。
5. 在加载编辑页面时检测框的数量并使用正确的数字 foreach add_meta_box

编辑。第 1 点也可以用数组表示法来完成：

<input type="text" name="text[1]" />
<input type="text" name="firstname[1]" />

保存时更容易。加载时可能更容易填充。