综合练习
自定义主题+插件 MVP。
综合实战:课程目录站(Headless 全流程)
这一课你将能做到
- 从零交付一个完整项目:WP 后台管理课程内容,Next.js(本站同款技术栈)前台展示,SSG+ISR 渲染
- 走完「需求 → 数据建模 → 后台就绪 → API → 前台 → 部署 → 运维」七步全流程
- 拿出一份可直接复用的上线检查清单,作为今后所有 WP 项目的交付模板
为什么要学
前十一课是零件,这一课是整车。面试讲项目、接单做交付、复盘查问题,都需要你能把主题、区块、插件、Hook、数据库、REST、安全、运维串成一条因果链。做完这个项目,这条路线图上每个节点的「为什么」你都亲身体验过。
人话:我们要做的就是一个迷你版 java-nav——课程数据由 WP 后台维护(编辑友好),前台用 Next.js 静态化(访问飞快)。这正是内容型产品的典型架构,做完即可写进简历。
先建立图像
WP 后台(course CPT + track 分类法 + level/duration 字段)
↓ REST /wp-json/qrocmq/v1/courses(聚合端点)
Next.js App Router
├─ /courses 列表页(ISR 300s)
├─ /courses/[slug] 详情页(SSG + on-demand revalidate)
↓
Vercel/Node 部署 → CDN
运维例行:每日 wp db export / 每周更新窗口 / Uptime 监控
跟着做
步骤 1:需求与数据建模
明确最小需求:课程有标题、简介、难度、时长、所属方向(track)、发布状态。建模决策:
- CPT
course(post_type),不是「往 post 里塞分类」——内容类型独立,模板与 API 才能独立 - 自定义分类法
track(如 Java/前端),归档与筛选走 taxonomy,天生有索引 level/duration用 postmeta(低频读写,不值得自定义表)
步骤 2:后台就绪(复用第 5 课骨架)
add_action( 'init', function () {
register_post_type( 'course', array(
'labels' => array( 'name' => '课程', 'singular_name' => '课程' ),
'public' => true,
'show_in_rest' => true, // REST 可用,Headless 必开
'has_archive' => false,
'rewrite' => array( 'slug' => 'course' ),
'supports' => array( 'title', 'editor', 'excerpt', 'thumbnail' ),
'menu_icon' => 'dashicons-welcome-learn-more',
) );
register_taxonomy( 'track', 'course', array(
'labels' => array( 'name' => '方向' ),
'hierarchical' => true,
'show_in_rest' => true,
'rewrite' => array( 'slug' => 'track' ),
) );
} );
用 WP-CLI 造演示数据:
wp post generate --post_type=course --count=20
wp eval '
foreach ( get_posts( array( "post_type" => "course", "numberposts" => 20 ) ) as $i => $p ) {
update_post_meta( $p->ID, "level", $i % 2 ? "advanced" : "beginner" );
update_post_meta( $p->ID, "duration", 8 + $i * 2 );
}'
步骤 3:聚合端点(第 9 课直接搬)
公开只读、带参数校验的 /qrocmq/v1/courses 与 /qrocmq/v1/courses/{slug}(代码见 wp-api 课步骤 2,把 meta_query 换成可选 level 过滤即可)。原则不变:permission_callback 必写、_fields 精简、不暴露草稿。