Как на wordpress создать метабокс с возможностью варьировать количество полей?

Question

[Антон Голубков]

Добрый день/вечер/ночь/утро!
Возникла необходимость создать метабоксс несколькими полями и кнопкой сохранить, работающей по тому же принципу, что и в стандартном метабоксе (при нажатии сохраняется старое поле, добавляется новое). Нужно сделать тоже самое с метабоксом.
В метабоксе подключен загрузчик изображений.
Соответственно заполняем один мета-бокс, нажимаем кнопку, он сохраняется, создается новый.
Подозреваю, что нужно клонировать с помощью JS...

add_action('add_meta_boxes', 'pomet', 1);
    function pomet(){
        add_meta_box('pomet_person', 'Описание животного', 'pomet_box', 'post', 'normal', 'high');
    }
    function pomet_box($post){
        ?>
        <div style="display: inline-block;">
            <p><label><input type="date" name="pomet[birth]" value="<? get_post_meta($post->ID,'birth', 1);?>">Дата рождения</label></p>
            <p><label><input type="text" name="pomet[color-code]" value="<? get_post_meta($post->ID,'color-code', 1);?>">Код окраса</label></p>
            <p><label><input type="text" name="pomet[color-desc]" value="<? get_post_meta($post->ID,'color-desc', 1);?>">Окрас</label></p>
            <input type="hidden" name="pomet_nonce" value="<?php echo wp_create_nonce(__FILE__); ?>" />
            <? image_uploader_meta('pomet[photo]', get_post_meta($post->ID,'photo', 1)); ?>
        </div>
        <?
    }
    add_action('save_post','pomet_update', 0);
    function pomet_update($post_id){
        if ( !isset($_POST['pomet_nonce']) || !wp_verify_nonce($_POST['pomet_nonce'], __FILE__) ) return false;
        if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE  ) return $post_id;
        if ( !current_user_can('edit_post', $post_id) ) return $post_id;
        if( !isset($_POST['pomet']) ) return false;
        $_POST['pomet'] = array_map('trim', $_POST['pomet']);

        foreach( $_POST['pomet'] as $key=>$value ){
    //        if( empty($value) ){
    //            delete_post_meta($post_id, $key);
    //            continue;
    //        }

            update_post_meta($post_id, $key, $value);
        }
        return $post_id;
    }
//Поля с загрузкой для записи

function image_uploader_meta( $name, $value = "", $w = 115, $h = 90) {
    $default = get_stylesheet_directory_uri() . '/img/logo.png';
    if( $value ) {
        $image_attributes = wp_get_attachment_image_src( $value, array($w, $h) );
        $src = $image_attributes[0];
    } else {
        $src = $default;
    }
    echo '
        <img data-src="' . $default . '" src="' . $value . '" width="' . $w . 'px" height="' . $h . 'px" />
        <div>
            <input type="hidden" name="' . $name . '" id="' . $name . '" value="' . $src . '" />
            <button type="submit" class="upload_image_button button">Загрузить</button>
            <button type="submit" class="remove_image_button button">&times;</button>
        </div>
    ';
}

И небольшой кусок JS:

jQuery(function($){
    $('.upload_image_button').click(function(){
        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = $(this);
        wp.media.editor.send.attachment = function(props, attachment) {
            $(button).parent().prev().attr('src', attachment.url);
            $(button).prev().val(attachment.url);
            wp.media.editor.send.attachment = send_attachment_bkp.url;
        }
        wp.media.editor.open(button);
        return false;
    });
    $('.remove_image_button').click(function(){
        var r = confirm("Уверены?");
        if (r == true) {
            var src = $(this).parent().prev().attr('data-src');
            $(this).parent().prev().attr('src', src);
            $(this).prev().prev().val('');
        }
        return false;
    });
});

Comments

[zorca]

Зачем писать велосипеды, если есть плагины и компоненты для создания кастомных полей?

[Антон Голубков]

Скорее просьба человека. Нужно чтоб было максимально просто добавить информацию о котятах)))))