EP105. “自定义 REST 路由与前后端联调”

写 PHP 注册两个自定义 REST API 路由（同一个 URL，一个只响应 POST 用于创建赞，一个只响应 DELETE 用于删除赞），先各自返回一句测试文字，把前后端联调跑通，确认点击按钮真的能命中正确的自定义端点。真正的「创建/删除 like 文章」的业务逻辑放到下一讲再写。这一讲的组织方式沿用了之前搜索功能的做法：新建一个独立的 inc/like-route.php 文件专门放这块 PHP 代码，再用 require 引入 functions.php，保持代码整洁。

涉及文件

• wp-content/themes/fictional-university-theme/inc/like-route.php （新建）
• wp-content/themes/fictional-university-theme/functions.php （修改，新增一行 require）
• wp-content/themes/fictional-university-theme/src/modules/Like.js （修改）

代码实现

inc/like-route.php（新建）：

<?php

add_action('rest_api_init', 'universityLikeRoutes');

function universityLikeRoutes() {
  register_rest_route('university/v1', 'manageLike', array(
    'methods' => 'POST',
    'callback' => 'createLike'
  ));

  register_rest_route('university/v1', 'manageLike', array(
    'methods' => 'DELETE',
    'callback' => 'deleteLike'
  ));
}

function createLike() {
  return 'Thanks for trying to create a like.';
}

function deleteLike() {
  return 'Thanks for trying to delete a like';
}

functions.php：引入新文件（跟已有的 search-route.php 引入方式一致）：

// wp-content/themes/fictional-university-theme/functions.php
require get_theme_file_path('/inc/like-route.php');

src/modules/Like.js：createLike() / deleteLike() 换成真正的 AJAX 请求：

// wp-content/themes/fictional-university-theme/src/modules/Like.js

createLike() {
  $.ajax({
    url: universityData.root_url + "/wp-json/university/v1/manageLike",
    type: "POST",
    success: response => {
      console.log(response)
    },
    error: response => {
      console.log(response)
    }
  })
}

deleteLike() {
  $.ajax({
    url: universityData.root_url + "/wp-json/university/v1/manageLike",
    type: "DELETE",
    success: response => {
      console.log(response)
    },
    error: response => {
      console.log(response)
    }
  })
}

关键改动点：

• register_rest_route($namespace, $route, $args)：同一个路由名 manageLike 被注册了两次，唯一的区别是 methods 不同（POST vs DELETE），WordPress 会按请求携带的 HTTP 方法自动分派到对应的 callback——这跟之前 note 文章类型直接用 WordPress 内建端点不同，这里的 URL 和处理逻辑完全是自己定义的
• callback 指向的 createLike() / deleteLike() 这两个函数目前只是先返回一句测试字符串，函数的返回值就是 REST API 响应给前端的数据——这一步的目的纯粹是确认「点击按钮 → 发对请求 → 命中对的 PHP 函数」这条链路是通的，不掺杂真正的业务逻辑，方便排查问题
• 前端请求的 URL 路径是 /wp-json/{namespace}/{route}，即 /wp-json/university/v1/manageLike——命名空间、路由名要跟 PHP 里注册的完全一致，大小写也要对上（manageLike 是驼峰写法）
• createLike() 和 deleteLike() 两个 JS 方法请求的 URL 完全相同，唯一区别只是 type 属性（"POST" vs "DELETE"）——这跟 PHP 那边「同一路由注册两次、按方法分派」的设计正好对应

[截图：浏览器开发者工具 Network 面板，点击心形图标后发出的 manageLike POST/DELETE 请求与测试文字响应]

Hook / Function 速查

常见坑

• 前端请求 URL 里的命名空间/路由名跟 PHP register_rest_route() 里的字符串对不上（大小写、拼写）——会导致 404，命中不了自定义端点
• 忘记在 functions.php 里 require 新建的 like-route.php 文件——PHP 文件本身写得再对，不被引入就永远不会执行，add_action('rest_api_init', ...) 根本不会被注册

延伸 / 后续讲座会用到

下一讲开始给 createLike() / deleteLike() 写真正的业务逻辑：程序化创建/删除 like 文章，并且要加上权限验证（目前完全没有身份验证，任何人都能调用）和「一人只能点一次」这类自定义限制。

Sources

Udemy：

• Become a WordPress Developer: Unlocking Power With Code — Section 20, EP105