Cum să schimbați SRC-ul imaginii în Data-SRC pentru Lazy Load folosind filtrul image_send_to_editor

Căutați o modalitate de a schimba imaginea src în data-src pentru lazy load folosind filtrul image_send_to_editor? Deși probabil există un plugin pentru asta, am creat o scurtă secvență de cod pe care o puteți folosi pentru a schimba imaginea src în data-src pentru lazy load.

Instrucțiuni:

Tot ce trebuie să faceți este să adăugați acest cod în fișierul functions.php al temei dvs. sau într-un plugin specific site-ului:

function example_lazy_load($html, $id, $caption, $title, $align, $url) {
  $src  = 'src="'.get_template_directory_uri().'/i/thumb.png"';
  $html = str_replace( "<img src", "<img {$src} data-src", $html );
  return $html;
}
add_filter( 'image_send_to_editor', 'example_lazy_load', 10, 9 );

Această secvență folosește image_send_to_editor și va filtra ieșirea HTML înlocuind src cu data-src, apoi adaugă un nou atribut src cu o miniatură implicită a imaginii. Aceasta este o soluție destul de simplă, dar vă permite să controlați ieșirea creată în editorul dvs. de postări pentru a vă asigura că imaginile adăugate de clienți sunt încărcate lent. Asigurați-vă că actualizați variabila $src cu URL-ul imaginii dvs. miniatură implicite.

Notă: Dacă aceasta este prima dată când adăugați fragmente de cod în WordPress, consultați ghidul nostru despre cum să adăugați corect fragmente de cod în WordPress, pentru a nu vă defecta accidental site-ul.

Dacă v-a plăcut această secvență de cod, vă rugăm să luați în considerare vizionarea celorlalte articole de pe site, cum ar fi: 50+ cele mai bune teme WooCommerce pentru magazinul dvs. online și 7 cele mai bune plugin-uri WordPress GDPR.