萨龙网络
登录
首页-WordPress文章-WooCommerce-正文

为woocommerce商城添加图片延迟(lazyload)加载功能

萨龙龙萨龙龙
WooCommerce
10年前
0
0
1.27W
为woocommerce商城添加图片延迟(lazyload)加载功能wordpress图片延迟加载已经不是稀奇的功能,网上有很多类似的文章,添加相当简单方便,woocommerce缩略图图片延迟加载也很方便的可以实现。 最近一直在开发集成woocommerce的主题,遇到很多问题,都得解决,但国内这方面的资料太少,所以基本上都是在google上找到完美的解决方法。 前提是主题中集成了图片延迟加载功能,网上教程很多。 woocommerce的缩略图修改代码不容易,而且缩略图代码不是在模板中,只好通过程序来添加。WP插件中有专门为woocommerce开发的插件Lazy Load for WooCommerce,使用插件也相当的方便,启用后设置下图片的大小以及默认图片的地址就可以工作,如果不使用插件就把以下代码添加到functions.php中一样完美的工作(代码取自Lazy Load for WooCommerce)。 代码中的“图片地址”修改成你的默认缩略图地址
  1. //为商城添加图片延迟加载
  2. if (!function_exists('woocommerce_template_loop_product_thumbnail')) {
  3.     function woocommerce_template_loop_product_thumbnail() {
  4.         $llwoo_image_src = wp_get_attachment_image_src(get_post_thumbnail_id(), 'shop_catalog');
  5.         $llwoo_placeholder = '图片地址';
  6.         $llwoo_placeholder_fallback = woocommerce_placeholder_img_src();
  7.         if (!emptyempty($llwoo_placeholder)) {
  8.             echo '<img src="' . $llwoo_placeholder . '" data-original="' . $llwoo_image_src[0] . '">';//默认图片不为空,则输出
  9.         } else {
  10.             echo '<img src="' . $llwoo_placeholder_fallback . '" data-original="' . $llwoo_image_src[0] . '">';//如果默认图片为空,则输出woocommerce默认的缩略图
  11.         }
  12.     }
  13. }
[successbox]这样商城列表中的缩略图都能实现图片延迟加载,好激动又实现了一个实用的功能,来试试吧?[/successbox]
标签:
本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/woocommerce-lazyload.html
萨龙龙

萨龙龙

侠客
一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1342.12M346.31W3.40W
分享:
萨龙网络集成Buddypress+Bbpress社区论坛功能
萨龙网络集成Buddypress+Bbpress社区论坛功能上一篇
如何把WordPress数据迁移至WordPress MU下一篇
如何把WordPress数据迁移至WordPress MU
相关文章
总数:19

Woocommerce一个很漂亮的购物系统

Woocommerce,一个wordpress的电子商务扩展插件,一个很漂亮的可以帮你卖任何东西的工具,这是插件在wordpress后台插件中的…
萨龙龙萨龙龙
WooCommerce
11年前
0
0
1.47W
0

WordPress为所有文章自动添加自定义字段

Sixianqiu主题是专为诗歌设计开发的主题,有一些朋友也需要这样的多形式博客主题,就整理出来了。一开始所有的文章内容都是居中显示,这样对于其…
萨龙龙萨龙龙
WooCommerce
8年前
0
0
1.57W
0

WooCommerce 3 更新后特色产品的获取方法

WooCommerce已经是WordPress平台最好最强大的在线商城插件,已经被WordPress收购,更新速度比较频繁,功能更加完…
萨龙龙萨龙龙
WooCommerce
7年前
0
0
1.10W
0

自定义WooCommerce产品文章hook顺序

最近在做一款企业产品展示的商城网站,设计WooCommerce产品文章的布局与默认的布局有很大的不同,所以其中的一些模块都需要重新调整。WooC…
萨龙龙萨龙龙
WooCommerce
8年前
0
0
1.38W
0

WooCommerce 商城插件的条件式标签

可以在模板文件中使用WooCommerce和WordPress的条件式标签,以根据匹配页面的条件来显示的特定内容。例如,您可能想要在商店页面上方…
萨龙龙萨龙龙
WooCommerce
8年前
0
0
1.23W
0

在 WordPress 主题中编辑器 WooCommerce 产品选项卡-tabs

WooCommerce产品页面默认有3个选项卡:描述,其它信息和评论,对于很多WordPress主题或许不太适合,需要修改或者添加选项卡。…
萨龙龙萨龙龙
WooCommerce, WordPress
4年前
0
0
3.06W
0

WooCommerce为购物车和结算添加附加费 &#8211; 使用费用API

为所有交易添加基于百分比的附加费 /** *添加1%的附加费到你的购物车和结算页面 *更改百分比以将附加费设置为适合的…
萨龙龙萨龙龙
WooCommerce
6年前
0
0
1.08W
0

WooCommerce 商城首页排除指定分类

WooCommerce是WordPress中最强大的商城插件,没有之一。在Slearn主题的开发过程中,需要将课程和商城结合,课程使用…
萨龙龙萨龙龙
WooCommerce
6年前
0
0
9.88K
0

WooCommerce 注册表单添加本站名称为字段的验证方式

萨龙网络使用的Youji原创企业主题注册登录都是使用WooCommerce商城插件自带的表单,使用简单方便。最近苦于国外机器人注册多,且…
萨龙龙萨龙龙
WooCommerce
6年前
0
0
1.35W
0

在WooCommerce中添加“立即购买”按钮直接跳转到结算页面

MNews主题集成了WooCommerce商城插件,有些用户要求增加一个『立即购买』按钮,这篇文章介绍下如何在WooCommerce中添加…
萨龙龙萨龙龙
WooCommerce
7年前
0
0
3.02W
0

让SI CAPTCHA Anti-Spam插件支持WooCommerce注册表单验证码

萨龙网络使用的主题Purity最新版本弃用了Buddypress社区插件,这样注册表单只能使用WooCommerce商城自带的,验证码还是使用S…
萨龙龙萨龙龙
WooCommerce, WordPress
9年前
0
0
1.55W
0

WordPress 从不需要的页面禁用 WooCommerce 样式和脚本

WooCommerce在每个页面上加载三个核心CSS样式表,并在WordPress站点上安装时发布。可以通过从不需要它的页面和内容中删除样式和…
萨龙龙萨龙龙
WooCommerce
6年前
0
0
1.67W
0
评论表单游客 您好,欢迎参与讨论。
请输入昵称
请输入邮箱
请输入网址
0 / 100
评论列表
总数:0
萨龙网络
暂无评论,第一个评论下?