Share
Når WordPress 3.5 ble utgitt, var en av de viktigste endringene som ble introdusert til Media Uploader. Kanskje en mer nøyaktig beskrivelse av endringen ville være å referere til som en addisjon av en ny Media Uploader.
Tross alt eksisterer den gamle versjonen av Media Uploader fortsatt og kan kjøre side om side med det nåværende Mediebiblioteket, men det er noe som må gjøres ved riktig tillegg og bruk av skript, stil og alle andre avhengige funksjoner.
Som med alt i programvare, funksjoner og funksjonalitet som eksisterer i betydelig tid, er gjenstand for å bli avskrevet til fordel for nye funksjoner eller funksjonalitet. I vårt tilfelle er mediebiblioteket ikke noe unntak. Selv om det ikke lenger brukes av WordPress-kjernen, er det nok av plugins og andre tredjepartsverktøy som fortsatt bruker den gamle versjonen av mediebiblioteket.
Utfordringen som kommer med å ha så mange kopier av den eldre funksjonalitetens kode er at når det kommer tid til å gjøre bruk av mediebiblioteket selv, vil vi sannsynligvis ende med å finne eksempler på den eldre funksjonaliteten.
Siden det nye mediebiblioteket er det som er den nye standarden i WordPress, og siden det ikke er mye dokumentasjon tilgjengelig for hvordan du bruker det, vil vi se på funksjonaliteten i de neste artiklene for å forstå hvordan den nye Media Biblioteket er konstruert, hvordan vi kan implementere det i vårt eget arbeid, og hvordan vi kan dra nytte av de ulike funksjonalitetene som allerede er inkludert i WordPress-kjerne.
Den nye WordPress Media Uploader har en rekke fordeler i forhold til den tidligere iterasjonen:
Det er imidlertid viktig å merke seg at den nyeste versjonen av opplasteren er bygget ved hjelp av et sett av helt forskjellige teknologier enn de tidligere. Dette betyr at koden du en gang skrev for å implementere tilpasset medieadministrasjon, fortsatt kan fungere (til kjerne Thickbox-koden er utdatert), men at den kommer til å se og føles datert i forhold til hva brukerne opplever nå når de håndterer mediene innenfor WordPress.
Før du tar en titt på hvordan du begynner å inkorporere dette i vår egen kode og skape vår egen implementering, er det viktig å forstå den underliggende grunnlaget for det nye mediebiblioteket.
Som tidligere nevnt brukte den tidligere utgaven av medieopplasteren et bibliotek som var kjent som Thickbox for å lage de tingene vi har sett, men i den siste implementeringen bruker WordPress begge underskrifter (ikke å forveksles med Underscore tema) og Backbone - to JavaScript-teknologier som samarbeider for å kjøre brukergrensesnittet og administrere hendelsene til mediaopplasteren.
Selv om vi ikke tar et dypt dykk i noen av disse bibliotekene, er det viktig å forstå hvilken rolle hver spiller i Media Uploader.
Først, ryggraden:
Backbone.js gir struktur til webapplikasjoner ved å tilby modeller med nøkkelverdige bindende og tilpassede arrangementer, samlinger med en rik API med tallrike funksjoner, visninger med declarative event handling og kobler alt sammen til din eksisterende API over et RESTful JSON-grensesnitt.
Og Underscore:
Underscore er et JavaScript-bibliotek som gir et helt rot av nyttige funksjonelle programmeringshjelpere uten å utvide noen innebygde objekter. Det er svaret på spørsmålet: "Hvis jeg setter meg ned foran en tom HTML-side, og vil begynne å bli produktiv med det samme, hva trenger jeg?" ... og slipset for å gå sammen med jQuery's tux og Backbone's suspenders.
Åpenbart kan du lese mer om hver av disse på sine respektive sider, men jeg ønsket å nevne dem nå, slik at når vi kommer inn på å se på administrasjon av brukergrensesnittet og hendelsene for vår tilpassede mediebibliotek-implementering, har vi en klarere forståelse for hva koden faktisk gjør.
Endelig merk at dette er ikke jQuery. Hvis du er vant til å jobbe med biblioteket - og mange av oss er - disse to bibliotekene er helt skilt. Du kan - og vi vil - bruke jQuery sammen med funksjonaliteten lagt til av Backbone og Underscore.
La oss nå komme til å skrive noen kode.
I eksemplet vårt skal vi se på hvordan vi integrerer en grunnleggende versjon av mediebiblioteket i et eksisterende WordPress-tema. I vårt eksempel vil vi bygge dette som et plugin; Miljøet som vi skal bruke består imidlertid av følgende:
Og det er det. Resten av koden vil bli inkludert i vårt plugin. Selvfølgelig reiser dette fremdeles spørsmålet hva vårt plugin kommer til å faktisk gjøre.
Kort sagt, vi skal jobbe med å etterligne funksjonen "Featured Image" i WordPress, men i stedet for å legge til et bilde øverst i innlegget (eller nær toppen av innlegget), skal vi introdusere en ' Utvalgte Footer Image 'som legger bildet til bunnen av innlegget.
Åpenbart er funksjonaliteten trivial - vekten er å implementere det nye mediebiblioteket.
All kildekoden vil bli gjort tilgjengelig for gjennomgang i et GitHub-depot i tilknytning til denne artikkelen. Følg gjerne med koden når artikkelen utvikler seg, og last ned koden for å studere mer etter hver artikkel for videre gjennomgang..
I wp-innhold / tillegg katalog, opprett en ny katalog som heter Acme-footer-image. Dette er hvor vi skal holde våre prosjektfiler. Deretter fortsetter du og lager tomme filer som følger;
Accentsconagua
README.txtTILLATELSEAcme-footer-image.phpDe tre første filene skal være selvforklarende. De Acme-footer-image.php filen er hvor vi skal definere pluginheader og faktisk starte utførelsen av plugin. Noter det klasse-acme-footer-image.php er klassen som vil definere noen av de første funksjonene til pluginet vårt.
Deretter oppretter du en katalog i plugin-katalogen som heter admin som dette er hvor all vår administrasjonsfunksjonalitet skal holdes. Denne katalogen skal inneholde:
admin / klasse-admin-footer-image.phpadmin / js / admin.jsEndelig opprett en visninger katalog i admin underkatalog som dette er hvor vi skal legge merke til for meta-boksen vår. Vi vil se nærmere på dette senere i artikkelen.
I et forsøk på å sørge for at vi oppretter et velorganisert sett med filer som hver av dem opprettholder sitt eget ansvar, vil vi se nærmere på hver av disse filene, og vi arbeider gjennom opplæringen. For nå må dette imidlertid inkludere alt vi trenger for å komme i gang.
Før vi begynner å skrive riktig kode, la oss gå videre og fylle ut noen av standardinformasjonen som begynner med README.
=== Acme Footer Image === Bidragsytere: tommcfarlin Doner lenke: http://tommcfarlin.com/ Merker: Utvalgte bilder Krever minst: 3.9.2 Testet opp til: 3.9.2 Stabil tag: 0.1.0 Lisens: GPLv2 eller senere lisens URI: http://www.gnu.org/licenses/gpl-2.0.html Legg til et utvalgt bilde nederst på innholdet i et innlegg eller en side. == Beskrivelse == Legg til et utvalgt bilde nederst på innholdet i et innlegg eller en side. Brukes som en demo for en Tuts + Kode opplæring. == Installasjon == Dette avsnittet beskriver hvordan du installerer pluginet og får det til å fungere. f.eks 1. Last opp 'plugin-name.php' til '/ wp-content / plugins /' katalogen 1. Aktiver pluginet via 'Plugins' -menyen i WordPress 1. Plasser ''i dine maler == Changelog == = 0.1.0 = * Innledende utgivelse
Merk at dette også inneholder endringsloggen.
Deretter må vi definere koden for kjerneplugineklassen. Denne klassen vil være ansvarlig for følgende:
Generelt sett finner jeg ikke at dette er den beste måten å utvikle plugins på objektorientert måte fordi, som du kan se, gjør denne klassen allerede mer enn én ting. Det er dårlig praksis; men fordi koden er så kort, og fordi vekten i denne serien vil være i stor grad fokusert på JavaScript som driver mediebiblioteket, er dette et offer jeg er villig til å lage.
Så la oss ta en titt på klassen i sin helhet, og så tar vi en titt på noen av de enkelte komponentene:
* / klasse Acme_Footer_Image / ** * IDen til denne plugin. * * @since 0.1.0 * @access private * @var streng $ navn IDen til denne plugin. * / privat $ navn; / ** * Den nåværende versjonen av plugin. * * @since 0.1.0 * @access private * @var string $ version Versjonen av plugin * / private $ versjon; / ** * Initialiserer plugin ved å definere egenskapene. * * @since 0.1.0 * / offentlig funksjon __construct () $ this-> name = 'acme-footer-image'; $ this-> version = '0.1.0'; / ** * Definerer kroker som vil registrere og enqueue JavaScriot * og meta-boksen som vil gjøre alternativet. * * @since 0.1.0 * / public function run () add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_scripts')); add_action ('add_meta_boxes', array ($ dette, 'add_meta_box'))); / ** * Gjør meta-boksen på innlegget og sidene. * * @since 0.1.0 * / offentlig funksjon add_meta_box () $ screens = array ('post', 'side'); foreach ($ skjerm som $ skjerm) add_meta_box ($ this-> navn, 'Footer Featured Image', array ($ dette, 'display_featured_footer_image'), $ skjerm, 'side'); / ** * Registrerer JavaScript for å håndtere mediaopplasteren. * * @since 0.1.0 * / public function enqueue_scripts () wp_enqueue_media (); wp_enqueue_script ($ this-> navn, plugin_dir_url (__FILE__). 'js / admin.js', array ('jquery'), $ this-> versjon, 'alle'); / ** * Gjør visningen som viser innholdet til metakassen som for utløser * meta-boksen. * * @param WP_Post $ post Postobjektet * @since 0.1.0 * / offentlig funksjon display_featured_footer_image ($ post) include_once (dirname (__FILE__). '/views/admin.php'); Mesteparten av koden skal være selvforklarende gjennom kommentarene. Hvis ikke, ikke nøl med å legge igjen en kommentar, men i mellomtiden, la oss ta en titt på følgende to områder:
Først, definisjonen av meta-boksen.
navn, 'Footer Featured Image', array ($ dette, 'display_featured_footer_image'), $ skjerm, 'side');
Legg merke til at vi inkluderer støtte for meta-boksen på begge sider og posttyper. Denne funksjonen refererer også til en tilbakeringingsfunksjon display_featured_footer_image som er ansvarlig for å gjengi HTML-meta-boksen:
offentlig funksjon display_featured_footer_image ($ post) include_once (dirname (__FILE__). '/views/admin.php');
Markeringen for denne filen er veldig enkel. Det er et anker med en ID som vi kan få tilgang til via vårt JavaScript, som vi tar en titt på øyeblikkelig.
Sett kjennetegnet bilde
Og vi vil gjenkjenne JavaScript som er nødvendig for å laste opp mediebiblioteket.
offentlig funksjon enqueue_scripts () wp_enqueue_media (); wp_enqueue_script ($ this-> navn, plugin_dir_url (__FILE__). 'js / admin.js', array ('jquery'), $ this-> versjon, 'alle'); Legg merke til at før du registrerer vår egen JavaScript, ringer vi til wp_enqueue_media. I henhold til Codex, denne funksjonen:
Enqueues alle skript, stiler, innstillinger og maler som er nødvendige for å bruke alle JavaScript-APIer for media.
Og dette er nødvendig for å sikre at vi har avhengighetene som er nødvendige for å laste opp den nye Media Uploader.
Deretter skal vi se på JavaScript som vi må skrive for å sikre at vi utnytter funksjonaliteten som er nødvendig for å sette opp mediebiblioteket, og for å sikre at det vises når brukeren klikker på riktig kobling.
Koden er tungt kommentert, så det skal være lett å følge. Hvis ikke, ikke nøl med å legge igjen en kommentar i feedet under innlegget!
/ ** * Tilbakeringingsfunksjon for "klikk" -hendelsen av 'Set Footer Image' * anker i meta-boksen. * * Viser medieopplasteren for å velge et bilde. * * @since 0.1.0 * / function renderMediaUploader () 'bruk streng'; var file_frame, image_data; / ** * Hvis en forekomst av file_frame allerede eksisterer, kan vi åpne den * heller enn å lage en ny forekomst. * / if (undefined! == file_frame) file_frame.open (); komme tilbake; / ** * Hvis vi er så langt, eksisterer ikke en forekomst, så vi må * lage vår egen. * * Bruk biblioteket wp.media til å definere innstillingene til Media * Uploader. Vi velger å bruke rammen "innlegg" som er en mal * definert i WordPress-kjerne og initialiserer filrammen * med "insert" -tilstanden. * * Vi tillater ikke at brukeren velger mer enn ett bilde. * / file_frame = wp.media.frames.file_frame = wp.media (frame: 'post', state: 'insert', multiple: false); / ** * Oppsett en hendelseshåndterer for hva du skal gjøre når et bilde er * valgt. * * Siden vi bruker "visning" -statusen når du initialiserer * filen_rammen, må vi forsikre deg om at håndtereren er vedlagt * til innsatshendelsen. * / file_frame.on ('insert', funksjon () / ** * Vi vil dekke dette i neste versjon. * /); // Nå viser den faktiske filen_frame file_frame.open (); (funksjon ($) 'bruk streng'; $ (funksjon () $ ('# set-footer-miniatyrbilde') .on ('klikk', funksjon (evt) // Stopp ankerens standardoppførsel evt. preventDefault (); // Vis medieopplasteren renderMediaUploader ();););) (jQuery);Merk at dette bare viser mediebiblioteket. Det gjør egentlig ikke noe etter at vi har lastet opp og / eller valgt et bilde.
Endelig er det siste trinnet å definere vår kjerne bootstrap-fil for å starte pluginet:
* @license GPL-2.0 + * @link http://tommcfarlin.com * @copyright 2014 Tom McFarlin * * @ wordpress-plugin * Plugin Name: Acme Footer Image * Plugin URI: TODO * Beskrivelse: Legger til et kjennetegnet bilde på bunnen av innholdet i et innlegg eller en side. * Versjon: 0.1.0 * Forfatter: Tom McFarlin * Forfatter URI: http://tommcfarlin.com * Lisens: GPL-2.0 + * Lisens URI: http://www.gnu.org/licenses/gpl-2.0.txt * / // Hvis denne filen kalles direkte, avbryt. hvis (! definert ('WPINC')) die; / ** * Inkluderer kjerneplugineklassen for å utføre plugin. * / require_once (plugin_dir_path (__FILE__). 'admin / class-acme-footer-image.php'); / ** * Begynner kjøring av plugin. * * Siden alt i plugin er registrert via kroker, * så slår av plugin fra dette punktet i filen * ikke innflytelse på sidens livssyklus. * * @since 0.1.0 * / funksjon run_acme_footer_image () $ plugin = new Acme_Footer_Image (); $ Plugin-> Kjør (); run_acme_footer_image (); Her skal alt være relativt kjent: Vi sørger for at vi har tillatelse til å laste inn pluginet, vi inkluderer avhengigheten av instrumentbrettet, vi instantierer widgeten, og så setter vi den i bevegelse.
På dette punktet leser vi for å aktivere plugin. Gjør det fra pluginets dashbord i WordPress-installasjonen, og naviger deretter til hvilken som helst Post- eller sideskjerm. Du bør legge merke til et «Footer-utvalgt bilde». Når du klikker ankeret, bør mediebiblioteket vises.
Hvis ikke, dobbeltkryss de stiene du har knyttet til JavaScript-filen, og kontroller at de er riktig lastet inn.
Herfra er du fri til å velge bilder og laste opp bilder, men ingenting annet kommer fra det. I neste artikkel skal vi se på hvordan du kan dra nytte av dataene hentet fra mediaopplasteren.
Her tok vi en titt på den siste iterasjonen av WordPress 'Media Uploader, hvordan den fungerer, og hvordan vi kan legge grunnlag for å utnytte det i vår kode. I neste artikkel skal vi se på hvordan du bruker JavaScript for å hente dataene som er lagt til Media Uploader, slik at vi i sin tur kan gjøre det vi vil ha med det.
I tillegg skal vi se på hvordan vi kan introdusere flere felt i Media Uploader ved hjelp av eksisterende maler som leveres med WordPress-kjernen. Og senere skal vi se hvordan vi kan implementere flere felt sammen med Media Uploader for å lagre enda mer informasjon.
For tiden kan du leke med koden som er gitt i denne artikkelen, se om du kan få det til å fungere i sammenheng med dine egne prosjekter, og la igjen og spørsmål og / eller tilbakemelding som du har i kommentarfeltet nedenfor!
Til slutt, ikke glem at du kan sjekke denne koden fra det tilknyttede GitHub-depotet som er vedlagt dette innlegget.
