Lägga till anpassad bildknapp med Media Uploader i WordPress

Senaste uppdateringen okt 17, 2021

Innehåll

Nyligen arbetade jag med ett plugin där vi ville använda standardmediauppladdaren av WordPress för vårt krav. Vi hade en anpassad bildknapp och ville ladda upp en bild via medieuppladdaren. WordPress byggde en medieuppladdare vackert som tillåter en användare att ladda upp en ny bild eller använda en befintlig bild från mediebiblioteket.

Det rekommenderas alltid att använda den inbyggda medieuppladdaren om du letar efter en anpassad lösning för att ladda upp en bild i backend. Om du gör det följer du WordPress-standarder. Att implementera en medieuppladdare tar bara några rader kod. Så utan vidare diskussion, låt oss komma igång med det.

För denna handledning lägger jag till en anpassad bildknapp för inlägget och sidan. När du klickar på den här knappen öppnas medieuppladdaren där användaren kan ladda upp bilden. Den uppladdade bildens URL ställs in i ett anpassat metafält och kommer att sparas som en postmeta för det specifika inlägget eller sidan.

Lägg till anpassad metabox i WordPress

Meta-rutan är inget annat än ett block på inlägget eller sidan. Kategorier, Taggar, Utvalda bilder, Utdrag, Diskussion, etc är exempel på metafält. Med rutan Meta kan du lägga till ytterligare information för inlägget och sidan.

Vi behöver en metaruta som innehåller knappen för uppladdningsbild och ett textfält. När en användare klickar på knappen laddar de upp bilden och den slutliga webbadressen för bilden ställs in i textfältet.

Att lägga till meta-rutan är enkelt och enkelt. Skriv koden nedan i functions.phpfilen eller i ditt 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
}

När du har lagt till ovanstående kod, gå till ditt inlägg eller sida så ska du kunna se den nya metafältet som läggs till tillsammans med deras fält.

Anpassa WordPress Media Uploader

Du är nu redo med din metafält. Nästa sak är genom att klicka på knappen "Ladda upp bild", öppna medieuppladdaren och ställ in den uppladdade bildens URL i textfältet. Så först måste du skapa en js-fil och lägga in den i en WordPress-miljö.

Låt oss skapa en js-fil awscript.jsoch ange den på följande sätt:

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' );

Här har jag gett temabanan förutsatt att du lägger till en hel kod i temat. Om du gör det via plugin måste du justera sökvägen enligt ditt plugin.

För att utföra denna uppgift har jag tagit en referens till Javascript Reference / wp.media och skrivit jQuery-koden. I den awscript.jskommer vi att skriva en medieuppladdarkod enligt följande.

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();
    });
});

Fortsätt nu och klicka på knappen ‘Ladda upp bild’, den öppnar medieuppladdaren, välj / ladda upp bild och du ska se bildens URL läggas till i textfältet. Slutligen ska jag spara denna URL i ‘postmeta’ tabellen med nyckeln ‘aw_custom_image’. Naturligtvis kan du ange vilket namn som helst för nyckeln.

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');

Save_post är en åtgärd som utlöses när ett inlägg eller en sida skapas eller uppdateras. Med den här åtgärden kan du injicera din kod i systemet. Du kan läsa mer om den här kroken på WordPress-dokumentation.

Jag hoppas att du fick veta hur du lägger till en anpassad medieuppladdare i WordPress. Prova det i ditt plugin eller tema och låt mig veta dina tankar i kommentarfältet nedan.

relaterade artiklar

Inspelningskälla: artisansweb.net