bmat.pl

W czasie swojej przygody z WordPressem zdarzyło mi się zastanawiać, czy istnieje sposób, by w swojej wtyczce skorzystać ze wbudowanego okna zarządzania mediami. Takie rozwiązanie byłoby nie tylko ułatwieniem dla mnie, ale również zapewnieniem spójności interfejsu dla użytkownika, który będzie później korzystał z wtyczki. Okazało się, że rzeczywiście jest to możliwe, a rozwiązanie działa po prostu świetnie!

 

 

Przykładowy kod

JavaScript:

var file_frame;
jQuery('.upload_image_button').live('click', function(event) {
    event.preventDefault();

    // Jeśli obiekt okna już istnieje, otwórz go
    if (file_frame) {
        file_frame.open();
        return;
    }

    // Utwórz nowy media frame
    file_frame = wp.media({
        // Tytuł okna media frame
        title: 'Select the image',
        button: {
            // Napis na przycisku wyboru pliku
            text: 'Use',
        },
        // Czy możliwy ma być wybór wielu plików?
        multiple: false
    });

    // Akcja po wyborze pliku
    file_frame.on('select', function() {
        // Pobierz pierwszy element z zaznaczonych i zamień na obiekt JSON
        // W przypadku ustawienia multiple: true należy mieć na uwadze,
        // że .get('selection') zawiera więcej niż jeden element
        attachment = file_frame.state().get('selection').first().toJSON();
        jQuery('#image_box input').val(attachment.url);
        jQuery('#image_box img').attr('src', attachment.url).attr('alt', attachment.title);
    });

    file_frame.open();
});

HTML:

<div id="image_box">
    <input type="hidden" name="image" value="" />
    <img src="<?php echo plugins_url('/default_image.png', __FILE__); ?>" alt="Image" />
    <button class="button upload_image_button"><?php _e('Set image'); ?></button>
</div>

 

Podsumowanie

Tym razem obędzie się bez demo. Nie sprawdzałem, czy możliwe jest osadzenie media buttona na froncie strony, gdyż uznałem to za niepraktyczne i mogące stanowić zagrożenie bezpieczeństwa. Miejscem przewidzianym dla media buttona jest panel administracyjny, gdzie jego użycie jest świetnym sposobem na zarządzanie mediami połączonymi z naszą wtyczką – i co najważniejsze, zgodne z interfejsem i filozofią WordPressa.

 

Więcej informacji

1. https://codex.wordpress.org/Javascript_Reference/wp.media