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

25 авг. 2014 г., 23:31:00
Просмотры: 32.6K
Голосов: 4

Я хотел бы создать простой плагин для добавления нескольких изображений к пользовательскому типу записи. У меня есть плагин для добавления одного изображения к пользовательскому типу записи, но я не могу понять, как добавить несколько. пример интерфейса загрузки изображений вот где я остановился.

js файл-

jQuery(document).ready(function($) {

    // добавить функциональность загрузчика изображений
    var meta_image_frame;

    $('.meta-image-button').live('click', function(e){
        e.preventDefault();

        if( meta_image_frame ){
            wp.media.editor.open();
            return;
        }

        meta_image_frame = wp.media.frames.file_frame = wp.media({
            title: 'Окно выбора изображений для портфолио',
            button: {text: 'Добавить в галерею'},
            library: { type: 'image'},
            multiple: false
        });

        meta_image_frame.on('select', function(){
            var media_attachment = meta_image_frame.state().get('selection').first().toJSON();

            var url = '';

            $('#meta-image').val(media_attachment.url);
        });

        meta_image_frame.open();
    });

    $('#add-input').click(function(event){
        add_input()
    }); 

    function add_input(){
        var input = "<p><label for='meta-image' class=''>Добавить изображение проекта</label>"
                    +"<input type='text' name='meta-image' id='meta-image' value='' />"
                    +"<input type='button' class='meta-image-button button' value='Загрузить изображение' />"
                    +"<input type='button' class='meta-image-button button remove-button' value='Удалить изображение' /></p>";

        $('#images-container').append(input);
    }

}); //конец основной jquery функции

это мой php файл-

<?php

/*----------------------------------------------------------
                       Создание типа записи
------------------------------------------------------------*/

function portfolio_create_post_type(){
    $labels = array(
            'name' => __('Портфолио', 'portfolio'),
            'singular_name' => __('Проект', 'portfolio'),
            'add_new' => __('Новый проект', 'portfolio'),
            'add_new_item' => __('Добавить новый проект', 'portfolio'),
            'edit_item' => __('Редактировать проект', 'portfolio'),
            'new_item' => __('Новый проект', 'portfolio'),
            'view_item' => __('Просмотреть проект', 'portfolio'),
            'search_item' => __('Искать проект', 'portfolio'),
            'not_found' => __('Проекты не найдены', 'portfolio'),
            'not_found_in_trash' => __('В корзине проекты не найдены', 'portfolio')
        );
    $args = array(
            'labels' => $labels,
            'public' => true,
            'supports' => array(
                    'title',
                    'thumbnail',
                    'editor',
                ),
            'taxonomies' => array('post_tag', 'category')
        );
    register_post_type('Portfolio', $args);
}

add_action('init', 'portfolio_create_post_type' );


/*----------------------------------------------------------
                       Создание Мета бокса
------------------------------------------------------------*/


function portfolio_meta_box(){
    add_meta_box( 'portfolio_gallery', 'Галерея проекта', 'project_meta_box_cb','Portfolio', 'normal', 'high' );
}//portfolio_meta_box

add_action( 'add_meta_boxes', 'portfolio_meta_box' );

/*----------------------------------------------------------
                  Поля Мета бокса
------------------------------------------------------------*/

function project_meta_box_cb(){
                wp_nonce_field( basename( __FILE__ ), 'prfx_nonce' );
                $prfx_stored_meta = get_post_meta( $post->ID );

                ?>
                <div class="wrap">
                <input type="button" id="add-input" value="Добавить изображение">

                <div id="images-container">


                </div><!-- конец контейнера изображений -->
                </div>
                <?php
            }

/*----------------------------------------------------------
                  Сохранение данных
------------------------------------------------------------*/
function project_meta_save( $post_id ) {

        // Проверка статуса сохранения
        $is_autosave = wp_is_post_autosave( $post_id );
        $is_revision = wp_is_post_revision( $post_id );
        $is_valid_nonce = ( isset( $_POST[ 'prfx_nonce' ] ) && wp_verify_nonce( $_POST[ 'prfx_nonce' ], basename( __FILE__ ) ) ) ? 'true' : 'false';

        // Прерывание скрипта в зависимости от статуса сохранения
        if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
            return;
        }

        // Проверка ввода и санитизация/сохранение при необходимости
       if( isset( $_POST[ 'meta-image' ] ) ) {
        update_post_meta( $post_id, 'meta-image', $_POST[ 'meta-image' ] );
    }
}

add_action( 'save_post', 'project_meta_save' );

/*----------------------------------------------------------
                  Загрузка Javascript файла
------------------------------------------------------------*/
function project_image_enqueue() {
    global $typenow;
    if( $typenow == 'portfolio' ) {
        wp_enqueue_media();

        // Регистрация и подключение необходимого javascript
        wp_register_script( 'meta-box-image', plugin_dir_url( __FILE__ ) . 'meta-box-image.js', array( 'jquery' ) );
        wp_localize_script( 'meta-box-image', 'meta_image');
        wp_enqueue_script( 'meta-box-image' );
    }
}
add_action( 'admin_enqueue_scripts', 'project_image_enqueue' );

?>
3
Комментарии

Чтобы получить качественный ответ и избежать закрытия вашего вопроса, пожалуйста, уточните детали. Приложите скриншот того, что вы хотите получить, добавьте код, который вы уже использовали (или который не работает), и конкретнее опишите функционал работы с изображениями, который вы пытаетесь реализовать. Сейчас неясно, идет ли речь о кастомном метабоксе, featured image, изображении в записи или о чем-то другом.

mrwweb mrwweb
25 авг. 2014 г. 23:43:59

Я добавил свой текущий прогресс - создал кастомный метабокс, который появляется под моим кастомным типом записи.

Justin Justin
26 авг. 2014 г. 01:22:36

Было бы неплохо увидеть чистый PHP-ответ вместо: "Используйте этот плагин".

Sjeiti Sjeiti
10 мар. 2020 г. 17:40:22
Все ответы на вопрос 2
0

Это может быть альтернативой для вас. Плагин Advanced Custom Fields имеет поле типа "Image", которое позволяет загружать и выбирать изображения. Вы можете настроить отображение этого поля на страницах вашего пользовательского типа записей (Custom Post Type) и добавить строку кода в файл шаблона. Вы можете создать столько полей для изображений, сколько вам потребуется. Узнайте больше о поле Image здесь.

26 авг. 2014 г. 01:58:38
0

Вы можете использовать плагин Meta Box, который поддерживает различные поля для изображений (вы можете выбирать из медиатеки или загружать изображения, прямо как при вставке изображений в редактор постов). Вы можете выбрать одно из следующих полей:

  • image_advanced — поле, которое работает аналогично кнопке Добавить медиафайл в WordPress
  • file_input — позволяет выбрать существующее изображение или использовать внешний URL для изображения
  • plupload_image — отображает область для перетаскивания файлов (drag and drop)

Кроме того, этот плагин позволяет клонировать поля, если нужно, что упрощает создание галереи.

Вы можете интегрировать плагин с любым пользовательским типом записи и создать столько полей, сколько потребуется. Вот список поддерживаемых полей.

7 дек. 2015 г. 03:20:30