如何使用WordPress管理UI、ReactJS处理前端逻辑搭建网站

该方案完全可行，属于「无头WordPress + 自定义React前端」的成熟架构，既可以保留WordPress低代码拖拽配置UI的能力，也能完全复用你现有React前端的业务逻辑和NodeJS+ExpressJS的后端能力，不需要重构原有核心业务。

• WordPress端
  • 自带的Gutenberg块编辑器：无需额外安装，支持拖拽添加按钮、表格、列表、标题等常用组件，可直接可视化调整每个组件的配色、尺寸、边距、样式等属性，零代码基础即可操作
  • WPGraphQL（可选，比默认REST API更灵活）：可将WordPress中存储的页面块配置、全局样式配置以结构化数据的形式对外暴露，方便React侧拉取解析
  • 自定义配置API插件（可选）：如果需要配置全局主题色、通用组件默认样式等全局配置，可安装对应插件将WordPress自定义器的配置对外暴露
• React端
  • 无需引入额外重型框架，仅需提前封装好和WordPress块对应的基础UI组件，接收样式参数作为props即可
  • 可使用任意请求库（如axios、原生fetch）拉取WordPress侧的UI配置
• NodeJS+ExpressJS端
  • 无需修改原有业务代码，仅需根据需求可选添加代理转发、配置缓存逻辑即可

• 第一步：配置WordPress侧的UI管理能力
  先在WordPress中完成页面结构搭建，运营人员通过拖拽块编辑器的组件完成页面排版，调整每个组件的样式参数，所有配置会自动存储在WordPress数据库中。配置完成后开启对应API的只读访问权限，不需要开放写权限，避免安全风险。
• 第二步：适配React前端的配置解析逻辑
  首先封装和WordPress块一一对应的React业务组件，每个组件预留样式、属性的入参。新增配置拉取逻辑，在页面加载时先请求WordPress侧对应页面的UI配置，将接口返回的每个块的类型、属性参数映射到对应的React组件上，传入参数完成渲染。原有业务逻辑不需要改动，和后端的接口请求逻辑保持不变即可。
• 第三步：后端侧适配（可选）
  如果不想让前端直接请求WordPress服务，可以在现有ExpressJS服务中新增代理路由，由后端统一拉取WordPress的UI配置，还可以额外添加缓存策略降低WordPress的访问压力，同时解决跨域问题。

内容的提问来源于stack exchange，提问作者Hari Krishnan U