[TOC] [1.WP主题开发流程与时间规划](%E4%B8%BB%E9%A2%98%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B%E4%B8%8E%E6%97%B6%E9%97%B4%E8%A7%84%E5%88%92.md) [1.Woo主题开发流程](%E4%B8%BB%E9%A2%98%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B.md) [TDD 通过测试来驱动开发](TDD%E9%80%9A%E8%BF%87%E6%B5%8B%E8%AF%95%E6%9D%A5%E9%A9%B1%E5%8A%A8%E5%BC%80%E5%8F%91.md) 1. Easy Digital Downloads：适用于销售数字产品，简单易用，但不适用于销售物理产品或复杂的电子商务业务。 2. WP eCommerce：功能全面，有大量的电子商务功能，但用户界面较为复杂，需要一定的学习成本。 3. Ecwid Ecommerce Shopping Cart：易于使用，提供多种支付和物流选项，但免费版本功能有限，需要升级到付费版本。 4. Cart66 Cloud：提供完整的电子商务解决方案，但价格较高，用户界面较为复杂。 5. BigCommerce：提供完整的电子商务平台，价格计划灵活，但价格可能较高，用户界面较为复杂。 # 1. 概念 | 概念 | 说明 | | --- | --- | | 钩子(hook) | 允许向特定时机插入函数的方法。 | | 违章(filter) | 允许修改输入的数据。 | | 模板标签 | 用来载入模板的函数。 | | 前端框架 | 主题开发常使用的前端框架,如Bootstrap、Foundation。 | | CSS预编译器 | 常用的LESS、SASS预编译CSS。 | | 自适应设计 | 能响应不同屏幕尺寸的网站设计。 | | 兼容性测试 | 测试主题在不同浏览器和设备下的表现。 | | 可访问性 | 让网站能被所有人阅读和使用。 | | JS插件 | 常用的JS插件如滚动浮窗、侧边栏等。 | | CDN | 内容分发网络,提供静态资源的访问。 | | 版本控制 | 用于管理主题更新的版本控制系统,如Git。 | | 文档注释 | wp\_enqueue\_style()等函数的文档注释。 | ## 1.1, 主题开发的主要流程： 开发 wordpress 主题可视化编辑主要包括以下几个步骤: ```[flow] st=>start: 1, 【定义】可编辑区域 e=>end op1=>operation: 2, 【注册】设置字段 op2=>operation: 3, 在模板中渲染字段【 get_theme_mod() 】 op3=>operation: 4, 【设置 API 来获取和修改可视化编辑器】开发前端编辑界面 op4=>operation: 5, 将前端界面整合到自定义设置选项卡【自定义设置选项卡】 op5=>operation: 6, 提交修改并保存设置【提交给 WordPress 设置 API】 st->op1->op2->op3->op4->op5->e ``` 1. 定义可编辑区域 首先需要定义哪些部分需要可视化编辑,如头部、侧边栏、页脚等。可以使用专用函数来实现。 2. 注册设置字段 为每个可编辑区域注册相应的设置字段,包括文本字段、颜色选择器、图像上传字段等。 3. 在模板中渲染字段 在对应的模板位置,使用 get_theme_mod() 函数来读取和显示可视化编辑器设置的内容。 4. 开发前端编辑界面 开发一个前端页面,使用 WordPress 设置 API 来获取和修改可视化编辑器的设置。 5. 将前端界面整合到自定义设置选项卡 将前端编辑界面作为一个自定义选项卡,整合到 WordPress 设置侧边栏中。 6. 提交修改并保存设置 前端编辑界面需要将修改提交给 WordPress 设置 API ,保存新的主题设置。 通过上述步骤,就可以开发出一个基本的主题可视化编辑功能。需要注意的是: * 定义合理的可编辑区域和设置字段 * 在模板中精准渲染设置字段的值 * 开发友好的前端界面 * 提交数据时使用正确的参数名称 ```[sequence] Title: 注意事项 定义->设置: 定义合理的可编辑区域和设置字段 设置-->开发: 模板中精准渲染设置字段的值 开发->>提交: 开发友好界面 提交-->>开发:使用正确的参数名称 ```