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. 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' );
?>
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.
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 funktioniertfile_input
, mit dem Sie ein vorhandenes Bild auswählen oder eine external URL für das Bild verwenden könnenplupload_image
, der einen Platzhalter für Drag & Drop-Dateien anzeigtAuß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 .