Ajouter un upload d'image pour vos plugins

Je vais faire deux billets pour vous donner des astuces pour le développement de vos plugins ou options de thèmes.

Le premier concernant la fonctionnalité d’upload d’images, le deuxième concernera l’ajout d’un color picker : « Ajouter un champ color picker dans vos plugins WordPress« .

Ces deux astuces m’ont permis de développer le plugin WP Maintenance.

Ajouter la fonctionnalité d’upload d’image dans vos plugins

HTML

Commençons avec le code nécessaire pour charger le code HTML :

Uploader votre image <label for="upload_image"> <input id="upload_image" size="36" name="upload_image" type="text" /> <input id="upload_image_button" value="Uploader" type="button" /> </label>

Php

Nous allons appeler en file d’attente les scripts et les styles. Nous avons besoin de ‘media-upload‘ et ‘thickbox’ pour leur exécution, ainsi que jQuery, qui est déjà inclus.
function my_admin_scripts() { 
    wp_enqueue_script('media-upload'); 
    wp_enqueue_script('thickbox'); wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox')); 
    wp_enqueue_script('my-upload');

    // On évite les ereurs de chargement sur Chrome
    wp_enqueue_media();

    // Vous pouvez traduire le script ici avec vos data.
    wp_localize_script( 'wpm-my-upload', 'Data', array(
      'textebutton'  =>  __( 'Choose This Image', 'textdomain' ),
      'title'  => __( 'Choose Image', 'textdomain' ),
    ) );
}  
function my_admin_styles() { 
    wp_enqueue_style('thickbox'); 
}  

if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') { 
    add_action('admin_print_scripts', 'my_admin_scripts'); 
    add_action('admin_print_styles', 'my_admin_styles'); 
}

Vous remarquerez une contition if (isset($_GET[‘page’]) && $_GET[‘page’] == ‘my_plugin_page’) n’oubliez pas de changer my_plugin_page par votre page.

Vous pouvez remarquez aussi ces deux lignes :
title: Data.title et text: Data.textebutton

Cela vous permet de traduire l’affichage de la fenêtre (le Titre et le texte du bouton). C’est pour cela que nous rajoutons ceci :

    wp_localize_script( 'wpm-my-upload', 'Data', array(
      'textebutton'  =>  __( 'Choose This Image', 'wp-maintenance' ),
      'title'  => __( 'Choose Image', 'wp-maintenance' ),
    ) );

jQuery

Nous avons chargé ‘my-script.js‘, voilà son contenu :

jQuery(document).ready(function() {

    var custom_uploader;
 
    jQuery('#upload_image_button').click(function(e) {
 
        e.preventDefault();
 
        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }
 
        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: Data.title,
            button: {
                text: Data.textebutton
            },
            multiple: false
        });
 
        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            jQuery('#upload_image').val(attachment.url);
        });
 
        //Open the uploader dialog
        custom_uploader.open();
 
    });
    
});

J’espère que cela vous aidera pour vos futurs développement de plugins ou de thèmes WordPress, et en attendant maintenant vous saurez ajouter la fonctionnalité d’upload d’image dans vos plugins WordPress.

 

 

 

3 réponses

Répondre

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.