《深度解构 b2 主题：全栈函数与钩子的功能图谱解析》

一、主题技术架构概览

二、后端 PHP 函数与钩子解析

（一）核心功能模块函数

1. 文件上传与资源管理
   • Modules/Common/FileUpload.php中的文件处理函数
     • checkFilePermission($user_id, $file_type)：验证用户上传权限，根据用户等级限制可上传的文件类型与大小。
     • uploadFile($file_data, $upload_dir)：处理文件物理上传，生成唯一文件名并存储至指定目录，返回文件元数据。
   • 钩子关联
     • 通过wp_handle_upload_prefilter钩子过滤上传文件数据，在文件上传前进行类型与大小校验。
2. 用户与会员体系
   • Modules/Common/User.php中的会员功能函数
     • checkUserLevel($user_id)：查询用户会员等级，返回可访问的内容权限与功能限制。
     • updateUserPoints($user_id, $points, $action)：更新用户积分，记录积分变动日志（如购买、签到、分享等场景）。
   • 钩子关联
     • 利用user_register钩子在用户注册时初始化会员基础数据，通过set_user_role钩子监听用户角色变更并同步会员等级。
3. 支付与订单系统
   • Modules/Common/Orders.php中的交易函数
     • createOrder($product_id, $user_id, $price)：生成订单记录，包含商品信息、用户信息与支付状态。
     • callbackWechatPay($data)：微信支付回调处理，验证签名、更新订单状态并触发order_paid钩子通知其他模块。
   • 钩子关联
     • 通过woocommerce_thankyou钩子在订单支付成功后执行积分奖励、会员等级升级等后续操作。

（二）WordPress 钩子集成

1. 主题生命周期钩子
   • after_setup_theme：初始化主题功能（如菜单注册、缩略图支持），调用load_theme_textdomain加载多语言翻译。
   • wp_enqueue_scripts：通过wp_enqueue_style与wp_enqueue_script加载前端资源，支持b2_theme_assets过滤器自定义资源路径。
2. 内容渲染钩子
   • the_content：过滤文章内容，插入自定义组件（如付费阅读模块），通过b2_content_filter钩子扩展内容处理逻辑。
   • wp_footer：在页面底部注入 JavaScript 交互逻辑（如评论区动态加载、图片懒加载）。

三、前端 JavaScript 函数解析

（一）交互功能模块

1. 文件上传组件
   • Assets/fontend/upload.js中的函数
     • initUploader($element)：初始化上传区域，绑定拖拽事件与文件选择回调，显示上传进度条。
     • handleFileUpload(file, callback)：通过 FormData 封装文件数据，调用后端 API 完成上传，支持断点续传。
2. 商品购买流程
   • Assets/fontend/shop.js中的函数
     • checkoutProcess()：收集购物车商品、地址、优惠券等信息，验证表单后调用支付接口。
     • showPaymentModal(payment_method)：根据支付方式（如微信、支付宝）渲染支付弹窗，绑定支付按钮事件。
3. 动态页面效果
   • Assets/fontend/animation.js中的函数
     • initScrollAnimation()：监听页面滚动事件，对元素执行渐入、缩放等动画效果，优化用户体验。
     • handleLazyLoad($images)：实现图片懒加载，通过 Intersection Observer API 判断元素可见性并加载资源。

四、第三方库与工具函数

1. CMB2 自定义字段库
   • Library/Cmb2/includes/CMB2_Types.php中的字段渲染函数
     • render_file_field($field)：生成文件上传字段 HTML，集成媒体库选择与预览功能。
     • render_color_field($field)：渲染颜色选择器，支持 HEX、RGB 格式输入与实时预览。
2. 微信开发工具函数
   • Library/WeChatDeveloper/WeChat/JSAPI.php中的微信接口函数
     • getJsApiSign($url)：生成微信 JS-SDK 签名，用于调用拍照、分享等移动端功能。
     • checkUserAuth()：检查用户微信授权状态，未授权时跳转授权页面并缓存回调地址。

五、函数与钩子的协同逻辑

1. 后端逻辑：用户请求付费内容时，checkContentPermission()函数通过user_has_purchased钩子查询购买记录，未购买则返回付费表单。
2. 前端交互：表单提交触发processPayment()函数，调用微信支付 JSAPI，支付成功后通过window.postMessage通知后端。
3. 状态更新：后端payment_callback函数接收通知，更新订单状态并通过content_unlocked钩子解除内容锁定，前端重新渲染完整内容。

六、总结：从函数设计看主题扩展性