Share
In deze serie bekijken we hoe de WordPress Media Uploader in een echte plug-in wordt geïmplementeerd. Het idee achter deze serie en de bijbehorende code is om een duidelijk beeld te geven van hoe het werkt, hoe we het in de toekomst kunnen gebruiken en hoe we het in ons werk kunnen opnemen..
Tot nu toe hebben we het volgende behandeld:
En in al die artikelen hebben we het proces doorlopen van het bouwen van een plug-in die de WordPress Media Uploader gebruikt om een aanbevolen afbeelding in de footer van onze blogposts (en pagina's).
Maar er is één probleem: de afbeelding wordt niet opgeslagen en wordt ook niet weergegeven in de inhoud van de bijbehorende blogpost (of pagina).
In dit artikel gaan we verder waar we zijn gebleven en voltooien we de rest van deze plug-in. Merk op dat ik veronderstel dat je de vorige twee berichten hebt gelezen en de broncode begrijpt die we tot nu toe hebben behandeld.
Met dat gezegd, laten we verder gaan.
De sleutel om ervoor te zorgen dat de afbeelding op de voorkant van WordPress kan worden weergegeven, is om de afbeeldingsinformatie op te slaan die wordt verstrekt door WordPress.
In het vorige artikel hebben we een deel van deze informatie gebruikt om de afbeelding weer te geven in de metabox die we hebben gemaakt, maar geen van die informatie is daadwerkelijk opgeslagen. Als zodanig kan de afbeelding niet worden weergegeven in het dashboard of aan de voorkant van de site, omdat WordPress deze niet echt onthoudt.
We zijn goign om dat te repareren. We gaan met name velden opslaan voor:
Accentsconagua
src attribuutalt attribuut en als de titel attribuutHet eerste dat we moeten doen is een nieuwe container toevoegen met drie invoervelden in de admin.php weergave van onze plug-in. Elk van deze velden komt overeen met wat van de bovenstaande waarden.
Bekijk de onderstaande code, waarna ik het volgende zal bespreken:
Vanaf het begin moet het gemakkelijk genoeg zijn om te begrijpen:
gekenmerkte-footer-image-meta Op dit punt moeten we teruggaan naar ons JavaScript-bestand zodat we de via de Media Uploader geretourneerde informatie kunnen opnemen en de invoervelden kunnen vullen met deze informatie.
Open admin.js en voeg vervolgens de volgende drie regels toe aan de onderkant van de handlerfunctie voor het invoegen evenement (voor file_frame):
// Sla de informatie van de afbeelding op in de metagegevensvelden $ ('# footer-thumbnail-src') .val (json.url); $ ('# footer-thumbnail-title') .val (json.title); $ ('# footer-thumbnail-alt') .val (json.title);Navigeer vanaf hier naar je WordPress-dashboard, voeg een nieuw bericht toe of bewerk een bestaand bericht en je ziet zoiets als de volgende afbeelding:
Ervan uitgaande dat u al het JavaScript rechtstreeks hebt geschreven, zou u zoiets moeten zien op basis van de gegevens die u in de Media Uploader hebt opgegeven bij het selecteren van een afbeelding.
Houd er echter rekening mee dat wanneer u op "Verwijder de afbeelding" klikt de tekst blijft staan. Voordat we kijken naar het daadwerkelijk opslaan van deze informatie, laten we het JavaScript voltooien zodat het de invoervelden leegmaakt wanneer de gebruiker de afbeelding verwijdert.
Hoewel er een aantal manieren zijn om dit te doen, heb ik ervoor gekozen om de volgende code te gebruiken:
// Ten slotte stellen we de invoervelden voor meta-gegevens in $ ('# featured-footer-image-info') .children () .val (");Vergeet niet dat dit moet worden gelokaliseerd in de gebeurtenishandler voor het anker "Remove featured image". In het vorige artikel hebben we deze functie genoemd resetUploadForm.
Op dit punt zou je moeten kunnen klikken op "Remove featured image" en zien dat de afbeelding en de invoervelden worden gereset. Als je problemen hebt, bekijk je de broncode in de GitHub-repository die aan dit bericht is gekoppeld (deze bevindt zich in de hoofdtak en wordt ook getagd als 1.0.0).
Nu moeten we wat code invoeren in de plug-in die de waarden van de invoervelden opschoont, deze koppelt aan de post en opslaat in de database, zodat we de informatie onderaan elk bericht kunnen weergeven.
In de rennen functie voor Acme_Footer_Image, voeg de volgende regel code toe:
add_action ('save_post', array ($ this, 'save_post'));Vervolgens moeten we een functie definiëren die verantwoordelijk is voor het daadwerkelijk opslaan van de waarden van de invoervelden in de database. Er zijn twee dingen die u moet weten over de volgende code:
/ ** * Geautomatiseerd en slaat de metevoeggegevens van het footer-beeld met de specifieke post op die specifiek zijn voor dit bericht. * * @param int $ post_id De ID van het bericht waarmee we momenteel werken. * @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-thumbnail-title'])); if (isset ($ _REQUEST ['footer-thumbnail-alt'])) update_post_meta ($ post_id, 'footer-thumbnail-alt', sanitize_text_field ($ _REQUEST ['footer-thumbnail-alt']));
Voordat we klaar zijn om dit te testen, moeten we nog twee wijzigingen in de dashboardweergave aanbrengen voordat de afbeeldingen aan de voorkant worden weergegeven.
Ten eerste moeten we ervoor zorgen dat we de metagegevens terugmelden naar de invoervelden. Spring in de admin.php en update het nog een keer om dit op te nemen:
Hier bellen we naar de get_post_meta functie om de waarden op te halen die zijn opgeslagen met de functie die we hierboven hebben aangegeven.
Vervolgens moeten we ervoor zorgen dat we het afbeeldingselement dat we eerder in deze serie hebben gemaakt, vullen met dezelfde waarden:
Natuurlijk, als de metadata leeg is, zal niets de attributen vullen en zal de afbeelding niet worden weergegeven.
Ervan uitgaande dat alles goed gaat, zou u de afbeelding en de bijbehorende gegevens moeten zien in de invoervelden wanneer u de post opslaat. Als u de afgebeelde afbeelding verwijdert, moeten de velden worden gewist en niet meer worden weergegeven.
Voordat we verder gaan met het weergeven van de afbeelding aan de voorkant, zijn er een paar kleine dingen die we moeten doen om de weergave van de metabox schoon te maken..
Eerst moeten we ervoor zorgen dat alle invoervelden van het vorige type zijn tekst zijn van het type verborgen.
Vervolgens moeten we een kleine JavaScript-functie schrijven die de afbeelding weergeeft, ervan uitgaande dat die is opgeslagen. De functie controleert of het invoerveld voor de afbeeldings-URL geen lege tekenreeks is.
Als dit niet het geval is, wordt de afbeelding weergegeven. Dus we voegen deze functie toe aan ons JavaScript-bestand:
; ?> "<?php echo get_post_meta( $post->ID, 'footer-thumbnail-title', true); ?>")
/ ** * Controleert of het invoerveld voor de miniatuurbron een waarde heeft. * Als dat zo is, worden de afbeelding en het anker 'Verwijder uitgelichte afbeelding' weergegeven. * * Anders wordt het standaard anker gerenderd. * * @param-object $ Een verwijzing naar het jQuery-object * @since 1.0.0 * / function renderFeaturedImage ($) / * Als een miniatuur-URL is gekoppeld aan deze afbeelding * Dan moeten we de afbeelding en de reset-link weergeven . * / if ("! == $. trim ($ ('# footer-thumbnail-src') .val ())) $ ('# featured-footer-image-container') .removeClass ('hidden') ; $ ('# set-footer-thumbnail') .parent () .hide (); $ ('# remove-footer-thumbnail') .parent () .removeClass ('hidden');Roep dan de JavaScript-functie aan binnen de context van de DOM-ready-functie:
renderFeaturedImage ($);
Kortom, wanneer de pagina wordt geladen, wordt gecontroleerd of er een URL bestaat in ons invoerveld. Als dit het geval is, wordt de afbeelding gerenderd en kunnen we deze verwijderen. Anders wordt alleen het lege vak met de afgebeelde afbeelding weergegeven.
Nogmaals, als je problemen hebt met het volgen van deze code, kijk dan eens naar de bijbehorende GitHub-repository via de link in de zijbalk van deze pagina.
Op dit moment hebben we alles gedaan wat we in het dashboard moeten doen, dus het is tijd om de afbeelding aan de voorkant op de blog weer te geven. Om dit te doen, moeten we een haak opzetten waarmee verbinding wordt gemaakt de inhoud actie, controleer of er een afbeelding bestaat en voeg deze toe aan de berichtinhoud.
Om dit te doen, voegt u eerst de volgende regel toe aan de rennen methode van uw Acme_Footer_Image klasse:
add_action ('the_content', array ($ this, 'the_content'));Vervolgens moeten we een functie schrijven die verslaafd is aan deze actie. Deze functie is verantwoordelijk voor het controleren of we slechts één pagina zijn (omdat we een afbeelding niet aan het begin van een bericht willen toevoegen als een gebruiker bijvoorbeeld een meer tag als onderdeel van hun inhoud).
We doen dit met behulp van de volgende code:
/ ** * Als het huidige bericht één bericht is, controleer dan of er een uitgelichte afbeelding is. * Als dit het geval is, voegt u het bericht toe aan de berichtinhoud voordat u het bericht maakt. * * @param string $ content De inhoud van het bericht. * @since 1.0.0 * / public function the_content ($ content) // We geven alleen om het toevoegen van de afbeelding aan enkele pagina's if (is_single ()) // Om een afbeelding toe te voegen, moet er minstens een zijn een bronattribuut if ("! == ($ src = get_post_meta (get_the_ID (), 'footer-thumbnail-src', true))) // lees de overgebleven attributen, zelfs als het lege tekenreeksen zijn $ alt = get_post_meta (get_the_ID (), 'footer-thumbnail-alt', true); $ title = get_post_meta (get_the_ID (), 'footer-thumbnail-title', true); // maak het afbeeldingselement in zijn eigen container $ img_html = ''; $ img_html. = "
"; $ img_html. = '
'; // voeg het toe aan de content $ content. = $ img_html; return $ inhoud; En daarmee zouden we een volledig functionele plug-in moeten hebben met toevoeging van een uitgelichte voetnootafbeelding aan een bericht dat op één enkele berichtpagina wordt weergegeven.
In deze hele reeks hebben we veel materiaal behandeld, waarvan de minste het gebruik van de Media Uploader betrof. Hoewel dit specifieke artikel meer tijd heeft besteed aan het tonen van hoe we de gegevens van de metabox moeten verbinden met de front-end, laat het nog steeds zien hoe een praktische toepassing van de Media Uploader kan worden toegepast in de context van een plug-in.
Met dat gezegd, er is nog veel meer te leren over de Media Uploader die we in toekomstige onderwerpen zouden kunnen behandelen. Als je geïnteresseerd bent, laat het me dan weten in de reacties hieronder. Als je verder nog vragen hebt over wat je hebt gelezen of deze serie in het algemeen, kun je die ook verlaten.
Vergeet niet om de GitHub-repository voor dit project te bekijken - ik hoop dat het u goed van pas komt bij het werken met de Media Uploader in de toekomst!
"; $ img_html. = '