Aggiunta di pulsanti immagine personalizzati con Media Uploader in WordPress

Di recente stavo lavorando a un plug-in in cui volevamo utilizzare l’uploader multimediale predefinito di WordPress per le nostre esigenze. Avevamo un pulsante immagine personalizzato e volevamo caricare un’immagine tramite l’uploader multimediale. WordPress ha creato un meraviglioso caricatore multimediale che consente a un utente di caricare una nuova immagine o utilizzare un’immagine esistente dalla libreria multimediale.

È sempre consigliabile utilizzare l’uploader multimediale integrato se stai cercando una soluzione personalizzata per caricare un’immagine nel back-end. In questo modo stai seguendo gli standard di WordPress. L’implementazione di un uploader multimediale richiede solo poche righe di codice. Quindi, senza ulteriori discussioni, iniziamo con esso.

Per questo tutorial, aggiungerò un pulsante immagine personalizzato per il post e la pagina. Facendo clic su questo pulsante, si aprirà l’uploader multimediale in cui l’utente può caricare l’immagine. L’URL dell’immagine caricata viene impostato in un campo meta personalizzato e verrà salvato come meta post per il post o la pagina specifica.

Aggiungi meta box personalizzati in WordPress

Il meta box non è altro che un blocco sul post o sulla pagina. Categorie, Tag, Immagine in evidenza, Estratto, Discussione, ecc. sono l’esempio di meta box. Utilizzando la casella Meta puoi aggiungere ulteriori informazioni per il post e la pagina.

Abbiamo bisogno di una meta box che contenga il pulsante di caricamento dell’immagine e un campo di testo. Quando un utente fa clic sul pulsante, caricherà l’immagine e l’URL dell’immagine finale verrà impostato nel campo di testo.

L’aggiunta di meta box è facile e diretta. Scrivi il codice sottostante nel functions.phpfile o nel tuo plugin.

function aw_custom_meta_boxes( $post_type, $post) {
    add_meta_box(
        'aw-meta-box',
        __( 'Custom Image' ),
        'render_aw_meta_box',
        array('post', 'page'), //post types here
        'normal',
        'high'
    );
}
add_action( 'add_meta_boxes', 'aw_custom_meta_boxes', 10, 2 );
 
function render_aw_meta_box($post) {
    $image = get_post_meta($post->ID, 'aw_custom_image', true);
    ?>
    <table>
        <tr>
            <td><a href="#" class="aw_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></td>
            <td><input type="text" name="aw_custom_image" id="aw_custom_image" value="<?php echo $image; ?>" style="width:500px;" /></td>
        </tr>
    </table>
    <?php
}

Dopo aver aggiunto il codice sopra, vai al tuo post o pagina e dovresti essere in grado di vedere la nuova meta box aggiunta insieme ai loro campi.

Personalizza l’uploader multimediale di WordPress

Ora sei pronto con la tua meta box. La prossima cosa è fare clic sul pulsante "Carica immagine", aprire l’uploader multimediale e impostare l’URL dell’immagine caricata nel campo di testo. Quindi all’inizio devi creare un file js e accodarlo in un ambiente WordPress.

Creiamo un file js awscript.jse accodiamolo come segue:

function aw_include_script() {
 
    if (! did_action( 'wp_enqueue_media')) {
        wp_enqueue_media();
    }
  
    wp_enqueue_script( 'awscript', get_stylesheet_directory_uri(). '/js/awscript.js', array('jquery'), null, false );
}
add_action( 'admin_enqueue_scripts', 'aw_include_script' );

Qui, ho fornito il percorso del tema supponendo che tu stia aggiungendo un intero codice nel tema. Se lo stai facendo tramite il plug-in, devi regolare il percorso secondo il tuo plug-in.

Per eseguire questo compito ho preso un riferimento a Javascript Reference/wp.media e ho scritto il codice jQuery. Nel awscript.jsscriveremo un codice per l’uploader dei media come segue.

jQuery(function($){
    $('body').on('click', '.aw_upload_image_button', function(e){
        e.preventDefault();
  
        var button = $(this),
        aw_uploader = wp.media({
            title: 'Custom image',
            library: {
                uploadedTo: wp.media.view.settings.post.id,
                type: 'image'
            },
            button: {
                text: 'Use this image'
            },
            multiple: false
        }).on('select', function() {
            var attachment = aw_uploader.state().get('selection').first().toJSON();
            $('#aw_custom_image').val(attachment.url);
        })
        .open();
    });
});

Ora vai avanti e fai clic sul pulsante "Carica immagine", si aprirà l’uploader multimediale, scegli/carica l’immagine e dovresti vedere l’URL dell’immagine aggiunto nel campo di testo. Infine, salverò questo URL nella tabella "postmeta" con la chiave "aw_custom_image". Naturalmente, puoi dare qualsiasi nome alla chiave.

function aw_save_postdata($post_id)
{
    if (array_key_exists('aw_custom_image', $_POST)) {
        update_post_meta(
            $post_id,
            'aw_custom_image',
            $_POST['aw_custom_image']
        );
    }
}
add_action('save_post', 'aw_save_postdata');

Il save_post è un’azione attivata ogni volta che un post o una pagina viene creato o aggiornato. Usando questa azione puoi iniettare il tuo codice nel sistema. Puoi leggere di più su questo hook sulla documentazione di WordPress.

Spero che tu sappia come aggiungere un caricatore multimediale personalizzato in WordPress. Provalo nel tuo plugin o tema e fammi sapere i tuoi pensieri nella sezione commenti qui sotto.

articoli Correlati

• Integrazione di MailChimp con il plug-in Contact Form 7
• Come aggiungere il codice dopo il tag del corpo in WordPress