修改 WordPress get_image_tag输出 - Modify Wordpress get_image_tag output?

Modify Wordpress get_image_tag output?

本文关键字：tag 输出 image 修改 get WordPress | 更新日期: 2023-09-27

根据jQuery.lazyload，任何我想"lazyload"的图像都需要将src属性替换为data-original。

我

假设我可以使用WordPress get_image_tag过滤器来做到这一点，但我被困在如何实际实现它。

function image_src( $id, $alt, $title, $align, $size ) {
    $html = '<img data-orginial="' . esc_attr($img_src) . '"/>';
    return $html;
}
add_filter( 'get_image_tag', 'image_src', 10, 5 );

为了使 lazyload 正常工作，还需要将 lazy 类放置在 IMG 上，我设法使用 WordPress get_image_tag_class 过滤器开始工作。

function image_class( $classes ) {
    return $classes . ' lazy';
}
add_filter( 'get_image_tag_class', 'image_class' );

关于如何更改 IMG 输出以替换data-orginial而不是src的任何想法？

Rich-

我遇到了同样的问题，走上了和你一样的道路，试图使用get_image_tag结果不佳。所以我想出了一个JS解决方法 - 代码注释应该向您展示如何使其工作：

function() {
  // To get lazy loading working on blog post
  // 1- Assign all image source paths into a sourcePath variable
  var sourcePath = $("figure").find("img").attr("src");
  // 2- Nullify source paths, move path to data-original attribute and add lazy-load class to img
  $("figure").find("img").attr({
    "src" : " ",
    "data-original" : sourcePath
  }).addClass("lazy-load");
  // 3- Applies lazy-loading jQuery plugin to image elements
  $("img.lazy-load").lazyload({
    effect : "fadeIn"
  });
}

您需要

更换src部分

function image_src( $id, $alt, $title, $align, $size ) {
  if( ! is_admin() ) $html = str_replace("img src=","img data-original=",$html);
  return $html;
}
add_filter( 'get_image_tag', 'image_src', 10, 5 );

您可能需要对其进行调整以使其与原始<img>设置匹配。

编辑：添加了Nath的建议。