WordPress : Création d’un widget de téléchargement d’images

Publié par Jean-Michel le

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

Catégories : Wordpress

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *