Share
În postul anterior din această serie, am început să lucrăm cu cea mai recentă versiune a WordPress Media Uploader, pentru a obține o înțelegere mai clară a modului în care începe să o integrăm în proiectele noastre.
Partea greu de a lucra cu această nouă (bine, nouă de la 3.5) caracteristică este că nu este la fel de bine documentat ca alte caracteristici. Acest lucru lasă în mod evident o mulțime de dezvoltatori - în special începători - să-și zgârie capul cu cum să începeți cu el. Cuplați cu o revizie completă a sistemului subiacent și aveți multe de acoperit.
Pe baza feedbackului din primul articol, vom examina extinderea scopului acestei serii mai mult. În acest articol, vom examina practic aplicarea funcționalității pe care am introdus-o în ultimul articol. Apoi, într-un articol de urmărire (sau poate mai mult de un articol de urmărire) vom examina mai multe dintre cele mai fine puncte ale funcționării Media Uploader.
În ultimul post, am început să lucrăm la un plugin care a introdus o "imagine de subsol recomandată" în partea de jos a fiecărei postări, dacă este selectată o imagine. Această casetă meta este disponibilă atât pentru posturile, cât și pentru posturile pentru pagini.
Până în acest moment, am adăugat cu succes caseta de meta, am lansat aplicația WordPress Media Uploader și am selectat o imagine care să fie utilizată ca imaginea noastră recomandată, însă nu am făcut nimic cu informațiile care ne-au fost returnate de la Media Uploader.
În acest post, vom continua să implementăm funcționalitatea, astfel încât să prezentăm imagini în partea de jos a postărilor noastre. După aceea, ne vom concentra atenția asupra mai multor detalii tehnice ale API-urilor disponibile.
Pentru a ridica exact unde ne-am oprit, trebuie să fim capabili să replicăm funcționalitatea oferită de caseta meta standard "Imagine recomandată". Pentru a face acest lucru:
În mod clar, ne-am desființat munca pentru noi.
Înainte de a face orice, asigurați-vă că actualizați funcția renderMediaUploader pentru a accepta $ ca parametru, astfel încât să putem folosi jQuery în toate exemplele noastre.
Declarația funcției ar trebui să arate astfel:
funcția renderMediaUploader ($) ...
Iar apelul la funcția ar trebui să arate astfel:
renderMediaUploader ($);
Acum, să începem.
După ce ați selectat o imagine din Media Uploader, datele vor fi returnate în JavaScript. În mod specific, datele vor fi returnate la noi în JSON. Acest lucru ne va permite să analizăm diferitele proprietăți ale imaginii, astfel încât să putem reda și să o salvăm împreună cu postarea noastră.
Dar mai întâi, să ne actualizăm codul. Găsiți linia de cod în admin.js care arată astfel:
Accentsconagua
file_frame.on ('insert', function () / ** * Vom acoperi acest lucru in versiunea urmatoare. * /);Și înlocuiți-l cu acest lucru:
file_frame.on ('inserați', funcția () // Citiți datele JSON returnate de Media Uploader json = file_frame.state () get ('selection') .first () toJSON ();Evident, acest lucru nu este foarte complicat; totuși, nu uitați să adăugați JSON ca o variabilă definită în partea de sus a fișierului împreună cu file_frame și image_data.
Dacă sunteți curios despre ceea ce sa întors, nu ezitați să aruncați conținutul JSON în depanatorul dvs. de consolă preferat. Nu vom face acest lucru în acest articol special, dar vom putea să facem mai mult din acest lucru în articole în viitor, detaliate.
Pentru ca noi să afișăm imaginea selectată, trebuie să ne asigurăm că avem un element de imagine în căsuța de meta care este accesibil prin intermediul JavaScript, astfel încât să putem actualiza atributele sale ori de câte ori este selectată o imagine.
În vizualizari / admin.php, să adăugăm următorul cod în șablonul nostru. Acesta conține elementul de imagine gol pe care îl vom folosi pentru a face imaginea.
Setați imaginea recomandată
![]()
Rețineți că profităm de clasa WordPress CSS ascuns pentru a ascunde recipientul. Folosind JavaScript, vom elimina această clasă pentru a afișa imaginea (și va face practic opacul pentru a ascunde imaginea și a afișa ancora pentru a selecta o imagine din nou).
Acum, putem vizita JavaScript și render imaginea ori de câte ori a fost selectat. Trebuie să facem două lucruri:
Pentru a face acest lucru, să revizuim codul JavaScript la care ne-am uitat mai devreme în articol. După ce am preluat datele JSON, asigurați-vă că avem o adresă URL a unei imagini și apoi vom continua.
fișier_frame.on ('inserați', funcția () // Citiți datele JSON returnate de la Media Uploader json = file_frame.state () get ('selectare) .first () toJSON asigurați-vă că avem adresa URL a unei imagini care să fie afișată dacă (0> $ .trim (json.url.length)) return; // După aceea, setați proprietățile imaginii și afișați-o $ ('#featured ("img") .attr ('src', json.url) .attr ('alt', json.caption) .attr ('title', json.title) .show () .parent () .removeClass ("ascuns"); // Apoi ascundeți ancora responsabilă pentru a permite utilizatorului să selecteze o imagine $ ('# featured-footer-image-container') .prev ););În mod clar, codul este comentat pentru a explica ce se întâmplă, dar ne bazăm destul de puțin pe jQuery pentru a ne asigura că arată și ascundem elementele în mod corespunzător.
În primul rând, verificăm proprietatea URL a JSON pentru a vă asigura că lungimea sa este mai mare decât zero. Îmi place să-l folosesc $ .trim pentru a face acest lucru ca o practică de codificare defensivă. Dacă este egal cu zero, atunci vom reveni pentru că nu avem nicio imagine pe care să o afișăm.
După aceasta, vom profita de noul div element pe care l-am creat în pasul anterior. Apucăm elementul imagine prin (copii) și apoi ne-am stabilit src, Alt, și titlu atribuie toate bazate pe proprietăți care sunt accesibile prin JSON obiect.
De acolo, selectăm containerul părinte al imaginii și apoi eliminăm clasa ascunsă.
La urma urmei, folosim Featured-footer-image-container element ca un punct de la care putem accesa ancora - în acest caz, este elementul anterior - și apoi îl ascundem.
În acest moment, imaginea ar trebui să apară în caseta post meta.
Dar avem o problemă evidentă: imaginea este prea mare pentru container. Aceasta înseamnă că trebuie să introducem un pic de CSS.
Pentru a face acest lucru, va trebui să adăugăm un fișier CSS și să actualizăm fișierul plugin-ului principal, astfel încât să cuprindă foaia de stil.
Mai întâi, creați o css director în dosarul plugin-ului dvs., apoi adăugați admin.css la director. În acest fișier, adăugați următorul cod:
# caracteristică-footer-imagine-container img lățime: 100%; înălțime: auto;
Apoi adăugați următoarea cârlig în alerga() funcția plugin-ului:
add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_styles'));În final, adăugați următoarea funcție:
/ ** * Înregistrează foile de stil pentru manipularea casetei meta * * @ din 0.2.0 * / funcția publică enqueue_styles () wp_enqueue_style ($ this-> name, plugin_dir_url (__FILE__) .css / admin.css ', array ));
Permițând să configurați selectorii corespunzător și că v-ați înregistrat corect și ați enumerat foaia dvs. de stil, ar trebui să vedeți ceva de genul:
Mult mai bine, nu-i așa??
Așa cum am adăugat un element pentru a afișa imaginea, trebuie să adăugăm un element care să ne permită să eliminăm și imaginea.
Pentru a face acest lucru, revizuiți vizualizari / admin.php și adăugați următorul cod:
Eliminați imaginea recomandată
Apoi, trebuie să scriem niște JavaScript suplimentar, astfel încât atunci când imaginea să fie afișată, ancora de mai sus este afișată. Pentru a realiza acest lucru, revizuiți admin.js și să adăugăm acest lucru sub codul pe care l-am adăugat mai devreme în articol:
// Afișează ancora pentru eliminarea imaginii recomandate $ ('# featured-footer-image-container') .next () .show ();Și așa cum am făcut cu ancora inițială, trebuie să setăm un handler de evenimente, astfel încât atunci când se va face clic pe ancora "șterge", imaginea va fi eliminată și va fi restabilită ancora "Set Featured Image".
Pentru a face acest lucru, revizuiți mai întâi funcția declanșată de îndată ce DOM-ul este încărcat și adăugați următorul cod:
$ ('remove-footer-thumbnail') .on ('click', function (evt) // Stop comportamentul implicit al ancorei evt.preventDefault (); );Acum trebuie să definim resetUploadForm funcția, așa că hai să facem asta acum. Rețineți că este necesar să eliminați imaginea, să ascundeți containerul "eliminați link-ul" și să restabiliți ancora de legătură "set image".
/ ** * Funcția de apel invers pentru evenimentul "clic" al antetului "Eliminați imaginea subsolului" * în caseta de meta. * * Resetează caseta meta ascunzând imaginea și ascunzând containerul "Eliminare * Subsol Footer". * * @param obiect $ O referință la obiectul jQuery * @since 0.2.0 * / funcția resetUploadForm ($) 'use strict'; // În primul rând, vom ascunde imaginea $ ('# featured-footer-image-container') .children ('img') .hide (); // Apoi afișați containerul anterior $ ('# featured-footer-image-container') .prev () .show (); // În cele din urmă, adăugăm clasa "ascunsă" înapoi la fișierul parental al ancorei $ ('# featured-footer-image-container') .next () .hide () .addClass ("ascuns"); În acest moment, avem tot ce avem nevoie pentru a selecta o imagine, a elimina o imagine și a continua să o facă.
Mai sunt încă lucruri de făcut, dar vom acoperi acest lucru în următorul articol. Între timp, nu uitați să finalizați depozitul asociat pe GitHub pentru versiunea curentă a codului sursă al acestui proiect.
Evident, am avut grijă de o mulțime de lucrări de back-end, deoarece se referă la selectarea unei imagini, afișarea unei imagini și eliminarea unei imagini, dar încă lipsește o piesă crucială de funcționalitate: Salvarea imaginii astfel încât este asociat cu postarea.
Pentru a conecta ce vizionează vizitatorul site-ului cu ceea ce am specificat în back-end, trebuie să facem ceva lucru cu salvarea datelor JSON în baza de date, dezinfectarea, recuperarea acesteia și afișarea acesteia pe partea frontală.
.
