初入 WooCommence 开发

2021-01-14

下午首先着手给公司项目做了个配套的邮件页面,交给后端之后的第一个版本就发现了问题。具体表现为该邮件在企业邮箱下展示的样式几乎丢失,而以此同时 QQ 邮箱和网易邮箱却都没有这个问题,经过元素审查之后才得知其实是是企业邮箱有着自己的过滤方式,会删除/改变我原有的样式定义。

一番调试过后,得出的最佳解决方案,便是给元素全部加上自定义类名。居中的框架部分也不得使用 html body 选择器,而是换成其子元素。

之后开始研究起了 WooCommence 的模板开发,参考 官方文档 阅读后,得知 WooCommence 其实就已经内置了自己的结构和样式,想要做一个支持 WooCommence 的主题,只需要根据插件路径下 templates 目录的文件,复制到主题路径下 woocommence 目录里面就可以实现覆盖了。

CSS 开发为了方便,根据 WooCommence 默认的 DOM 树结构来基本就可以了。想要更好的定制店铺的内容,这就涉及到 WordPress 的模板开发技术了。需要根据 WordPress 的食用方式来写,应该就可以实现侧边栏位置,头图修改一类的「高级」定制功能了。

邮件模版
Blood Money 多云 一般
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君