WordPress Media Uploader w pluginach i motywach

Integracja JavaScript z resztą pluginu

Pozostało nam już tylko zintegrować skrypt JS z resztą widgetu. Tutaj posiłkuję się lekko zmodyfikowaną i uproszczoną wersją kodu, który znajdziecie na stronach kodeksu WP.

Jak to działa? Do klasy guzika przypisujemy wydarzenie on click – po kliknięciu, zidentyfikowany zostaje rodzic guzika, aby wiedzieć, o którą instancję widgetu chodzi i według niej później wypełnić odpowiednie pole tekstowe. Warto dodać, że oprócz ścieżki do pliku dostajemy także wiele innych informacji dotyczących wybranego medium, które także możemy wykorzystać w naszym widgecie – np. do stworzenia atrybutu alt dla wyświetlanego już po stronie użytkownika obrazka.

alt: ""
author: "1"
authorName: "admin"
caption: ""
compat: Object { item="",  meta=""}
date: 1489438481000
dateFormatted: "13 marca 2017"
description: ""
editLink: "http://localhost/wptest/...php?post=45&action=edit"
filename: "newsletter_1170.png"
filesizeHumanReadable: "18 KB"
filesizeInBytes: 18905
height: 100
icon: "http://localhost/wptest/...mages/media/default.png"
id: 45
link: "http://localhost/wptest/newsletter_1170/"
menuOrder: 0
meta: false
mime: "image/png"
modified: 1489438481000
name: "newsletter_1170"
nonces: Object { update="785ece1edc",  delete="8cc545f11a",  edit="6d997a9bd4"}
orientation: "landscape"
sizes: Object { thumbnail={...},  medium={...},  full={...}}
status: "inherit"
subtype: "png"
title: "newsletter_1170"
type: "image"
uploadedTo: 0
url: "http://localhost/wptest/.../03/newsletter_1170.png"
width: 633

To już wszystko! Pozostało wszystko zapisać i przetestować. Pełne archiwum z zamieszczonym przykładem do pobrania tutaj.

Efekt końcowy po dodaniu dwóch instancji naszego widgetu do sidebara wygląda następująco:

WordPress Media Uploader, to całkiem sprytne narzędzie, dzięki któremu już w kilka minut jesteśmy w stanie dodać do naszego pluginu pełną obsługę multimediów – od wysyłania na serwer aż po wybór z biblioteki.

Jeżeli masz dodatkowe pytania napisz w komentarzach pod tym artykułem a postaram się jeszcze coś podpowiedzieć.