Share
När WordPress 3.5 släpptes var en av de viktigaste förändringarna som introducerades den som för Media Uploader. Kanske en mer exakt beskrivning av förändringen skulle vara att referera till som en tillägg av en ny Media Uploader.
Den gamla versionen av Media Uploader finns trots allt fortfarande och kan köras sida vid sida med det aktuella mediebiblioteket, men det är något som måste göras genom korrekt tillägg och användning av skript, stil och all annan beroende funktionalitet.
Precis som med allt i programvara, funktioner och funktionalitet som finns i betydande tid, utsätts för att avlägsnas till förmån för nya funktioner eller funktionalitet. I vårt fall är mediebiblioteket inget undantag. Fast det inte längre används av WordPress-kärnan finns det många plugins och andra verktyg från tredje part som fortfarande använder den gamla versionen av mediebiblioteket.
Utmaningen som kommer med att ha så många kopior av den äldre funktionalitetens kod är att när det kommer dags att använda sig av mediebiblioteket, kommer vi sannolikt att sluta hitta exempel på den äldre funktionaliteten.
Eftersom det nya mediebiblioteket är vad som är den nya standarden i WordPress, och eftersom det inte finns mycket dokumentation tillgänglig för hur man använder den, kommer vi att titta på funktionaliteten över de närmaste artiklarna för att förstå hur det nya Media Biblioteket är byggt, hur vi kan implementera det i vårt eget arbete och hur vi kan utnyttja de olika funktioner som redan ingår i WordPress-kärnan.
Den nya WordPress Media Uploader har ett antal fördelar jämfört med tidigare iteration:
Det är dock viktigt att notera att den senaste versionen av uppladdaren är uppbyggd med en uppsättning helt olika tekniker än de tidigare. Det innebär att koden som du en gång skrev för att genomföra anpassad mediahantering fortfarande kan fungera (tills kärnan Thickbox-koden är bortskriven) men att den kommer att se ut och känna daterad i jämförelse med vad användarna nu upplever när de hanterar sina medier inom Wordpress.
Innan vi tittar på hur man börjar integrera detta i vår egen kod och skapa vår egen implementering är det viktigt att förstå den underliggande grunden för det nya mediebiblioteket.
Som tidigare nämnts använde den tidigare upplagan av medieuppladdaren ett bibliotek som var känt som Thickbox för att skapa de saker som vi har sett, men i den senaste implementeringen använder WordPress båda Underscores (inte att förväxlas med Underscore tema) och Backbone - två JavaScript-tekniker som fungerar tillsammans för att driva användargränssnittet och hantera händelserna i mediauppladdaren.
Även om vi inte tar ett djupt dykk i någon av dessa bibliotek är det viktigt att förstå den roll som varje spelar i Media Uploader.
Först, ryggraden:
Backbone.js ger strukturen till webbapplikationer genom att tillhandahålla modeller med viktiga bindande och anpassade händelser, samlingar med ett rikt API med många funktioner, synpunkter med declarative händelsehantering och kopplar alla till ditt befintliga API över ett RESTful JSON-gränssnitt.
Och Underscore:
Underscore är ett JavaScript-bibliotek som ger en hel röra av användbara funktionella programmeringshjälpmedel utan att utvidga några inbyggda objekt. Det är svaret på frågan: "Om jag sätter mig ner framför en tom HTML-sida och vill börja bli produktiv omedelbart, vad behöver jag?" ... och slipset att följa med jQuery's tux och Backbone's suspenders.
Självklart kan du läsa mer om var och en av dessa på deras respektive sidor, men jag ville nämna dem nu så att vi när vi klarar av att hantera användargränssnittet och händelserna för vårt anpassade Media Library-genomförande, har en tydligare förståelse för vad koden faktiskt gör.
Slutligen notera att detta är inte jQuery. Om du är van att arbeta med det biblioteket - och många av oss är - dessa två bibliotek är helt separata. Du kan - och vi kommer - använda jQuery tillsammans med funktionaliteten tillagt Backbone och Underscore.
Nu, låt oss faktiskt få skriva några koden.
I vårt exempel ska vi titta på hur vi går över att integrera en grundläggande version av mediebiblioteket i ett befintligt WordPress-tema. I vårt exempel ska vi bygga detta som ett plugin; Den miljö som vi ska använda består emellertid av följande:
Och det är allt. Resten av koden kommer att finnas i vårt plugin. Det här förstås naturligtvis fortfarande frågan Vad vårt plugin kommer faktiskt att göra.
Kortfattat kommer vi att arbeta för att efterlikna "Featured Image" -funktionen i WordPress, men snarare än att lägga till en bild till toppen av inlägget (eller nära toppen av posten) ska vi introducera en " Utvalda Footer Image 'som lägger till bilden längst ner i posten.
Självklart är funktionaliteten trivial - tonvikten ligger på att implementera det nya mediebiblioteket.
All källkod kommer att göras tillgänglig för granskning i ett GitHub-arkiv i samband med den här artikeln. Följ gärna med koden när artikeln fortskrider och ladda sedan koden för att studera mer efter varje artikel för ytterligare granskning..
I wp-content / plugins katalog, skapa en ny katalog som heter acme-footer-bild. Det är här vi håller våra projektfiler. Därefter fortsätt och skapa tomma filer enligt följande:
Accentsconagua
README.txtLICENSacme-footer-image.phpDe tre första filerna ska vara självförklarande. De acme-footer-image.php filen är där vi definierar pluginhuvudet och faktiskt börjar exekvera pluginprogrammet. Anteckna det klass-acme-footer-image.php är klassen som kommer att definiera några av de ursprungliga funktionerna i vårt plugin.
Skapa sedan en katalog i den pluginkatalog som heter administration som det här är all vår administration funktionalitet kommer att behållas. Den här katalogen ska innehålla:
admin / klass-admin-footer-image.phpadmin / js / admin.jsSlutligen skapa en visningar katalog i administration underkatalog som det är här vi ska placera markeringen för vår meta box. Vi tar en titt på detta på djupet senare i artikeln.
I ett försök att se till att vi skapar en välorganiserad uppsättning filer där var och en som behåller sin egen uppsättning ansvar tittar vi på varje av dessa filer mer djupt och vi arbetar igenom handledningen. För tillfället måste det emellertid innehålla allt vi behöver för att komma igång.
Innan vi börjar skriva in den faktiska koden, låt oss gå vidare och fylla i några av standardinformationen som börjar med README.
=== Acme Footer Image === Bidragsgivare: tommcfarlin Donera länk: http://tommcfarlin.com/ Tags: featured images Kräver åtminstone: 3.9.2 Testas upp till: 3.9.2 Stabil tag: 0.1.0 Licens: GPLv2 eller senare Licens URI: http://www.gnu.org/licenses/gpl-2.0.html Lägg till en featured bild längst ner på innehållet i ett inlägg eller en sida. == Beskrivning == Lägg till en utrustad bild längst ner på innehållet i ett inlägg eller en sida. Används som en demo för en Tuts + Code-handledning. == Installation == Det här avsnittet beskriver hur du installerar pluginet och får det att fungera. t.ex. 1. Ladda upp 'plugin-name.php' till katalogen '/ wp-content / plugins /' 1. Aktivera pluginet via menyn 'Plugins' i WordPress 1. Placera ''i dina mallar == Changelog == = 0.1.0 = * Initial release
Observera att detta också innehåller ändringsloggen.
Därefter måste vi definiera koden för core plugin-klassen. Denna klass kommer att ansvara för följande:
Generellt sett finner jag inte att detta är det bästa sättet att utveckla plugins på ett objektorienterat sätt eftersom, som du kan se, gör denna klass redan mer än en sak. Det är dålig övning Men eftersom mängden kod är så kort och eftersom betoningen i denna serie i stor utsträckning är inriktad på JavaScript som driver mediebiblioteket, är detta ett offer jag är villig att göra.
Så låt oss ta en titt på klassen i sin helhet och sedan tittar vi på några av de enskilda komponenterna:
* / klass Acme_Footer_Image / ** * ID för denna plugin. * * @since 0.1.0 * @access privat * @var-sträng $ name ID för denna plugin. * / privat $ namn; / ** * Den aktuella versionen av plugin. * * @since 0.1.0 * @access privat * @var string $ version versionen av plugin * / private $ version; / ** * Initierar plugin genom att definiera egenskaperna. * * @since 0.1.0 * / public function __construct () $ this-> name = 'acme-footer-image'; $ this-> version = '0.1.0'; / ** * Definierar krokarna som kommer att registreras och förneka JavaScriot * och meta-rutan som gör alternativet. * * @since 0.1.0 * / public function run () add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_scripts')); add_action ('add_meta_boxes', array ($ this, 'add_meta_box')); / ** * Ger metaboxen på posten och sidorna. * * @since 0.1.0 * / public function add_meta_box () $ screens = array ("post", "sida"); foreach ($ skärmar som $ skärm) add_meta_box ($ this-> name, "Footer Featured Image", array ($ this, 'display_featured_footer_image'), $ skärm, 'sida'); / ** * Registrerar JavaScript för att hantera mediauppladdaren. * * @since 0.1.0 * / public function enqueue_scripts () wp_enqueue_media (); wp_enqueue_script ($ this-> namn, plugin_dir_url (__FILE__). 'js / admin.js', array ('jquery'), $ this-> version, 'all'); / ** * Ger visningen som visar innehållet för metakassen som för att utlösa * metaboxen. * * @param WP_Post $ post Postobjektet * @since 0.1.0 * / public function display_featured_footer_image ($ post) include_once (dirname (__FILE__). '/views/admin.php'); Det mesta av koden borde vara självklarande genom kommentarerna. Om inte, tveka inte att lämna en kommentar, men under tiden tar vi en titt på följande två områden:
Först definitionen av metaboxen.
namn, "Footer Featured Image", array ($ this, 'display_featured_footer_image'), $ skärm, 'sida');
Lägg märke till att vi inkluderar support för metakassetten på båda sidorna och posttyperna. Denna funktion avser även en återuppringningsfunktion display_featured_footer_image som ansvarar för att göra meta-boxens HTML:
offentlig funktion display_featured_footer_image ($ post) include_once (dirname (__FILE__). '/views/admin.php');
Markeringen för den här filen är väldigt enkel. Det är ett ankare med ett ID som vi kan komma åt via vår JavaScript som vi tar en titt på tillfälligt.
Ange en vald bild
Och vi kommer att förutse JavaScript som behövs för att ladda upp mediebiblioteket.
offentliga funktionen enqueue_scripts () wp_enqueue_media (); wp_enqueue_script ($ this-> namn, plugin_dir_url (__FILE__). 'js / admin.js', array ('jquery'), $ this-> version, 'all'); Observera här innan vi registrerar vår egen JavaScript, vi ringer till wp_enqueue_media. Enligt Codex, denna funktion:
Skräddarsy alla skript, stilar, inställningar och mallar som behövs för att använda alla JavaScript API-skivor för media.
Och detta är nödvändigt för att se till att vi har de beroenden som krävs för att ladda upp den nya Media Uploader.
Låt oss sedan titta på JavaScript som vi behöver skriva för att se till att vi utnyttjar den funktionalitet som är nödvändig för att installera mediebiblioteket och för att se till att det visas när användaren klickar på rätt länk.
Koden är tungt kommenterad, så det ska vara lätt att följa. Om inte, tveka inte att lämna en kommentar i flödet under posten!
/ ** * Återuppringningsfunktion för "klicka" händelsen i "Set Footer Image" * ankare i sin meta box. * * Visar mediauppladdaren för att välja en bild. * * @since 0.1.0 * / function renderMediaUploader () 'använd strikt'; var file_frame, image_data; / ** * Om en förekomst av file_frame redan finns kan vi öppna den * snarare än att skapa en ny instans. * / if (undefined! == file_frame) file_frame.open (); lämna tillbaka; / ** * Om vi är så här, finns det inte en förekomst, så vi måste * skapa vår egen. * * Använd här biblioteket wp.media för att definiera inställningarna för Media * Uploader. Vi väljer att använda rammen "inlägg" som är en mall * definierad i WordPress-kärnan och initierar filramen * med "insert" -statusen. * * Vi tillåter inte heller att användaren väljer mer än en bild. * / file_frame = wp.media.frames.file_frame = wp.media (ram: 'post', state: 'insert', multipel: false); / ** * Ställ in en händelsehanterare för vad som ska göras när en bild har valts *. * * Eftersom vi använder "visa" -status när du initialiserar * filen_frame, måste vi se till att hanteraren är bifogad * till insättningsevenemanget. * / file_frame.on ('insert', funktion () / ** * Vi täcker detta i nästa version. * /); // Visa nu den aktuella filen_frame file_frame.open (); (funktion ($) 'använd sträng'; $ (funktion () $ ('# set-footer-miniatyrbild') .on ('klick', funktion (evt) // Stäng ankarets standardbeteende evt. preventDefault (); // Visa media uppladdaren renderMediaUploader ();););) (jQuery);Observera att detta endast visar mediebiblioteket. Det gör faktiskt ingenting när vi har laddat upp och / eller valt en bild.
Slutligen är det sista steget att definiera vår grundläggande bootstrap-fil för att starta plugin:
* @license GPL-2.0 + * @link http://tommcfarlin.com * @copyright 2014 Tom McFarlin * * @ wordpress-plugin * Plugin-namn: Acme Footer-bild * Plugin URI: TODO * Beskrivning: Lägger till en utvald bild på botten av innehållet i ett inlägg eller en sida. * Version: 0.1.0 * Författare: Tom McFarlin * Författare URI: http://tommcfarlin.com * Licens: GPL-2.0 + * Licens URI: http://www.gnu.org/licenses/gpl-2.0.txt * / // Om den här filen heter direkt, avbryt. om (! definierat ('WPINC')) die; / ** * Innehåller kärnproppklassen för att exekvera plugin. * / require_once (plugin_dir_path (__FILE__). 'admin / class-acme-footer-image.php'); / ** * Börjar exekvering av plugin. * * Eftersom allt i plugin är registrerat via krokar, så * påverkar inte pluginprogrammet från den här punkten i filen * livscykeln för sidan. * * @since 0.1.0 * / function run_acme_footer_image () $ plugin = nya Acme_Footer_Image (); $ Plugin-> run (); run_acme_footer_image (); Här ska allt vara relativt bekant: Vi ser till att vi har behörighet att ladda pluginet, vi inkluderar beroende av instrumentpanelen, vi instanserar widgeten och sedan sätter vi den i rörelse.
Vid denna punkt läser vi för att aktivera plugin. Gör det från pluginens instrumentpanel i din WordPress-installation och navigera sedan till vilken post- eller sidskärm som helst. Du bör lägga märke till en "Footer Featured Image". När du klickar på ankaret, så ska mediebiblioteket visas.
Om inte, dubbelkontrollera de banor som du har kopplat till dig JavaScript-fil och se till att de laddas korrekt.
Härifrån kan du välja bilder och ladda upp bilder, men inget annat kommer från det. I nästa artikel ska vi titta på hur man utnyttjar de data som hämtats från mediauppladdaren.
Här tog vi en titt på den senaste iterationen av WordPress Media Uploader, hur det fungerar och hur vi kan lägga en grund för att utnyttja den i vår kod. I nästa artikel ska vi titta på hur man använder JavaScript för att ta tag i de data som lagts till Media Uploader så att vi i sin tur kan göra vad vi vill ha med det.
Dessutom ska vi titta på hur vi kan införa ytterligare fält i Media Uploader med hjälp av befintliga mallar som skickas med WordPress-kärnan. Och senare ska vi se hur vi kan implementera ytterligare fält vid sidan av Media Uploader för att spara ännu mer information.
För att börja spela med koden i den här artikeln, se om du kan få den att fungera inom ramen för dina egna projekt, och lämna och frågor och / eller feedback som du har i kommentarspåret nedan!
Slutligen glöm inte att du kan kolla denna kod från det tillhörande GitHub-arkivet som bifogas detta inlägg.
