0
Ich verwende Wordpress 4.7.2Erstellen von Bild-Upload-Widget
Ich versuche, ein einfaches Widget zu erstellen, die nur helfen, Benutzer ein Bild hochladen.
Unter meinem Code, wenn ich ein Bild auswähle, gibt es mir die Option, in den Beitrag einzufügen, aber ich will es nicht zu einem Beitrag zugeordnet werden, wollen nur seine URL und ID, so dass ich es zur Anzeige verwenden kann.
Ich versuchte zu folgen use media upload in custom widget und create image uploader widget und wordpress custom widget image uplaaod aber konnte es nicht lösen.
<?php
namespace MyTheme\Widgets;
use \MyTheme\Widgets as Widgets;
class Image extends \WP_Widget {
public function __construct($id_base = false, $name = false, $widget_options = array(), $control_options = array()) {
$id_base = ($id_base) ? $id_base : 'mytheme-widget-image';
$name = ($name) ? $name : __('Image', 'mytheme-widget-image-i18n');
$widget_options = wp_parse_args($widget_options, array(
'classname' => 'widget_image',
'description' => __('An image from the media library', 'mytheme-widget-image-i18n')
));
$control_options = wp_parse_args($control_options, array('width' => 300));
parent::__construct($id_base, $name, $widget_options, $control_options);
add_action('image_widget_print_footer_scripts', array(__CLASS__, 'print_footer_js'));
}
public function widget($args, $instance) {
$content = $this->render($args, $wp_widget);
}
public function render($args, $instance){
//generate content
return $content;
}
public function form($instance){
$widget_img_id = isset($instance['widget_img_id']) ? $instance['widget_img_id'] : '';
$image_src = isset($instance['widget-img-id']) ? $instance['widget-img-id'] : '';
$upload_link = esc_url(get_upload_iframe_src('image', $widget_img_id));
$is_image = ! empty($image_src);
?>
<div class="widget-img-wrapper">
<div class="widget-img-container">
<?php if ($is_image ): ?>
<img src="<?php echo $image_src; ?>" alt="" style="max-width:100%" />
<?php endif; ?>
<p class="hide-if-no-js">
<a name="upload_img_src" href="<?php echo $upload_link; ?>" class="upload-widget-img <?php if ($is_image){ echo 'hidden'; } ?>">
<?php _e('Set custom image') ?>
</a>
<a class="delete-widget-img <?php if (! $is_image ) { echo 'hidden'; } ?>"
href="#">
<?php _e('Remove this image') ?>
</a>
<input class="widget-img-id" name="widget_img_id" type="hidden" value="<?php echo esc_attr($image_id); ?>" />
</p>
</div>
</div>
<?php
}
public function update($new_instance, $old_instance){
$instance = array();
$instance['widget_img_id'] = (! empty($new_instance['widget_img_id'])) ? strip_tags($new_instance['widget_img_id']) : '';
$instance['upload_img_src'] = (! empty($new_instance['upload_img_src'])) ? strip_tags($new_instance['upload_img_src']) : '';
return $instance;
}
public static function print_footer_js()
{
wp_enqueue_media();
?>
<script>
jQuery(function($){
// Set all variables to be used in scope
var frame,
imageContainer = $('.widget-img-wrapper'), // Your meta box id here
addImgLink = imageContainer.find('.upload-widget-img'),
delImgLink = imageContainer.find('.delete-widget-img'),
imgContainer = imageContainer.find('.widget-img-container'),
imgIdInput = imageContainer.find('.widget-img-id');
// ADD IMAGE LINK
addImgLink.on('click', function(event){
event.preventDefault();
// If the media frame already exists, reopen it.
if (frame) {
frame.open();
return;
}
// Create a new media frame
frame = wp.media({
title: 'Select or Upload Media Of Your Chosen Persuasion',
button: {
text: 'Use this media'
},
library: {
type: 'image'
}
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected in the media frame...
frame.on('select', function() {
// Get media attachment details from the frame state
var attachment = frame.state().get('selection').first().toJSON();
// Send the attachment URL to our custom image input field.
imgContainer.append('<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>');
// Send the attachment id to our hidden input
imgIdInput.val(attachment.id);
// Hide the add image link
addImgLink.addClass('hidden');
// Unhide the remove image link
delImgLink.removeClass('hidden');
});
// Finally, open the modal on click
frame.open();
});
// DELETE IMAGE LINK
delImgLink.on('click', function(event){
event.preventDefault();
// Clear out the preview image
imgContainer.html('');
// Un-hide the add image link
addImgLink.removeClass('hidden');
// Hide the delete image link
delImgLink.addClass('hidden');
// Delete the image id from the hidden input
imgIdInput.val('');
});
});
</script>
<?php
}
}
Ich hielt es als Schaltfläche normalen einreichen, aber es leitet mich auf eine URL enthält post_id = 0, die leer ist. –