前端学习WP之第一阶段：理解 WordPress 核心架构

作为前端开发，我们不需要纠结于 HTML/CSS 的基础，而是要直接切入 WordPress 的底层运行逻辑。

可以把 WordPress 理解为一个巨大的 “事件总线（Event Bus）”系统。它的核心不是复杂的类继承，而是通过“钩子”把代码挂载到执行生命周期中。

以下是第一阶段：核心架构的三个支柱。

---

1. 核心机制：钩子 (Hooks)

这是 WP 开发的灵魂。如果不理解 Hooks，就无法在不破坏核心代码的情况下修改 WooCommerce 的行为。

• Actions (动作钩子): * 本质： 在程序的特定时刻“插一脚”，执行一段代码。
  • 例子： add_action('init', 'my_custom_function'); —— 当 WP 初始化完成时，运行我的函数。
  • 前端类比： 类似于生命周期钩子（如 Vue 的 mounted 或 React 的 useEffect）。
• Filters (过滤器钩子): * 本质： 拦截一个变量，修改它，然后传回去。
  • 例子： add_filter('the_title', 'prefix_product_title'); —— 在标题显示前，给它加个前缀。
  • 前端类比： 类似于数组的 .map() 或计算属性（Computed）。

学习任务： 调研 functions.php 文件。这是写逻辑的第一个战场，虽然以后我们会写插件，但现在要学会在这里使用 add_action 和 add_filter。

---

2. 数据库结构：EAV 模型

前端习惯了 JSON 或特定的 API 结构，但 WP 的底层数据库非常“扁平”。只需要记住 4 张核心表：

1. wp_posts: 所有的内容（产品、订单、页面、文章）都存这里。
2. wp_postmeta: 最重要的表。 存放上述内容的扩展属性（如产品的价格、订单的物流单号、产品的库存）。
3. wp_users & wp_usermeta: 用户信息及其扩展属性。
4. wp_options: 全局设置（网站名称、插件配置等）。

核心难点： WP 使用的是 EAV（Entity-Attribute-Value） 模型。这种设计灵活性极高，但查询性能较弱。作为开发，需要调研如何避免直接操作数据库，而是使用 WP 内置的 get_post_meta() 或 WP_Query。

---

3. 模板层级 (Template Hierarchy)

作为前端，最关心页面是怎么渲染出来的。WP 有一套严格的 “文件回退机制”。

• 当用户访问 example.com/product/iphone 时，WP 会按以下顺序找文件：
  1. single-product.php (特定产品页)
  2. single.php (通用详情页)
  3. index.php (兜底)
• WooCommerce 的特殊性： WC 允许在自己的主题文件夹里创建一个 woocommerce/ 目录，从而 覆盖 (Override) 插件默认的 HTML 模板。这让能像写组件一样定制商城的 UI。

---

第一阶段的实战调研建议

不要只是看文档，请尝试完成以下三个小实验，会瞬间上手：

1. 实验 A (Action): 在 functions.php 中使用 wp_footer 钩子，在网站底部注入一段 console.log('Hello WP');。
2. 实验 B (Filter): 尝试使用 woocommerce_get_price_html 这个 Filter，把所有产品的价格后面都加上一句话（比如“含税”）。
3. 实验 C (Hierarchy): 在的主题目录下，新建一个 single.php，随便写点 HTML，看看点击产品详情页时，页面是否变成了要的样子。

---

“避坑”指南：

作为 资深职场人可能追求系统的整洁。但 WP 的源码里充满了 过程式编程 和 全局变量（比如著名的 $post）。

• 不要试图一开始就用纯粹的 OOP（面向对象）去重构它。 * 先顺着它的“过程式”逻辑走，理解它是如何通过 global $product; 拿数据的。