Share
Când a fost lansat WordPress 3.5, una dintre cele mai importante schimbări introduse a fost cea a Media Uploader. Poate că o descriere mai precisă a schimbării ar fi să se facă referire la plus a unui nou Media Uploader.
La urma urmei, vechea versiune a încărcătorului media încă mai există și poate rula una lângă alta cu biblioteca media curentă, dar este ceva ce trebuie făcut prin adăugarea și utilizarea corectă a scripturilor, a stilului și a tuturor celorlalte funcții dependente.
Ca și în cazul software-ului, caracteristicile și funcționalitatea care există pentru o cantitate semnificativă în timp pot fi respinse în favoarea noilor caracteristici sau funcționalități. În cazul nostru, Biblioteca Media nu face excepție. Deși nu mai este folosit de corecții WordPress, există o mulțime de pluginuri și alte utilități ale unor terțe părți care utilizează încă vechea versiune a Bibliotecii Media.
Provocarea care vine cu atâtea copii ale codului funcționalității mai vechi este că, atunci când vine vorba să folosim Biblioteca Media, vom ajunge probabil să găsim exemple pentru funcționalitatea mai veche.
Din moment ce noua Bibliotecă Media este ceea ce este noul standard în WordPress și din moment ce nu există o mulțime de documentație disponibilă pentru utilizarea acesteia, vom analiza funcționalitatea în următoarele câteva articole pentru a înțelege modul în care noul Media Biblioteca este construită, modul în care o putem implementa în munca noastră și cum putem profita de diversele funcționalități deja incluse în WordPress core.
Noul WordPress Media Uploader are o serie de avantaje față de versiunea precedentă:
Este important de reținut însă că versiunea cea mai recentă a încărcătorului este construită utilizând un set de tehnologii complet diferite de cele anterioare. Acest lucru înseamnă că codul pe care l-ați scris pentru a implementa gestionarea media personalizată poate funcționa (până când codul core Thickbox este depreciat), dar că va arăta și se va simți datat în comparație cu ceea ce utilizatorii se confruntă acum de câte ori își administrează mass-media în WordPress.
Înainte de a examina cum să începem să încorporăm acest lucru în propriul nostru cod și să ne creăm propria noastră implementare, este important să înțelegem fundamentul subiacente al noii biblioteci media.
Așa cum am menționat mai devreme, ediția anterioară a încărcătorului media a folosit o bibliotecă cunoscută sub numele de Thickbox pentru a crea lucrurile pe care le-am văzut, dar în cea mai recentă implementare, WordPress utilizează ambele Underscore (să nu fie confundate cu Underscore tema) și Backbone - două tehnologii JavaScript care colaborează pentru a conduce interfața cu utilizatorul și a gestiona evenimentele încărcătorului media.
Deși nu ne vom arunca adânc în niciuna dintre aceste biblioteci, este important să înțelegem rolul pe care fiecare îl joacă în Media Uploader.
În primul rând, backbone:
Backbone.js oferă structură aplicațiilor web prin furnizarea de modele cu legare la cheie și evenimente personalizate, colecții cu un API bogat de funcții enumerate, vizualizări cu manipulare declarativă a evenimentului și conectarea tuturor la API-ul existent pe o interfață RESTful JSON.
Și Underscore:
Underscore este o bibliotecă JavaScript care oferă o mizerie întreagă de ajutoare utile de programare funcțională fără a extinde obiectele încorporate. Este răspunsul la întrebarea: "Dacă stau în fața unei pagini HTML goale și doresc să încep imediat să fiu productiv, de ce am nevoie?" ... și cravata pentru a merge împreună cu tortul lui jQuery și jargonii lui Backbone.
Evident, puteți citi mai multe despre fiecare dintre acestea pe paginile lor respective, dar am vrut să le menționez acum, astfel încât atunci când ajungem să căutăm să gestionăm UI și evenimentele pentru implementarea Bibliotecii Media personalizate, avem o înțelegere mai clară cu privire la ceea ce face de fapt codul.
În cele din urmă, rețineți că aceasta este nu jQuery. Dacă sunteți obișnuit să lucrați cu biblioteca respectivă - și mulți dintre noi - aceste două biblioteci sunt complet separate. Puteți și vom folosi jQuery alături de funcționalitatea adăugată de Backbone și Underscore.
Acum, să ajungem la scrierea unui cod.
În scopul exemplului nostru, vom examina modul în care integrăm o versiune de bază a Bibliotecii Media într-o temă WordPress existentă. În scopul exemplului nostru, vom construi acest lucru ca un plugin; cu toate acestea, mediul pe care îl vom folosi constă în următoarele:
Si asta e. Restul codului vor fi conținute în plugin-ul nostru. Desigur, acest lucru ridică încă întrebarea ce plugin-ul nostru va face de fapt.
Pe scurt, vom lucra la imitarea funcționalității "Imagine recomandată" a WordPress, dar în loc să adăugăm o imagine în partea superioară a postării (sau în partea de sus a postării), vom introduce o imagine " Feature Footer Image ", care adaugă imaginea în partea de jos a postului.
Evident, funcționalitatea este trivială - accentul se pune pe implementarea noii Biblioteci Media.
Tot codul sursă va fi disponibil pentru revizuire într-un depozit GitHub asociat cu acest articol, nu ezitați să urmați împreună cu codul în timp ce articolul progresează și apoi descărcați codul pentru a studia mai mult după fiecare articol pentru o revizuire ulterioară.
În wp-content / plugins director, creați un nou director numit Acme-footer-imagine. Aici vom păstra fișierele noastre de proiect. După aceea, continuați și creați fișiere goale după cum urmează;
Accentsconagua
README.txtLICENȚĂAcme-footer-image.phpPrimele trei fișiere trebuie să fie explicative. Acme-footer-image.php fișierul este locul în care vom defini antetul pluginului și de fapt vom începe executarea pluginului. Rețineți că clasa-Acme-footer-image.php este clasa care va defini o parte din funcționalitatea inițială a plugin-ului nostru.
Apoi, creați un director din directorul plugin numit admin deoarece aici se va păstra întreaga funcționalitate a administrației noastre. Acest director ar trebui să conțină:
admin / clasa-admin-footer-image.phpadmin / js / admin.jsÎn cele din urmă, creați o vizualizari director în cadrul admin subdirector, deoarece aici este locul unde vom plasa marcajul pentru meta-caseta noastră. Vom arunca o privire mai profundă mai târziu în articol.
Într-o încercare de a ne asigura că creăm un set bine organizat de fișiere, fiecare dintre care își menține propriul set de responsabilități, vom examina în detaliu fiecare dintre aceste fișiere și vom lucra prin tutorial. Pentru moment, totuși, acest lucru ar trebui să includă tot ce avem nevoie pentru a începe.
Înainte de a începe să scrieți codul actual, să mergem mai departe și să completați câteva informații implicite începând cu CITEȘTE-MĂ.
=== Acme Footer Image === Contribuitori: tommcfarlin Donate link: http://tommcfarlin.com/ Tag-uri: imagini recomandate Necesită cel puțin: 3.9.2 Testați până la: 3.9.2 Tag-ul stabil: 0.1.0 Licență: GPLv2 sau ulterior URI de licență: http://www.gnu.org/licenses/gpl-2.0.html Adăugați o imagine recomandată în partea de jos a conținutului unei postări sau unei pagini. == Descriere == Adăugați o imagine prezentată în partea de jos a conținutului unei postări sau unei pagini. Folosit ca demo pentru un tutorial Tuts + Code. == Instalare == Această secțiune descrie modul de instalare a pluginului și funcționarea acestuia. de exemplu. 1. Încărcați "plugin-name.php" în directorul "/ wp-content / plugins /" 1. Activați plugin-ul prin meniul "Plugins" din WordPress 1. Locați "'în șabloanele dvs. == Changelog == = 0.1.0 = * Eliberare inițială
Rețineți că aceasta conține și jurnalul de modificări.
Apoi, trebuie să definim codul pentru clasa plugin-ului principal. Această clasă va fi responsabilă pentru următoarele:
În general, nu găsesc că aceasta este cea mai bună modalitate de a dezvolta pluginuri într-o manieră orientată pe obiecte, deoarece, după cum puteți vedea, această clasă face deja mai mult decât un singur lucru. Este o practică proastă; cu toate acestea, deoarece suma de cod este atât de scurtă și pentru că accentul acestei serii va fi în mare parte axat pe JavaScript care conduce biblioteca media, acesta este un sacrificiu pe care sunt dispus să-l fac.
Deci, să aruncăm o privire asupra clasei în ansamblul ei și apoi vom arunca o privire asupra unora dintre componentele individuale:
* / class Acme_Footer_Image / ** * ID-ul acestui plugin. * * @ de la 0.1.0 * @ acces privat * @var string $ nume ID-ul acestui plugin. * / nume privat $; / ** * Versiunea curentă a pluginului. * * @ de la 0.1.0 * @ acces privat * @var string $ version Versiunea pluginului * / privat $ version; / ** * Inițializează plugin-ul prin definirea proprietăților. * * @ din 0.1.0 * / funcția publică __construct () $ this-> name = 'acme-footer-image'; $ this-> version = '0.1.0'; / ** * Definește cârligele care vor înregistra și enumera JavaScriot * și caseta meta care va face opțiunea. * * @ din 0.1.0 * / funcția publică execută () add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_scripts')); add_action ('add_meta_boxes', array ($ this, 'add_meta_box')); / ** * Redă caseta meta de pe post și pagini. * * @ din 0.1.0 * / funcția publică add_meta_box () $ screens = array ('post', 'pagina'); ($ this, 'display_featured_footer_image'), ecranul $, 'side'); $ ($ this-> name, 'Footer Featured Image'; / ** * Înregistrează JavaScript pentru manipularea încărcătorului media. * * @ din 0.1.0 * / funcția publică enqueue_scripts () wp_enqueue_media (); wp_enqueue_script ($ this-> nume, plugin_dir_url (__FILE__). 'js / admin.js', array ('jquery'), $ this-> versiune, 'toate'); / ** * Redă vizualizarea care afișează conținutul căsuței meta că pentru declanșarea casetei meta. * * @param WP_Post $ post Obiectul post * @since 0.1.0 * / funcția publică display_featured_footer_image ($ post) include_once (dirname (__FILE__). /views/admin.php '); Cea mai mare parte a codului ar trebui să fie explicită prin comentarii. Dacă nu, nu ezitați să lăsați un comentariu, dar între timp, să aruncăm o privire la următoarele două domenii:
În primul rând, definiția căsuței meta.
nume, "Footer Featured Image", array ($ this, 'display_featured_footer_image'), ecranul $, 'side');
Observați aici că includem suport pentru caseta meta de pe ambele pagini și tipuri de posturi. Această funcție se referă, de asemenea, la o funcție de retur display_featured_footer_image este responsabil pentru redarea codului HTML al casetei meta:
funcția publică display_featured_footer_image ($ post) include_once (dirname (__FILE__). /views/admin.php ');
Marcajul pentru acest fișier este foarte simplu. Este o ancoră cu un ID pe care îl putem accesa prin intermediul JavaScript-ului nostru pe care îl vom examina momentan.
Setați imaginea recomandată
Și vom encrima JavaScript-ul necesar pentru încărcarea bibliotecii media.
funcția publică enqueue_scripts () wp_enqueue_media (); wp_enqueue_script ($ this-> nume, plugin_dir_url (__FILE__). 'js / admin.js', array ('jquery'), $ this-> versiune, 'toate'); Observați aici că înainte de a ne înscrie propriul JavaScript, facem apel la wp_enqueue_media. Conform Codului, această funcție:
Include toate scripturile, stilurile, setările și șabloanele necesare pentru utilizarea tuturor API-urilor JavaScript media.
Și acest lucru este necesar pentru a ne asigura că avem dependențele necesare pentru a încărca noul Media Uploader.
În continuare, să aruncăm o privire asupra JavaScript-ului pe care trebuie să-l scriem pentru a ne asigura că profităm de funcționalitatea necesară pentru configurarea Bibliotecii Media și pentru a ne asigura că aceasta se afișează atunci când utilizatorul face clic pe link-ul corespunzător.
Codul este foarte comentat, deci ar trebui să fie ușor de urmărit. Dacă nu, nu ezitați să lăsați un comentariu în feed-ul de sub post!
/ ** * Funcția de returnare a apelurilor pentru evenimentul "clic" al antetului "Set Footer Image" * în căsuța meta. * * Afișează încărcătorul media pentru selectarea unei imagini. * * @ din 0.1.0 * / funcția renderMediaUploader () 'utilizarea strict'; var file_frame, image_data; / ** * Dacă o instanță de fișier_frame există deja, atunci putem să o deschidem mai degrabă decât să creăm o instanță nouă. * / dacă (undefined! == file_frame) file_frame.open (); întoarcere; / ** * Dacă suntem atât de departe, atunci nu există o instanță, așa că trebuie să ne creați propria noastră. * * Aici folosiți biblioteca wp.media pentru a defini setările Media * Uploader. Vom opta pentru utilizarea cadrului "postare" care este un șablon * definit în nucleul WordPress și inițializează cadrul de fișier * cu starea 'insert'. * * De asemenea, nu permitem utilizatorului să selecteze mai multe imagini. * / file_frame = wp.media.frames.file_frame = wp.media (frame: 'post', starea: 'inserați', multiple: false); / ** * Configurați un handler de evenimente pentru ce să faceți atunci când o imagine a fost selectată *. * * Deoarece folosim starea 'view' atunci când inițializăm * frame_frame, trebuie să ne asigurăm că handler-ul este atașat * la evenimentul insert. * / file_frame.on ('insert', function () / ** * Vom acoperi acest lucru in versiunea urmatoare. * /); // Acum afișați fișierul_firma reală file_frame.open (); (functie ($) 'use strict'; $ (functie ((set-footer-thumbnail ')) preventDefault (); // Afișați încărcătorul media renderMediaUploader ();););) (jQuery);Rețineți că acest lucru numai afișează Biblioteca media. De fapt nu face nimic după ce am încărcat și / sau am selectat o imagine.
În cele din urmă, ultimul pas este să definiți fișierul de bază pentru bootstrap pentru a porni pluginul:
* @ licență GPL-2.0 + * @ link http://tommcfarlin.com * @copyright 2014 Tom McFarlin * * @ wordpress-plugin * Nume Plugin: Acme Footer Image * Plugin URI: TODO * Descriere: partea de jos a conținutului unei postări sau unei pagini. * Versiune: 0.1.0 * Autorul: Tom McFarlin * URI autor: http://tommcfarlin.com * Licență: GPL-2.0 + * Licență URI: http://www.gnu.org/licenses/gpl-2.0.txt * / // Dacă acest fișier este apelat direct, anulați. dacă (! definit ('WPINC')) die; / ** * Include clasa plugin-ului principal pentru executarea plugin-ului. * / require_once (plugin_dir_path (__FILE__). 'admin / class-acme-footer-image.php'); / ** * Începe execuția pluginului. * * Deoarece totul în plugin-ul este înregistrat prin intermediul cârligelor, * atunci lansarea pluginului din acest punct din fișier nu * afectează ciclul de viață al paginii. * * @ din 0.1.0 * / functie run_acme_footer_image () $ plugin = new Acme_Footer_Image (); $ Plugin-> run (); run_acme_footer_image (); Aici, totul ar trebui să fie relativ familiar: ne asigurăm că avem permisiunea de a încărca plugin-ul, vom include dependența pentru tabloul de bord, vom instanțiza widget-ul și apoi îl vom pune în mișcare.
În acest moment, citim pentru a activa pluginul. Faceți acest lucru din tabloul de bord al plugin-ului dvs. de instalare WordPress și apoi navigați la orice post sau pagină de ecran. Ar trebui să observați o "Imagine recomandată de subsol". Apoi, când faceți clic pe ancora, ar trebui să apară Biblioteca media.
Dacă nu, verificați căile pe care le-ați asociat cu fișierul JavaScript și asigurați-vă că sunt încărcate corect.
De aici, aveți libertatea de a selecta imagini și de a încărca imagini, deși nimic altceva nu vine de la asta. În următorul articol, vom examina modul în care puteți profita de datele preluate de la încărcătorul media.
Aici, am aruncat o privire la cea mai recentă versiune a WordPress Media Uploader, cum funcționează și cum putem pune o fundație pentru a profita de ea în codul nostru. În următorul articol, vom examina cum să folosim JavaScript pentru a apuca datele adăugate la Media Uploader, astfel încât noi, la rândul său, să putem face ceea ce vrem cu el.
În plus, vom examina modul în care putem introduce câmpuri suplimentare în Media Uploader folosind șabloanele existente care se livrează împreună cu WordPress core. Mai târziu, vom vedea cum putem implementa câmpuri suplimentare alături de Media Uploader pentru a salva chiar mai multe informații.
Deocamdată, jucați cu codul furnizat în acest articol, vedeți dacă puteți lucra în contextul propriilor proiecte și lăsați întrebările și / sau feedback-ul pe care îl aveți în feedul de comentarii de mai jos!
În cele din urmă, nu uitați că puteți finaliza acest cod din depozitul GitHub asociat atașat la această postare.
