Spara bilder med WordPress Media Uploader

I den här serien tar vi en titt på hur man implementerar WordPress Media Uploader i ett faktiskt plugin. Tanken bakom denna serie och dess tillhörande kod är att ge en tydlig förståelse för hur det fungerar, hur vi kan använda det i framtiden och hur vi kan införliva det i vårt arbete.

Hittills har vi täckt:

Komma igång med WordPress Media Uploader
Lägga till och ta bort bilder med WordPress Media Uploader

Och genom dessa artiklar har vi gått igenom processen med att bygga ett plugin som använder WordPress Media Uploader för att presentera en utvalda bild i sidfot av våra blogginlägg (och sidor).

Men det finns ett problem: Bilden sparas inte eller visas i innehållet i det tillhörande bloggposten (eller sidan).

I den här artikeln kommer vi att hämta upp var vi slutade och slutföra implementeringen av resten av det här plugin. Observera att jag antar att du har läst de föregående två inläggen och förstått källkoden som vi har täckt hittills.

Med det sagt, låt oss återuppta.

Spara den utvalda bilden

Nyckeln till att se till att bilden kan visas på framsidan av WordPress är att spara bildinformationen som tillhandahålls av Wordpress.

I den föregående artikeln använde vi lite av den här informationen för att visa bilden i metaboxen som vi skapade, men ingen av den informationen sparades faktiskt. Som sådan kan bilden inte visas i instrumentpanelen eller på framsidan av webbplatsen eftersom WordPress faktiskt inte kommer ihåg det.

Vi är goign för att fixa det. Specifikt kommer vi att spara fält för:

Bildadressen så att vi kan ställa in bilden src attribut
Bildens titel så att vi kan ställa in bilden som bilden alt attribut och som titel attribut

Presentera metadata

Det första vi behöver göra är att lägga till en annan behållare med tre inmatningsfält i admin.php vy av vårt plugin. Vart och ett av dessa fält motsvarar vad av värdena ovan.

Ta en titt på koden nedan, varefter jag ska utarbeta:

Från början bör det vara lätt att förstå:

Vi har introducerat en behållare som identifieras av Utvalda-footer-image-meta
Har innehåller tre inmatningstextelement som var och en motsvarar bildelementattribut som vi ska spara

Vid denna tidpunkt behöver vi hoppa tillbaka till vår JavaScript-fil så att vi kan ta informationen tillbaka till oss via Media Uploader och fylla i inmatningsfälten med denna information.

Öppna admin.js och lägg sedan till följande tre rader i botten av handlarfunktionen för insatsen händelse (för file_frame):

// Spara bildens information i metadatafälten $ ('# footer-thumbnail-src') .val (json.url); $ ('# footer-miniatyr-titel') .val (json.title); $ ('# footer-thumbnail-alt') .val (json.title);

Härifrån navigerar du till din WordPress-kontrollpanel, lägger till ett nytt inlägg eller redigerar ett befintligt inlägg och du borde se något som följande bild:

Om du antar att du har skrivit alla JavaScript direkt bör du se något som detta baserat på de data som du angav i Media Uploader när du väljer en bild.

Observera dock att texten när du klickar på "Ta bort funktionell bild" kvarstår. Innan vi tittar på att faktiskt spara den här informationen, låt oss avsluta JavaScript så att det rensar inmatningsfälten när användaren tar bort bilden.

Även om det finns ett par sätt att göra detta, har jag valt att använda följande kod:

// Slutligen nollställer vi metadata-inmatningsfälten $ ('# featured-footer-image-info'). Children () .val (");

Kom ihåg att det här måste finnas i händelsehanteraren för "Ta bort utvalt bild" ankare. I den föregående artikeln heter vi den här funktionen resetUploadForm.

Vid den här tiden borde du kunna klicka på "Ta bort den utvalda bilden" och se till att bilden och inmatningsfälten återställs. Om du har problem, kolla källkoden i GitHub-förvaret som är kopplat till det här inlägget (det kommer att ligga i huvudkontoret och kommer också att vara taggat som 1.0.0).

Spara Metadata

Nu måste vi införa en kod i pluginet som kommer att sanera värdena på inmatningsfälten, associera dem med posten och spara det i databasen så att vi kan visa informationen vid sidfoten av varje inlägg.

I springa funktion för Acme_Footer_Image, lägg till följande rad kod:

add_action ('save_post', array ($ this, 'save_post'));

Då måste vi definiera en funktion som kommer att ansvara för att faktiskt spara värdena för inmatningsfälten till databasen. Det finns två saker att veta om följande kod:

Vi sanerar data innan vi sparar det
Vi är associerade med fälten med nycklar som vi ska använda för att visa bilden i fronten.

/ ** * Sanitiserad och sparar posten medföljer footer image meta data specifikt med detta inlägg. * * @param int $ post_id ID för posten som vi för närvarande arbetar med. * @since 0.2.0 * / public function save_post ($ post_id) if (isset ($ _REQUEST ['footer-thumbnail-src'])) update_post_meta ($ post_id, 'footer-thumbnail-src', sanitize_text_field _REQUEST ['footer-thumbnail-src'])));  if (isset ($ _REQUEST ['footer-thumbnail-title'])) update_post_meta ($ post_id, 'footer-thumbnail-title', sanitize_text_field ($ _REQUEST ['footer-miniatyr-titel']));  if (isset ($ _REQUEST ['footer-thumbnail-alt'])) update_post_meta ($ post_id, 'footer-thumbnail-alt', sanitize_text_field ($ _REQUEST ['footer-thumbnail-alt']));

Innan vi är redo att testa detta måste vi göra ytterligare två ändringar i instrumentpanelsvisningen innan du visar bilderna på fronten.

Först måste vi se till att vi eko metadata tillbaka till inmatningsfälten. Hoppa in i admin.php och uppdatera det ytterligare en gång till att inkludera detta:

  "/>  "/>  "/>

Här ringer vi till get_post_meta funktionen för att hämta de värden som sparas med funktionen vi har deklarerat ovan.

Därefter måste vi se till att vi fyller i det bildelement som vi skapade tidigare i denna serie med samma värden:

  "alt ="ID, "footer-thumbnail-alt", true); ?> "title ="ID, "Footer-thumbnail-title", true); ?> "/>

Naturligtvis, om metadata är tomma, kommer ingenting att fylla i attributen och bilden kommer inte att visas.

Förutsatt att allt går bra bör du se bilden och dess tillhörande data som visas i inmatningsfälten när du sparar inlägget. På samma sätt, när du tar bort den utvalda bilden, bör fälten raderas och ska inte längre visas.

Städar upp

Innan vi fortsätter för att visa bilden på framsidan, finns det några små saker som vi behöver göra för att rensa upp displayen av metaboxen.

Först måste vi se till att alla de inmatningsfält som var föregående av typen text är av typ dold.

  "/>  "/>  "/>

Därefter måste vi skriva en liten JavaScript-funktion som visar bilden förutsatt att den har sparats. Funktionen kommer att kontrollera om inmatningsfältet för bildadressen inte är en tom sträng.

Om det inte är så kommer det att visa bilden. Så vi lägger till den här funktionen i vår JavaScript-fil:

/ ** * Kontrollerar om inmatningsfältet för miniatyrkällan har ett värde. * Om så är fallet visas bilden och "Ta bort utrustad bild" ankare. * * Annars görs standardankret. * * @paramobjekt $ En referens till jQuery-objektet * @since 1.0.0 * / function renderFeaturedImage ($) / * Om en miniatyradress har associerats med den här bilden * Då måste vi visa bilden och återställa länken . * / if ("! == $ .trim ($ ('# footer-thumbnail-src') .val ())) $ ('# featured-footer-image-container') .removeClass ; $ ('# set-footer-miniatyrbild') .parent () .hide (); $ ('# remove-footer-miniatyrbild') .parent () .removeClass ('hidden');

Ring sedan till JavaScript-funktionen inom ramen för DOM-redo-funktionen:

renderFeaturedImage ($);

Kort sagt, när sidan laddas kontrollerar den om det finns en URL i vårt inmatningsfält. Om så är fallet gör det bilden och ger oss möjlighet att ta bort det. Annars visar den bara den tomma bildrutan.

Återigen, om du har problem med att följa med den här koden, se till att kolla in det tillhörande GitHub-arkivet med länken i sidofältet på den här sidan.

Visar den aktuella bilden

Vid det här laget har vi gjort allt vi behöver göra i instrumentbrädan, så det är dags att visa bilden på framsidan på bloggen. För att kunna göra detta måste vi installera en krok som ansluter till innehållet åtgärd, kontrollera om det finns en bild och, om så är fallet, lägga till den till inläggets innehåll.

För att göra detta lägger du först följande rad till springa metod för din Acme_Footer_Image klass:

add_action ('the_content', array ($ this, 'the_content'));

Därefter måste vi skriva en funktion som är kopplad till den här åtgärden. Den här funktionen är ansvarig för att kontrollera om vi bara är en enda sida (för att vi inte vill lägga till en bild till sidfoten om ett inlägg om en användare har en Mer tagg som en del av deras innehåll).

Vi gör detta med följande kod:

/ ** * Om det aktuella inlägget är ett enda inlägg, kontrollera om det finns en utvald bild. * Om så är fallet, lägger du till inläggets innehåll innan du gör inlägget. * * @param string $ content Innehållet i inlägget. * @since 1.0.0 * / public function the_content ($ content) // Vi bryr oss bara om att lägga till bilden på enstaka sidor om (is_single ()) // För att lägga till en bild måste det finnas minst en källattribut om ("! == ($ src = get_post_meta (get_the_ID ()," footer-thumbnail-src ", sant))) // läs de återstående attributen även om de är tomma strängar $ alt = get_post_meta (get_the_ID (), "footer-thumbnail-title", true); // skapa bildelementet i sin egen container $ img_html = ''; $ img_html. = ""; $ img_html. = '
'; // lägg till innehållet $ content. = $ img_html;  returnera $ innehåll

Och med det borde vi ha ett fullt fungerande plugin som bifogar en utseende med en footer-bild till ett inlägg som gör en enda inläggssida.

Slutsats

Under hela denna serie har vi täckt mycket material, varav minst involverade med Media Uploader. Även om denna artikel ägde mer tid att visa oss hur man kopplar data från meta-boxen till fronten, visar den fortfarande hur man applicerar en praktisk applikation av Media Uploader i samband med ett plugin.

Med det sagt finns det mycket mer att lära om Media Uploader som vi kan täcka i framtida ämnen. Om du är intresserad, vänligen meddela mig i kommentarerna nedan. Dessutom, om du har några frågor om vad du har läst eller denna serie i allmänhet, kan du också lämna dem.

Glöm inte att kolla GitHub-förvaret för det här projektet - jag hoppas det fungerar bra när du arbetar med Media Uploader i framtiden!

Koda