WordPress 的“显示选项”面板(大多数后台列表页右上角的小标签)可以选择显示哪些列。它没告诉你的是,这些选择只对桌面端有效。在 WordPress 自身 782px 的断点以下,除了行的主标题外,所有列都会折叠到一个点按展开的开关后面,不管“显示选项”怎么设置。
两种不同的需求,一个设置
桌面端显示和手机端显示是两个截然不同的问题:在通话间隙用手机查看订单列表的管理者,需要的列比在桌面上查看完整表格的人少得多、精选得多。WordPress 核心无法表达这种差异;它把“可见”当作单一的通用状态。
第二个专门针对手机的设置面板
我们在订单列表上方加了一个可折叠的小面板 Also show on mobile…,独立于原生的“显示选项”标签,列出同样的可切换列(状态、总额、手机号、快递交易号等),用复选框选择哪些列在手机屏幕上保持可见,叠加在桌面端已有的选择之上。
这一选择全站只需保存一次,并通过动态生成、仅作用于 WordPress 移动端断点的 CSS 来实现:每个被选中的列都会获得一条针对性的 display: table-cell !important 规则,只为该列覆盖平台默认的折叠行为,其余未选中的列照常折叠。
为什么默认是折叠的
面板本身隐藏在一个小的切换链接后面,而不是一直显示:它是很少使用的配置项,不是日常控件;如果每次打开订单列表上方都有一个常开的设置框,恰恰会在手机上带来这个功能想要避免的杂乱。
要点总结
- WordPress 的响应式列折叠非常激进,而且默认无法配置;即使站长在“显示选项”中做了明确选择,它依然会隐藏数据。
- 桌面端和手机端的显示是两个独立的决定,应该有各自的控件,而不是一个设置身兼两职。
- 很少使用的设置默认应该折叠,即使它确实有用;控件的显眼程度应与它的使用频率相匹配。
相关阅读:扩展订单预览弹窗、重新设计订单跟踪页面。
在您自己的 WooCommerce 或 WordPress 后台遇到类似限制?和我们聊聊:ArtinTech Solution 正是打造这类定制店铺工具的团队。