web-dev-qa-db-fra.com

Comment ajouter plusieurs images à un type de message personnalisé?

Je voudrais créer un plugin simple pour ajouter plusieurs images à un type de message personnalisé. J'ai créé un plugin pour ajouter une seule image à un type d'article personnalisé, mais je ne parviens pas à comprendre comment en ajouter plusieurs. enter image description here c'est là où je suis.

fichier js-

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

    // add image uploader functionality
        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: 'Portfolio Image Gallery Selection Window',
                button: {text: 'Add to Gallery'},
                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=''>Add Project Image</label>"
                              +"<input type='text' name='meta-image' id='meta-image' value='' />"
                              +"<input type='button' class='meta-image-button button' value='Upload Image' />"
                              +"<input type='button' class='meta-image-button button remove-button' value='Remove Image' /></p>";

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

        }

}); //end main jquery function

c'est mon fichier php-

    <?php

/*----------------------------------------------------------
                       Create Post Type
------------------------------------------------------------*/

function portfolio_create_post_type(){
    $labels = array(
            'name' => __('Portfolio', 'portfolio'),
            'singular_name' => __('Project', 'portfolio'),
            'add_new' => __('New project', 'portfolio'),
            'add_new_item' => __('Add new project', 'portfolio'),
            'edit_item' => __('Edit project', 'portfolio'),
            'new_item' => __('New project', 'portfolio'),
            'view_item' => __('View project', 'portfolio'),
            'search_item' => __('Search project', 'portfolio'),
            'not_found' => __('No products Found', 'portfolio'),
            'not_found_in_trash' => __('No products 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' );


/*----------------------------------------------------------
                       Create Meta Box
------------------------------------------------------------*/


function portfolio_meta_box(){
    add_meta_box( 'portfolio_gallery', 'Project Gallery', 'project_meta_box_cb','Portfolio', 'normal', 'high' );
}//portfolio_meta_box

add_action( 'add_meta_boxes', 'portfolio_meta_box' );

/*----------------------------------------------------------
                  Meta Box Fields
------------------------------------------------------------*/

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="Add Image">

                <div id="images-container">


                </div><!-- end images container -->
                </div>
                <?php
            }

/*----------------------------------------------------------
                  Save the Data
------------------------------------------------------------*/
function project_meta_save( $post_id ) {

        // Checks save status
        $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';

        // Exits script depending on save status
        if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
            return;
        }

        // Checks for input and sanitizes/saves if needed
       if( isset( $_POST[ 'meta-image' ] ) ) {
        update_post_meta( $post_id, 'meta-image', $_POST[ 'meta-image' ] );

    }
}

add_action( 'save_post', 'project_meta_save' );

/*----------------------------------------------------------
                  Load Javascript File
------------------------------------------------------------*/
function project_image_enqueue() {
    global $typenow;
    if( $typenow == 'portfolio' ) {
        wp_enqueue_media();

        // Registers and enqueues the required 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' );

?>
custom-post-typesplugin-developmentmetabox
2
Justin

Cela peut être une alternative pour vous. Le Champs personnalisés avancés plug in a un champ d'image qui permet aux images d'être téléchargées et sélectionnées. Vous pouvez définir le champ à afficher sur vos pages de type de publication personnalisée et intégrer également une ligne de code dans votre fichier de modèle. Vous pouvez créer autant de champs d'image que nécessaire. En savoir plus sur le champ d'image ici.

3
streetfire

Vous pouvez utiliser le plugin Meta Box , qui prend en charge divers champs d’image (vous pouvez choisir dans la médiathèque ou télécharger une image, comme pour insérer des images dans l’éditeur de publication. Vous pouvez choisir:

  • Champ image_advanced qui agit comme le bouton Ajouter un média de WordPress
  • file_input qui vous permet de sélectionner une image existante ou d'utiliser une URL externe _ pour l'image
  • plupload_image qui montre un espace réservé pour glisser et déposer des fichiers

En outre, ce plugin vous permet de cloner les champs si vous le souhaitez, pour que vous puissiez construire la galerie plus facilement.

Vous pouvez intégrer le plugin à n’importe quel type de message personnalisé et créer autant de champs que vous le souhaitez. Voici la liste des champs supportés .

0
Anh Tran