Share
I denne serien tar vi en titt på hvordan du implementerer WordPress Media Uploader i et faktisk plugin. Ideen bak denne serien og den tilhørende koden er å gi en klar forståelse av hvordan det fungerer, hvordan vi kan bruke det i fremtiden, og hvordan vi kan inkorporere det i arbeidet vårt.
Inntil dette punktet har vi dekket:
Og gjennom disse artiklene har vi gått gjennom prosessen med å bygge et plugin som bruker WordPress Media Uploader til å introdusere et kjennetegnet bilde i bunntekst av våre blogginnlegg (og sider).
Men det er ett problem: Bildet er ikke lagret eller vises i innholdet i det tilhørende blogginnlegget (eller siden).
I denne artikkelen skal vi plukke opp hvor vi sluttet og fullfør resten av dette pluginet. Merk at jeg antar at du har lest de to foregående innleggene og forstått kildekoden som vi har dekket så langt.
Med det sagt, la oss fortsette.
Nøkkelen til å sikre at bildet kan vises på forsiden av WordPress, er å lagre bildeinformasjonen som er oppgitt av WordPress.
I den forrige artikkelen brukte vi noe av dette denne informasjonen for å vise bildet i meta-boksen som vi opprettet, men ingen av den informasjonen lagret faktisk. Som sådan kan bildet ikke vises i oversikten eller på forsiden av siden fordi WordPress ikke husker det.
Vi er goign for å fikse det. Spesielt skal vi lagre felt for:
Accentsconagua
src Egenskapalt attributt og som tittel EgenskapDet første vi må gjøre er å legge til en annen container med tre inntastingsfelter i admin.php se på pluginet vårt. Hvert av disse feltene vil tilsvare hva som er av verdiene ovenfor.
Ta en titt på koden nedenfor, og deretter vil jeg utdanne:
Fra begynnelsen bør det være lett nok å forstå:
verdig-footer-image-meta På dette tidspunktet må vi hoppe tilbake til vår JavaScript-fil slik at vi kan ta informasjonen tilbake til oss via Media Uploader og fylle inn feltene med denne informasjonen.
Åpen admin.js og legg deretter til følgende tre linjer nederst på håndteringsfunksjonen for innsatsen begivenhet (til file_frame):
// Lagre bildens informasjon i metadata feltene $ ('# footer-thumbnail-src') .val (json.url); $ ('# footer-miniatyr-tittel') .val (json.title); $ ('# footer-miniatyr-alt') .val (json.title);Herfra navigerer du til ditt WordPress-dashbord, legger til et nytt innlegg eller redigerer et eksisterende innlegg, og du bør se noe som følgende bilde:
Hvis du antar at du har skrevet alt JavaScript direkte, bør du se noe slikt ut fra dataene du oppgav i Media Uploader når du velger et bilde.
Vær imidlertid oppmerksom på at når du klikker på "Fjern kjennetegnet bilde", forblir teksten. Før vi ser på faktisk lagring av denne informasjonen, la oss fullføre JavaScript slik at det sletter inntastingsfeltene når brukeren fjerner bildet.
Selv om det er noen måter å gjøre dette på, har jeg valgt å bruke følgende kode:
// Endelig tilbakestiller vi datatatingsfeltene $ ('# featured-footer-image-info'). Children () .val (");Husk at dette må være plassert i hendelsesbehandleren for "Fjern kjennetegnet bilde" anker. I den forrige artikkelen heter vi denne funksjonen resetUploadForm.
På dette tidspunktet bør du kunne klikke på "Fjern utvalgt bilde" og se at bildet og inntastingsfeltene er tilbakestilt. Hvis du har problemer, kan du lese kildekoden i GitHub-depotet som er tilknyttet dette innlegget (det vil være i hovedavdelingen og vil også være merket som 1.0.0).
Nå må vi presentere noen kode i pluginet som vil sanitere verdiene til inntastingsfeltene, knytte dem til innlegget og lagre det i databasen slik at vi kan vise informasjonen ved siden av hvert innlegg.
I løpe funksjon for Acme_Footer_Image, legg til følgende linje av kode:
add_action ('save_post', array ($ this, 'save_post'));Da må vi definere en funksjon som vil være ansvarlig for faktisk lagring av verdiene til inngangsfeltene i databasen. Det er to ting å vite om følgende kode:
/ ** * Sanitized og lagrer innlegget som er utvalgt fotografisk meta-data spesifikt med dette innlegget. * * @param int $ post_id ID-en for innlegget som vi jobber med. * @since 0.2.0 * / offentlig funksjon save_post ($ post_id) hvis (isset ($ _REQUEST ['footer-thumbnail-src'])) update_post_meta ($ post_id, 'footer-thumbnail-src', sanitize_text_field _REQUEST ['footer-thumbnail-src'])); hvis (isset ($ _REQUEST ['footer-miniatyrtittel'])) update_post_meta ($ post_id, 'footer-miniatyr-tittel', sanitize_text_field ($ _REQUEST ['footer-miniatyrtittel'])); hvis (isset ($ _REQUEST ['footer-miniatyr-alt'])) update_post_meta ($ post_id, 'footer-thumbnail-alt', sanitize_text_field ($ _REQUEST ['footer-miniatyr-alt']);
Før vi er klare til å teste dette, må vi gjøre to flere endringer i oversikten, før du viser bildene på fronten.
Først må vi sørge for at vi ekko metadataene tilbake til feltene. Hopp inn i admin.php og oppdater det enda en gang til å inkludere dette:
Her ringer vi til get_post_meta funksjonen for å hente verdiene som er lagret ved hjelp av funksjonen vi har erklært ovenfor.
Deretter må vi sørge for at vi fyller bildeelementet som vi opprettet tidligere i denne serien med de samme verdiene:
Selvfølgelig, hvis metadataene er tomme, vil ingenting fylle attributter og bildet vil ikke vises.
Forutsatt at alt går bra, bør du se bildet og tilhørende data som vises i inntastingsfeltene når du lagrer innlegget. På samme måte, når du fjerner det kjente bildet, bør feltene rydde ut og ikke lenger vises.
Før vi går videre for å vise bildet på forsiden, er det noen få små ting vi må gjøre for å rydde opp displayet av meta-boksen.
Først må vi sørge for at alle inntastingsfeltene som var tidligere av typen tekst er av typen skjult.
Deretter må vi skrive en liten JavaScript-funksjon som vil vise bildet, forutsatt at en har blitt lagret. Funksjonen vil sjekke om innsendingsfeltet for bildeadressen ikke er en tom streng.
Hvis det ikke er det, vil det vise bildet. Så legger vi til denne funksjonen i vår JavaScript-fil:
; ?> "<?php echo get_post_meta( $post->ID, 'footer-miniatyr-tittel', sant); ?>")
/ ** * Kontroller for å se om inngangsfeltet for miniatyrkilden har en verdi. * Hvis ja, vises bildet og 'Fjern kjennetegnet bilde' anker. * * Ellers blir standardankeren gjengitt. * * @paramobjekt $ En referanse til jQuery-objektet * @since 1.0.0 * / function renderFeaturedImage ($) / * Hvis en miniatyradresse har blitt knyttet til dette bildet * Da må vi vise bildet og tilbakestille lenken . * / if ("! == $ .trim ($ ('# footer-thumbnail-src') .val ())) $ ('# featured-footer-image-container') .removeClass ('hidden') ; $ ('# set-footer-miniatyrbilde') .parent () .hide (); $ ('# fjern-footer-miniatyrbilde') .parent () .removeClass ('hidden');Deretter kan du ringe til JavaScript-funksjonen i sammenheng med DOM-klar-funksjonen:
renderFeaturedImage ($);
Kort sagt, når siden lastes, sjekker den for å se om det finnes en nettadresse i vårt felt. Hvis ja, gjør det bildet og gir oss muligheten til å fjerne den. Ellers viser den bare den tomme kjennetegnede bildeboksen.
Igjen, hvis du har problemer med å følge med denne koden, må du sjekke ut det tilknyttede GitHub-depotet ved å bruke linken i sidefeltet på denne siden.
På dette tidspunktet har vi gjort alt vi trenger å gjøre i dashbordet, så det er på tide å vise bildet på forsiden på bloggen. For å gjøre dette, må vi sette opp en krok som kobles til innholdet handling, sjekk for å se om et bilde eksisterer, og legg det i så fall til innleggets innhold.
For å gjøre dette, legg først følgende linje til løpe metode for din Acme_Footer_Image klasse:
add_action ('the_content', array ($ this, 'the_content'));Deretter må vi skrive en funksjon som er koblet til denne handlingen. Denne funksjonen vil være ansvarlig for å sjekke om vi bare er en enkelt side (fordi vi ikke vil legge til et bilde til bunnen av et innlegg hvis en bruker har, si en mer tag som en del av innholdet sitt).
Vi gjør dette ved å bruke følgende kode:
/ ** * Hvis det nåværende innlegget er et enkelt innlegg, sjekk for å se om det finnes et utvalgt bilde. * Hvis det er tilfelle, legger du til innleggets innhold før du gjør innlegget. * * @param string $ content Innholdet i innlegget. * @since 1.0.0 * / offentlig funksjon the_content ($ content) // Vi bryr oss bare om å legge bildet til enkelsider hvis (is_single ()) // For å legge til et bilde må det være minst en kildeattributt hvis ("! == ($ src = get_post_meta (get_the_ID (), 'footer-thumbnail-src', true))) // les de resterende attributene selv om de er tomme strenger $ alt = get_post_meta (get_the_ID (), "footer-miniatyr-tittel", sant); // opprett bildeelementet i sin egen container $ img_html = ''; $ img_html. = "
"; $ img_html. = '
'; // legg det til innholdet $ content. = $ img_html; returnere $ innhold; Og med det, burde vi ha et fullt funksjonelt plugin ved å legge til et utvalgt fotfeltbilde til et innlegg som kommer på en enkelt innleggsside.
Gjennom hele denne serien har vi dekket mye materiale, hvorav minst involvert med Media Uploader. Selv om denne artikkelen brukte mer tid på å vise oss hvordan du kobler dataene fra meta-boksen til fronten, viser den fremdeles hvordan du bruker en praktisk applikasjon av Media Uploader i sammenheng med et plugin.
Med det sagt er det mye mer å lære om Media Uploader som vi kunne dekke i fremtidige emner. Hvis du er interessert, vennligst gi meg beskjed i kommentarene nedenfor. I tillegg, hvis du har spørsmål om hva du har lest eller denne serien generelt, er du velkommen til å forlate dem også.
Ikke glem å sjekke GitHub-depotet for dette prosjektet - jeg håper det fungerer bra når du jobber med Media Uploader i fremtiden!
"; $ img_html. = '