WordPress : Création d’un widget de téléchargement d’images
j’utilise wordpress 4.7.2
J’essaie de créer un widget simple qui aidera uniquement l’utilisateur à télécharger une image.
Sous mon code, lorsque je sélectionne une image, cela me donne la possibilité de l’insérer dans le message, mais je veux qu’il ne soit associé à aucun message, je veux juste son URL et son identifiant afin que je puisse l’utiliser pour l’afficher.
J’ai essayé de suivre l’utilisation du téléchargement de médias dans un widget personnalisé et de créer un widget de téléchargement d’images et un téléchargement d’image de widget personnalisé wordpress, mais je n’ai pas pu le résoudre.
<?php
namespace MyThemeWidgets;
use MyThemeWidgets 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
}
}
Solution n°1 trouvée
Le problème avec ceci est qu’il
add_action('image_widget_print_footer_scripts', array(__CLASS__, 'print_footer_js') );est impossible de mettre le script en file d’attente, ni wp_footer, admin_footerou admin_enqueue_scriptssera en mesure de rendre le script, besoin de mettre en file d’attente en dehors de la classe. cela résout mon problème. N’utilisez pas ce javascript, a un problème avec l’instance en tant que classe utilisée dans js.
<?php
namespace MyThemeWidgets;
use MyThemeWidgets 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;
}
}
et JS
add_action( 'admin_enqueue_scripts', function(){
wp_enqueue_media('jquery');
} );
add_action('admin_footer', function(){
?>
<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'
},
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
}
Solution n°2 trouvée
Je crois que « insérer dans le message » n’est que le texte par défaut, et qu’il n’a vraiment rien à voir avec le message – Le fichier se retrouve de toute façon dans la médiathèque et dans les dossiers de téléchargement –
function replace_window_text($translated_text, $text) {
if ('Insert into Post' == $text) {
$referer = strpos(wp_get_referer(), 'media_page');
if ($referer != '') {
return __('Upload Billede', 'ink');
}
}
return $translated_text;
}
Ceci provient d’un de mes anciens projets, où j’ai créé un plugin pour le téléchargement de médias. ne correspond probablement pas à votre problème, mais cela peut peut-être vous mettre sur la bonne voie
0 commentaire