Wordpress优化文章图片属性并使用lazyload延迟加载

优化Wordpress图片结构

Wordpress图片移除无用属性,如:class、src、alt、width、height,仅保留src、alt。

Wordpress默认图片属性

<img class="alignnone size-full wp-image-123" src="图片地址" alt="图片描述" width="430" height="280" />

优化后

<img src="图片地址" alt="图片描述" />

将下面代码放入当前主题functions.php中

//删除图像属性
add_filter( 'post_thumbnail_html', 'windxx_remove_images_attribute', 10 );
add_filter( 'image_send_to_editor', 'windxx_remove_images_attribute', 10 );
function windxx_remove_images_attribute( $html ) {
    $html = preg_replace( '/width="(\d*)"\s+height="(\d*)"\s+class=\"[^\"]*\"/', "", $html );
    $html = preg_replace( '/  /', "", $html );
    return $html;
}

Wordpress图片自动添加alt属性

Wordpress图片的alt默认是空白的,需要在添加图片时一起写入,将下面代码放入当前主题functions.php中,图片alt属性默认设置为文章标题。

//Wordpress图片自动添加alt属性
add_filter( 'the_content', 'image_alt');function image_alt($c) {global $post;$title = $post->post_title;$s = array('/src="(.+?.(jpg|bmp|png|jepg|gif))"/i'=> 'src="$1" alt="'.$title.'"');foreach($s as$p => $r){$c = preg_replace($p,$r,$c);}return$c;}

Wordpress文章图片使用lazyload延迟加载

WordPress图片延迟加载的介绍

预加载,顾名思义,在超出网站可视范围内,图片不做加载,等到用户滚动浏览器窗口,图片元素到达可视范围内,开始加载图片,这样的方式可以打打的节省网站的资源和加快网站加载的速度,所以对于图片较多的wordpress网站来说,图片预加载功能还是非常的好的。

lazyload默认的图片结构

<img class="lazy" data-original="img/example.jpg" src="loading.gif">

data-original属性为图片真实的url地址,src属性为图片加载显示前的占位图片

引入lazyload必须的js文件

将下面代码添加到当前主题的footer.php文件中

<script src="https://cdnjs.loli.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$(function() {
    $("img").lazyload({
        effect:"fadeIn"
    });
});
</script>

自动修改文章图片属性为lazyload需要值

将下面代码放入当前主题functions.php中

//图片延迟加载
add_filter ('the_content', 'lazyload');
function lazyload($content) {
    $loadimg_url=get_bloginfo('template_directory').'/images/loading.gif';
    if(!is_feed()||!is_robots) {
        $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"$loadimg_url\"\$3>\n<noscript>\$0</noscript>",$content);
    }
    return $content;
}

Wordpress图片启动lazyload延迟加载后SEO问题

图片使用lazyload延迟加载后肯定的对SEO有所影响的,但是用户体验会有所上升,鱼和熊掌无法兼得,可以在网站不是很重要的内容上,如:头像图片等上面启用lazyload,还是不错的选择。

参考资料:

http://www.2zzt.com/jcandcj/7050.html

http://www.wazhuti.com/873.html

https://www.xuewangzhan.com/wpbbs/1964.html


 上一篇
 利用Cloudflare把网站IP换成1.1.1.1/1.0.0.1 利用Cloudflare把网站IP换成1.1.1.1/1.0.0.1
近日,Cloudflare官方发文,与APNIC官方合作打算用IP1.1.1.1推出速度更快、私密性更强的DNS Cloudflare 运行全球规模最大、速度最快的网络之一。 APNIC 是一个非营利组织,管理着亚太和大洋洲地区的 IP
2018-10-26
下一篇 
 注册Google账号提示“此号码不能用于验证”的解决办法 注册Google账号提示“此号码不能用于验证”的解决办法
1、下载个蓝灯开代理访问(下载后直接安装运行即可)。下载地址点这里,或者选择其他科学上网软件。 2、访问 https://whatismyipaddress.com/ 查看代理的真实地理位置(需要将这个网址添加到代理列表中),我现在检测到
2018-09-28
  目录