
您现在的位置是:首页 > WordPress教程WordPress教程
WordPress如何添加产品画廊
WP集市
2025-08-31
【WordPress教程】
848人已围观
-
先登录后台,鼠标挪到左侧「产品」那边,会弹出菜单,点那个「添加新产品」。这时候你就能看到熟悉的编辑器界面了,和写文章差不多,但右边多了一堆商品属性框。别管价格库存那些,直接往下滚,找「产品图库」这个模块——对,就是带➕按钮的那个框。
-
传图的时候注意顺序啊,WordPress会按上传顺序排列画廊,想调顺序就拖拽图片。传完别急,看下图库底部有个短代码生成器:[gallery ids="1,2,3"],这串数字就是图片ID序列。你要是懂代码,直接复制这个短代码贴到文章里也行,但今天咱们用更直观的方法。
-
现在点开编辑器上方的「添加区块」按钮(那个黑色➕号),搜索「画廊」区块。选「图库」区块拖进来,这时候会提示你从媒体库选择——直接勾选刚才传的产品图就行。魔幻的事情来了:系统会自动生成响应式布局,手机看会自动排成网格,完全不用写CSS媒体查询!
-
进阶玩法来了啊,想加灯箱效果?在画廊区块设置里打开「链接到媒体文件」,然后装个插件比如「Simple Lightbox」。激活后前台点图片就会浮层放大,代码层面其实是给图片包了层,插件用JavaScript捕获点击事件实现的。
-
突然想到个骚操作:如果你非要手写代码,可以在主题的functions.php里加这段:
add_action('woocommerce_after_single_product', 'custom_gallery'); function custom_gallery() { echo do_shortcode('[gallery columns="4" size="medium" ids="1,2,3,4"]'); }
这样会在商品页底部追加一个4列画廊,但记得把ids换成实际图片ID啊!
-
最后检查时发现画廊图片缩略图裁剪不对劲?快去「设置-媒体」里调整缩略图尺寸,产品画廊通常用600x400这种比例。改完记得用「Regenerate Thumbnails」插件重建缩略图,不然老图还是显示旧尺寸。
-
其实最省事的还是用WooCommerce自带画廊,上传主图后往下拉找到「产品图库」框,按住Ctrl键多选图片就完事了。前台会自动带缩略图导航器,鼠标悬停在主图时会切换显示——这个交互是用JavaScript监听mouseover事件实现的,但完全不用你自己写。
Tags:
文章版权声明:除非注明,否则均为WP集市原创文章,转载或复制请以超链接形式并注明出处。

热门文章
