So ändern Sie Bild-SRC in Data-SRC für Lazy Load mit dem image_send_to_editor-Filter

Suchen Sie nach einer Möglichkeit, das Bild-src für Lazy Load mit dem image_send_to_editor-Filter in data-src zu ändern? Es gibt wahrscheinlich ein Plugin dafür, aber wir haben einen schnellen Code-Schnipsel erstellt, den Sie verwenden können, um das Bild-src für Lazy Load in data-src zu ändern.

Anweisungen:

Sie müssen diesen Code nur zur functions.php-Datei Ihres Themes oder in ein websitespezifisches Plugin einfügen:

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 );

Dieser Schnipsel verwendet image_send_to_editor und filtert die HTML-Ausgabe, ersetzt src durch data-src und fügt dann ein neues src-Attribut mit einem Standard-Bild-Thumbnail hinzu. Dies ist eine ziemlich einfache Lösung, aber sie ermöglicht es Ihnen, die im Beitragseditor erstellte Ausgabe zu steuern, um sicherzustellen, dass Bilder, die Kunden hinzufügen, Lazy Loaded werden. Stellen Sie sicher, dass Sie die Variable $src mit der URL zu Ihrem Standard-Thumbnail-Bild aktualisieren.

Hinweis: Wenn Sie zum ersten Mal Code-Schnipsel in WordPress hinzufügen, lesen Sie bitte unseren Leitfaden, wie Sie Code-Schnipsel richtig in WordPress hinzufügen, damit Sie Ihre Website nicht versehentlich beschädigen.

Wenn Ihnen dieser Code-Schnipsel gefallen hat, sollten Sie sich unsere anderen Artikel auf der Website ansehen, wie z. B.: 50+ beste WooCommerce-Themes für Ihren Online-Shop und 7 beste WordPress-GDPR-Plugins.