Utilizați noul plugin gratuit (gratuit) pentru imagini audio pentru a adăuga audio la imaginile dvs. WordPress

Dacă o imagine valorează o mie de cuvinte, o imagine sincronizată cu audio trebuie să merite … ei bine, mai mult de o mie de cuvinte, nu? Adică, adăugarea de povești audio pentru imaginile WordPress este o modalitate îngrijită de a adăuga un anumit context imaginilor pe care le utilizați pe site-ul dvs. Ce vreau să spun prin „povești audio”? Practic, un clip audio care este sincronizat cu o imagine individuală pe site-ul dvs. WordPress. În această postare, vă voi arăta exact ce vreau să spun prin povești audio pentru WordPress. Apoi, voi intra în modul în care le puteți adăuga pe propriul site folosind un plugin gratuit numit Audio Story Images.

Ce fac imaginile din povestea audio? După cum am spus, Audio Story Images vă permite să sincronizați fișierele audio cu imaginile dvs. Utilizatorii vor vedea o pictogramă audio în colțul din stânga sus al imaginilor selectate. Și dacă fac clic pe pictogramă, sunetul va începe instantaneu redarea: Utilizările potențiale sunt destul de îngrijite. Văd utilizări atât artistice, cât și practice:

• Pe plan artistic, puteți adăuga narațiuni care să explice semnificația și inspirația din spatele fiecărei piese de artă postate pe site-ul dvs. Sau, puteți adăuga muzică și puteți crea o experiență captivantă pentru a vă însoți arta.
• Pe plan practic, ați putea adăuga voci în afara imaginilor tutoriale. Deci, în loc să includeți doar o imagine care să le spună oamenilor unde să facă clic, puteți adăuga rapid o narațiune vocală care să explice întregul proces.

Sunt sigur că vă puteți gândi la o mulțime de alte utilizări de nișă și pentru această funcționalitate. Lista mea nu este deloc cuprinzătoare!

Înainte de a începe – O avertizare Înainte de a vă arăta cum să utilizați acest plugin, vreau să conduc cu o avertizare rapidă: Acest plugin este destul de nou și nu are o bază imensă de instalare. Îl prezentăm, deoarece credem că funcționalitatea este foarte simplă și, din câte știm, nu există alte pluginuri care să ofere ceva similar. Acestea fiind spuse, pentru că nu a fost pus „prin sonerie”, ca să spunem așa, nu vrem să îl susținem pe deplin. În plus, dezvoltatorul pare să răspundă la câteva fire de asistență care există. Și jucând cu pluginul, nu am întâmpinat probleme. Cum se utilizează imagini de poveste audio Îți voi arăta cum să folosești mai întâi Audio Story Images cu editorul obișnuit WordPress. Apoi, voi afla cum funcționează cu Divi.

Pentru a începe, începeți prin instalarea și activarea imaginilor Audio Story. După ce l-ați activat, sunteți gata să intrați direct. Adică nu există setări de configurat. Pluginul funcționează astfel: Adăugați atât o imagine cât și un fișier audio în biblioteca dvs. media. Apoi, sincronizați aceste două fișiere în interfața normală a Bibliotecii media. Și apoi pentru a insera o poveste audio în postarea ta, trebuie doar să folosești butonul normal Adăugare media din Editorul WordPress. Iată cum să o faci pas cu pas … Începeți prin a încărca cel puțin o imagine și un fișier audio în biblioteca dvs. media. Apoi, accesați Media → Library . Asigurați-vă că utilizați vizualizarea Listă , nu vizualizarea Grilă . Ar trebui să vedeți o nouă coloană Audio Story . Doar faceți clic pe Atașare lângă imaginea la care doriți să adăugați sunet:

Apoi, va apărea o fereastră cu toate fișierele audio din biblioteca dvs. media. Selectați caseta radio de lângă fișierul audio ales și apoi faceți clic pe Selectare : După ce ați conectat imaginea și fișierul audio, coloana Povestea audio ar trebui să se actualizeze pentru a reflecta relația respectivă: Acum, tot ce trebuie să faceți este să inserați acea imagine în orice postare sau pagină folosind butonul normal Adăugați media : Și când publicați postarea, ar trebui să vedeți pictograma audio pe imaginea dvs.: Destul de simplu, nu? Dar funcționează cu Divi Builder? Să aflăm… Imaginile cu povești audio funcționează cu Divi? Da și nu. Vezi, am primit Audio Story Images pentru a juca frumos cu Divi, dar nu așa cum te-ai putea aștepta.

Bineînțeles, primul lucru pe care l-am testat a fost doar utilizarea unui modul de imagine Divi obișnuit pentru a insera același fișier de imagine din biblioteca mea media. Acest lucru, din păcate, nu a funcționat. Imaginea a apărut, dar nu sunet. Dar apoi am citit firele de suport ale pluginului și mi-am dat seama că autorul pluginului utilizează practic JavaScript pentru a suprapune pictograma audio de pe imagine. Și asta mi-a dat o altă idee … Ce se întâmplă dacă am luat codul din primul meu exemplu și l-am introdus într-un modul de cod Divi? Și bingo, asta a funcționat! Apoi, după ce mi-am dat seama de această metodă, mi-a venit o altă idee – ce se întâmplă dacă folosesc doar un modul text Divi obișnuit și folosesc butonul Adăugare media acolo? Și și asta a funcționat!

Așadar, vă voi arăta ambele moduri în cazul în care unul funcționează mai bine pentru dvs. Prima metodă este ușoară – trebuie doar să adăugați un modul de text normal și să utilizați butonul Adăugare media pentru a insera imaginea: Nu veți vedea pictograma audio în Visual Builder, dar ar trebui să apară în versiunea publicată a paginii dvs. A doua metodă este mai complicată. Dar este o practică bună pentru a stăpâni Instrumentele pentru dezvoltatori Chrome, așa că cred că merită încercat! Pasul 1: Creați o schiță a unei postări folosind editorul WordPress obișnuit. Introduceți o imagine așa cum v-am arătat în exemplul de mai sus și apoi previzualizați schița. Asigurați-vă că singurul conținut din postarea dvs. este imaginea. Acest lucru va facilita preluarea codului HTML în pasul următor.

Pasul 2: în previzualizarea schiței, faceți clic dreapta pe imaginea povestirii audio și alegeți Inspectare dacă utilizați Chrome (sau Inspectare element în Firefox). Consultați ghidul nostru despre utilizarea funcției Inspectare a instrumentelor pentru dezvoltatori Chrome dacă aveți nevoie de ajutor: Pasul 3: ar trebui să vedeți o fereastră în partea dreaptă a ecranului care conține o mulțime de cod evidențiat: Căutați < div class = "entry-content" > eticheta, faceți clic dreapta pe ea și selectați Editați ca HTML :