it-swarm.com.de

Wie füge ich dem benutzerdefinierten Beitragstyp mehrere Bilder hinzu?

Ich möchte ein einfaches Plugin erstellen, um einem benutzerdefinierten Beitragstyp mehrere Bilder hinzuzufügen. Ich habe ein Plugin erstellt, um einem benutzerdefinierten Beitragstyp ein einzelnes Bild hinzuzufügen, kann jedoch nicht herausfinden, wie mehrere hinzugefügt werden. enter image description here hier bin ich.

js datei-

    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

das ist meine php datei

    <?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' );

?>
2
Justin

Dies kann eine Alternative für Sie sein. Das Plug-in Erweiterte benutzerdefinierte Felder verfügt über ein Bildfeld, mit dem Bilder hochgeladen und ausgewählt werden können. Sie können festlegen, dass das Feld auf Ihren benutzerdefinierten Beitragstypseiten angezeigt wird, und eine Codezeile in Ihre Vorlagendatei integrieren. Sie können beliebig viele Bildfelder erstellen. Erfahren Sie mehr über das Bildfeld hier.

3
streetfire

Sie können das Meta Box - Plugin verwenden, das verschiedene Bildfelder unterstützt (Sie können aus der Medienbibliothek wählen oder ein Bild hochladen, genauso wie Sie Bilder in den Post-Editor einfügen. Sie haben folgende Möglichkeiten:

  • image_advanced Feld, das wie der Add Media Button von WordPress funktioniert
  • file_input, mit dem Sie ein vorhandenes Bild auswählen oder eine external URL für das Bild verwenden können
  • plupload_image, der einen Platzhalter für Drag & Drop-Dateien anzeigt

Außerdem können Sie mit diesem Plugin die Felder klonen , wenn Sie möchten, damit Sie die Galerie einfacher erstellen können.

Sie können das Plugin in jeden benutzerdefinierten Beitragstyp integrieren und so viele Felder erstellen, wie Sie möchten. Hier ist die Liste der unterstützten Felder .

0
Anh Tran