Salvarea imaginilor cu aplicația WordPress Media Uploader

În această serie, analizăm modul de implementare a aplicației WordPress Media Uploader într-un plugin real. Ideea din spatele acestei serii și codul asociat este de a oferi o înțelegere clară a modului în care funcționează, a modului în care o putem folosi în viitor și a modului în care o putem încorpora în activitatea noastră.

Până în prezent, am acoperit:

1. Noțiuni de bază cu WordPress Media Uploader
2. Adăugarea și eliminarea imaginilor cu aplicația WordPress Media Uploader

Și în acele articole, am trecut prin procesul de construire a unui plugin care folosește WordPress Media Uploader pentru a introduce o imagine recomandată în subsol a postărilor din blog (și a paginilor).

Dar există o problemă: imaginea nu este salvată și nu este afișată în conținutul postării de blog asociate (sau paginii).

În acest articol, vom ridica unde am rămas și vom termina implementarea restului acestui plugin. Rețineți că presupun că ați citit cele două postări anterioare și că ați înțeles codul sursă pe care l-am acoperit până acum.

Cu asta a spus, să reluăm.

Salvarea imaginii recomandate

Cheia pentru a vă asigura că imaginea poate fi afișată pe front-end al WordPress este salvarea informațiilor despre imagine furnizate de WordPress.

În articolul precedent, am folosit câteva dintre aceste informații pentru a afișa imaginea în caseta de metașe pe care am creat-o, dar niciuna dintre aceste informații nu a fost salvată. Ca atare, imaginea nu poate fi afișată în tabloul de bord sau în partea frontală a site-ului deoarece WordPress nu-l amintește de fapt.

Suntem gata să rezolvăm asta. Mai precis, vom salva câmpuri pentru:

• Adresa URL a imaginii pentru a putea seta imaginile src atribut
• Titlul imaginii, astfel încât să putem seta imaginea Alt atribut și ca titlu atribut

Introduceți datele Meta

Primul lucru pe care trebuie să-l facem este să adăugăm un alt container cu trei câmpuri de intrare în admin.php vizualizarea pluginului nostru. Fiecare dintre aceste câmpuri va corespunde valorilor de mai sus.

Uitați-vă la codul de mai jos, după care voi elabora:

De la început, ar trebui să fie suficient de ușor să înțelegeți:

• Am introdus un container care este identificat de Featured-footer-image-meta
• Conține trei elemente de text de intrare, fiecare dintre acestea corespund atributelor elementului de imagine pe care le vom salva

În acest moment, trebuie să revenim în fișierul nostru JavaScript, astfel încât să putem lua informațiile returnate la noi prin Media Uploader și să câmpăm câmpurile de intrare cu aceste informații.

Deschis admin.js și apoi adăugați următoarele trei linii în partea de jos a funcției de manipulare pentru insert eveniment (pentru file_frame):

// Stocați informațiile imaginii în câmpurile de date meta $ ('# footer-thumbnail-src') .val (json.url); $ ('footer-thumbnail-title') .val (json.title); $ ('footer-thumbnail-alt'); val (json.title);

De aici, navigați la tabloul de bord WordPress, adăugați o postare nouă sau editați o postare existentă și ar trebui să vedeți ceva asemănător cu următoarea imagine:

Presupunând că ați scris direct JavaScript, ar trebui să vedeți ceva similar pe baza datelor pe care le-ați furnizat în Media Uploader când selectați o imagine.

Rețineți însă că atunci când dați clic pe "Eliminați imaginea recomandată", textul rămâne. Înainte de a ne uita la salvarea acestor informații, să terminăm JavaScript astfel încât să ștergă câmpurile de intrare ori de câte ori utilizatorul elimină imaginea.

Deși există câteva moduri de a face acest lucru, am optat pentru utilizarea următorului cod:

// În final, resetați câmpurile de introducere a datelor meta $ ('# featured-footer-image-info') .children () .val (");

Amintiți-vă că acest lucru trebuie să fie localizat în dispozitivul de tratare a evenimentului pentru ancora "Eliminați imaginea recomandată". În articolul precedent, am numit această funcție resetUploadForm. 

În acest moment, ar trebui să puteți face clic pe "Eliminați imaginea recomandată" și să vedeți că imaginea și câmpurile de intrare sunt resetate. Dacă întâmpinați probleme, examinați codul sursă din depozitul GitHub asociat cu această postare (va fi în sucursala principală și va fi, de asemenea, etichetat ca 1.0.0).

Salvarea datelor Meta

Acum trebuie să introduceți un cod în pluginul care va dezinstala valorile câmpurilor de intrare, le va asocia cu postul și le va salva în baza de date, astfel încât să putem afișa informațiile de la subsolul fiecărui mesaj.

În alerga funcția pentru Acme_Footer_Image, adăugați următoarea linie de cod:

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

Apoi trebuie să definim o funcție care va fi responsabilă pentru salvarea efectivă a valorilor câmpurilor de intrare în baza de date. Există două lucruri de știut despre următorul cod:

• Îndepărteazăm datele înainte de ao salva
• Suntem asociați câmpurile cu cheile pe care le vom folosi pentru a afișa imaginea pe front-end.

/ ** * Sanitizează și salvează meta datele imaginii de subsol postate în mod specific pentru această postare. * * @param int $ post_id ID-ul postului cu care lucram în prezent. * @since 0.2.0 * / funcția publică 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']));  dacă isset ($ _REQUEST ['footer-thumbnail-title'])) update_post_meta ($ post_id, 'footer-thumbnail-title', sanitize_text_field ($ _REQUEST ['footer-thumbnail-title']));  dacă isset ($ _REQUEST ['footer-thumbnail-alt'])) update_post_meta ($ post_id, 'footer-thumbnail-alt', sanitize_text_field ($ _REQUEST ['footer-thumbnail-alt'))); 

Înainte de a fi gata să testați acest lucru, trebuie să efectuăm alte două modificări în vizualizarea tabloului de bord înainte de a afișa imaginile de pe front.

În primul rând, trebuie să ne asigurăm că vom reda datele meta în câmpurile de intrare. Hop în admin.php și actualizați-l încă o dată pentru a include acest lucru:

  "/>  "/>  "/> 

Aici, suntem la un telefon get_post_meta pentru a recupera valorile salvate utilizând funcția pe care am declarat-o mai sus. 

Apoi, trebuie să ne asigurăm că vom popula elementul imagine pe care l-am creat mai devreme în această serie cu aceleași valori:

  "alt ="ID-ul, "footer-thumbnail-alt", adevărat); ?> "title ="ID, "footer-thumbnail-title", adevărat); ?> "/> 

Desigur, dacă datele meta sunt goale, atunci nimic nu va umple atributele și imaginea nu va fi afișată.

Presupunând că totul merge bine, ar trebui să vedeți imaginea și datele asociate afișate în câmpurile de introducere atunci când salvați postul. În mod similar, atunci când eliminați imaginea recomandată, câmpurile trebuie eliminate și nu mai trebuie afișate.

A curăța

Înainte de a trece la afișarea imaginii pe partea frontală, există câteva lucruri mici pe care trebuie să le facem pentru a curăța afișarea casetei meta.

În primul rând, trebuie să vă asigurați că toate câmpurile de intrare care au fost precedente de tip text sunt de tip ascuns.

  "/>  "/>  "/> 

Apoi, trebuie să scriem o mică funcție JavaScript care va afișa imaginea presupunând că a fost salvată. Funcția va verifica dacă câmpul de introducere pentru adresa URL a imaginii nu este un șir gol.

Dacă nu este, atunci acesta va afișa imaginea. Deci, adăugăm această funcție la fișierul nostru JavaScript:

/ ** * Verifică dacă câmpul de introducere pentru sursa de miniatură are o valoare. * Dacă da, atunci se afișează imaginea și ancora "Eliminați imaginea specială". * * În caz contrar, ancora standard este redată. * * @ param obiect $ O referință la obiectul jQuery * @since 1.0.0 * / function renderFeaturedImage ($) / * Dacă un URL miniatură a fost asociat cu această imagine * Apoi trebuie să afișăm imaginea și linkul pentru resetare . * / dacă ("! == $ .trim ($ ('footer-thumbnail-src') .val ())) ; $ ('# set-footer-thumbnail') .parent () .hide (); $ ('remove-footer-thumbnail').

Apoi, apelați funcția JavaScript în contextul funcției DOM-ready:

renderFeaturedImage ($);

Pe scurt, când pagina se încarcă, verifică dacă există o adresă URL în câmpul de introducere. Dacă da, face redarea imaginii și ne dă posibilitatea de ao elimina. În caz contrar, afișează doar caseta de imagine goală. 

Din nou, dacă aveți probleme la urmărirea împreună cu acest cod, asigurați-vă că verificați magazia GitHub asociată utilizând link-ul din bara laterală a acestei pagini.

Afișarea imaginii recomandate

În acest moment, am făcut tot ce trebuie să facem în tabloul de bord, deci e timpul să afișăm imaginea pe front-end pe blog. Pentru a face acest lucru, trebuie să configurați un cârlig care să se conecteze continutul , verificați dacă există o imagine și, dacă da, adăugați-o la conținutul mesajului. 

Pentru a face acest lucru, mai întâi adăugați următoarea linie la alerga metoda dvs. Acme_Footer_Image clasă:

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

Apoi, trebuie să scriem o funcție care să fie cuprinsă de această acțiune. Această funcție va fi responsabilă pentru a verifica dacă suntem doar o singură pagină (pentru că nu vrem să adăugăm o imagine la subsolul unei postări dacă un utilizator are, de exemplu, un Mai Mult etichetă ca parte a conținutului lor).

Facem acest lucru folosind următorul cod:

/ ** * Dacă postarea curentă este o singură postare, verificați dacă există o imagine prezentată. * Dacă da, adăugați-l la conținutul mesajului înainte de redarea postării. * * @ param string $ content Conținutul postului. * @ din 1.0.0 * / funcția publică the_content ($ content) // Îi pasă doar de adăugarea imaginii la pagini unice dacă (is_single ()) // Pentru a adăuga o imagine, trebuie să existe cel puțin un atribut sursă dacă ("! == ($ src = get_post_meta (get_the_ID ()," footer-thumbnail-src ")))) // citește atributele rămase chiar dacă sunt șiruri goale $ alt = get_post_meta (), 'footer-thumbnail-alt', true); $ title = get_post_meta (get_the_ID (), 'footer-thumbnail-title'
„; $ img_html. = ""$ img_html. = '
„; // adăugați-l la conținut $ content = $ img_html;  returnează conținut $; 

Și cu asta, ar trebui să avem un plug-in complet funcțional care să adauge o imagine de subsol recomandată unei postări care se redă pe o singură pagină de postare.

Concluzie

De-a lungul acestei serii am acoperit o mulțime de materiale, dintre care cel mai puțin implicat, folosind Media Uploader. Deși acest articol a petrecut mai mult timp și ne-a arătat cum să conectăm datele de la meta-box la front-end, ea demonstrează în continuare modul de aplicare a unei aplicații practice a dispozitivului Media Uploader în contextul unui plugin.

Cu asta am spus că mai sunt multe de învățat despre Media Uploader pe care am putea să le acoperim în subiecte viitoare. Dacă sunteți interesat, anunțați-ne în comentariile de mai jos. În plus, dacă aveți întrebări despre ceea ce ați citit sau despre această serie în general, nu ezitați să le lăsați pe aceleași.

Nu uitați să finalizați depozitul GitHub pentru acest proiect - sper că vă va servi bine la lucrul cu Media Uploader în viitor!