Skip to content

Latest commit

 

History

3 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WordPress Theme Development Lab

一套用于学习、验证和复习 WordPress Classic Theme(经典主题)开发机制的实验项目。

项目包含 20 个彼此独立、已经实际测试通过的 WordPress 最小主题,并为每个主题配套中文 Markdown 文档。通过固定测试数据、可运行源码、预期结果和常见问题,把 Template Hierarchy、WordPress 数据模型以及 WP_Query 的主要查询能力串成一套可重复验证的学习体系。

v1.1.0 开始,项目新增一个轻量静态 Markdown 阅读器,可以直接把 docs/ 中的知识文档组织成左侧章节导航 + 右侧正文的知识库页面。

当前版本:v1.1.0
项目定位:个人学习 / 技术研究 / WordPress 主题开发实验,不是生产主题。


v1.1.0 更新内容

v1.0.0 已完成 20 个 WordPress 实验主题与全部知识文档;v1.1.0 不修改已经验证通过的核心 PHP 实验代码,主要增加文档阅读层:

  • 新增根目录 index.html,作为静态知识库入口。
  • 使用 marked.js 在浏览器中直接渲染 docs/*.md
  • 使用 highlight.js 对 PHP、HTML、JavaScript、JSON 等代码块进行高亮。
  • 代码块支持一键复制。
  • Markdown 表格支持响应式横向滚动。
  • 左侧章节按照知识地图分组,可折叠切换。
  • 使用 Hash 路由保存当前章节,例如 #query-meta
  • 支持电脑端与手机端阅读。
  • 第三方前端库全部保存在本地,不依赖 CDN。
  • 不引入数据库、Node 构建流程或前端框架。
  • 当前版本不加入搜索功能,20 章规模下优先保持导航和代码简单。

知识库继续直接读取原始 Markdown,因此不存在“Markdown 一份、HTML 内容再维护一份”的重复维护问题。


1. 项目结构

wordpress-theme-development-lab/
├─ README.md
├─ index.html                      # v1.1.0 静态知识库入口
├─ .nojekyll                       # GitHub Pages 静态发布辅助文件
│
├─ assets/                         # 知识库前端资源
│  ├─ css/
│  │  ├─ knowledge-viewer.css
│  │  └─ vendor/
│  │     └─ highlight-github.min.css
│  └─ js/
│     ├─ knowledge-viewer.js
│     └─ vendor/
│        ├─ marked.js
│        ├─ highlight.min.js
│        └─ MARKED-LICENSE.md
│
├─ data/
│  └─ docs.json                    # Markdown 文档导航配置
│
├─ docs/                           # 20 章知识文档与项目文档
│  ├─ 00-test-data.md
│  ├─ 01-project-roadmap.md
│  ├─ 01-template-hierarchy.md
│  ├─ 02-default-query.md
│  ├─ ...
│  ├─ 20-query-pagination.md
│  └─ 21-knowledge-map.md
│
├─ test-assets/                    # MIME / Attachment 测试资源
│  ├─ wp-lab-image.jpg
│  ├─ wp-lab-note.txt
│  └─ wp-lab-archive.zip
│
├─ adv-01-tpl/
├─ adv-02-default-query/
├─ adv-03-data/
├─ ...
├─ adv-19-query-order/
└─ adv-20-query-fenye/

20 个 adv-* 目录是 20 个独立 WordPress Theme,不是一个主题中的 20 个子模块。

知识库前端与 WordPress 实验主题彼此独立:

WordPress 实验层
→ adv-01 ~ adv-20

知识内容层
→ docs/*.md

阅读展示层
→ index.html + assets + data/docs.json

2. 20 章知识地图

这套实验最终可以归纳为一条主线:

浏览器 URL / Request
↓
WordPress Main Query
↓
识别当前页面状态
↓
Template Hierarchy
↓
模板 / Loop 输出

页面需要额外数据时:

WordPress 数据模型
↓
WordPress API
↓
Custom WP_Query
↓
查询条件
↓
Order / Orderby
↓
Pagination
↓
Loop / 页面输出

完整知识地图:

docs/21-knowledge-map.md

需要特别注意:

课程学习顺序 ≠ WordPress 实际运行顺序

例如课程先学习 adv-01 Template Hierarchy,再学习 adv-02 Default Query;但 WordPress 实际处理请求时,是先建立 Main Query,再根据页面状态进入 Template Hierarchy。


3. 20 个实验主题

# 主题目录 核心知识 配套文档
01 adv-01-tpl Template Hierarchy / 模板层级 01-template-hierarchy.md
02 adv-02-default-query Default Query / Main Query 02-default-query.md
03 adv-03-data Post / Meta / Term / Attachment 03-data.md
04 adv-04-funcs WordPress 常用数据函数 04-functions.md
05 adv-05-query-1 WP_Query 基础 05-wp-query-basics.md
06 adv-06-query-author Author Parameters 06-query-author.md
07 adv-07-query-cat Category Parameters 07-query-category.md
08 adv-08-query-tag Tag Parameters 08-query-tag.md
09 adv-09-query-tax Tax Query 09-query-tax.md
10 adv-10-query-search Search Parameters 10-query-search.md
11 adv-11-query-post Post / Page Parameters 11-query-post-page.md
12 adv-12-query-pwd Password Parameters 12-query-password.md
13 adv-13-query-type Post Type 13-query-post-type.md
14 adv-14-query-status Post Status 14-query-post-status.md
15 adv-15-query-cmt Comment Count 15-query-comment-count.md
16 adv-16-query-date Date Query 16-query-date.md
17 adv-17-query-meta Meta Query 17-query-meta.md
18 adv-18-query-mime MIME / Attachment 18-query-mime.md
19 adv-19-query-order Order / Orderby 19-query-order.md
20 adv-20-query-fenye Pagination / Offset / 原生分页函数 20-query-pagination.md

项目路线与完成状态:

docs/01-project-roadmap.md


4. 知识库阅读器

4.1 导航结构

data/docs.json 不按照简单的 01~20 平铺,而是按照知识关系分组:

项目总览
├─ 20 章知识地图
├─ 统一测试数据
└─ 项目路线

01 请求与模板
├─ 01 Template Hierarchy
└─ 02 Default Query

02 数据模型与基础
├─ 03 Data
├─ 04 Functions
└─ 05 WP_Query Basics

03 查询条件
├─ 06 Author
├─ 07 Category
├─ 08 Tag
├─ 09 Tax Query
├─ 10 Search
├─ 11 Post / Page
├─ 12 Password
├─ 13 Post Type
├─ 14 Post Status
├─ 15 Comment Count
├─ 16 Date Query
├─ 17 Meta Query
└─ 18 MIME / Attachment

04 结果控制
├─ 19 Order / Orderby
└─ 20 Pagination / Offset

默认打开的是 20 章 WordPress 知识地图,先建立整体认识,再进入具体章节。

4.2 内容维护原则

知识库没有把 Markdown 转成一批固定 HTML 文件,而是运行时读取:

data/docs.json
↓
找到 docs/*.md
↓
fetch()
↓
marked.js
↓
HTML
↓
highlight.js
↓
代码高亮

以后修改知识内容,只需要编辑对应 .md 文件。

新增文档时,一般只需要:

  1. 把新的 Markdown 放入 docs/
  2. data/docs.json 增加一条配置;
  3. 刷新知识库页面。

4.3 本地预览

因为阅读器通过 fetch() 读取 JSON 和 Markdown,不建议直接双击 index.html 使用 file:// 打开

在仓库根目录启动一个简单 HTTP 服务即可。例如电脑已经安装 Python 时:

python -m http.server 8000

然后浏览器访问:

http://localhost:8000/

不需要 PHP、MySQL、Node.js 或数据库。

4.4 GitHub Pages

仓库根目录的 index.html 可以直接作为静态站点入口。将仓库通过 GitHub Pages 发布后,就可以在线浏览同一套 docs/*.md 知识内容。

v1.1.0 保持阅读器最小化,不加入搜索、数据库、后台编辑器和前端框架


5. 为什么采用“一课一个主题”

如果把全部实验写进一个大主题,很容易出现:

一个知识点的代码
↓
被其他 Hook / Query / Template / Meta Box 干扰
↓
无法确定当前结果究竟由什么造成

本项目采用:

一个知识点
=
一个最小 WordPress 主题
=
一个相对独立的实验环境

例如忘记某个知识点时,可以直接切换对应主题:

Template Hierarchy → adv-01-tpl
Tax Query          → adv-09-query-tax
Post Status        → adv-14-query-status
Meta Query         → adv-17-query-meta
Pagination         → adv-20-query-fenye

这种结构更适合学习、调试和以后快速复习。


6. WordPress 测试环境准备

6.1 上传主题

把:

adv-01-tpl
...
adv-20-query-fenye

复制到:

/wp-content/themes/

然后在 WordPress 后台按章节切换实验主题。

6.2 固定链接

建议使用便于观察 URL 的固定链接结构,例如“文章名”。

每个实验主题的 functions.php 都会注册测试用:

product
product_cat
post_copy

主题切换后通过 after_switch_theme 刷新 rewrite rules,而不是在每次 init 请求中执行 flush_rewrite_rules()

6.3 建立统一测试数据

完整步骤:

docs/00-test-data.md

统一数据包括:

3 个测试作者
4 个 Category
3 个 Tag
3 个 post_copy Term
2 个 product_cat Term
3 个 Product
5 个 Page
10 篇已发布文章
特殊 Post Status 测试文章
评论测试数据
Post Meta / Term Meta
JPG / TXT / ZIP Attachment

测试数据原则:

固定 Name
固定 Slug
动态取得真实数据库 ID

而不是把某个数据库里的 Post ID、Category ID、Term ID、Attachment ID 直接硬编码成项目依赖。


7. 推荐学习顺序

第一阶段:请求与模板

01 Template Hierarchy
02 Default Query

建立:

Request
→ Main Query
→ 页面状态
→ Template Hierarchy
→ Loop

第二阶段:WordPress 数据模型

03 Data
04 Functions

重点理解:

Post
Post Meta
Term
Term Meta
Attachment

第三阶段:进入 WP_Query

05 WP_Query Basics

建立:

Main Query
vs
Custom WP_Query

以及:

new WP_Query();
have_posts();
the_post();
wp_reset_postdata();

第四阶段:学习查询条件

06 Author
07 Category
08 Tag
09 Tax Query
10 Search
11 Post / Page
12 Password
13 Post Type
14 Post Status
15 Comment Count
16 Date Query
17 Meta Query
18 MIME / Attachment

不要优先死记所有参数,可以先判断:

我现在到底想按照哪个维度筛选 Post?

第五阶段:控制结果

19 Order / Orderby
20 Pagination / Offset

最终形成:

筛选
→ 哪些 Post 进入结果集

排序
→ 这些结果按照什么顺序排列

分页
→ 当前只读取结果集中的哪一部分

8. 值得长期保留的实验结论

Template Hierarchy 是逐级回退

越具体的模板
→ 优先级越高
→ 找不到再向通用模板回退

Main Query 和 Custom WP_Query 不是一回事

Main Query
→ WordPress 根据 Request 自动建立

Custom WP_Query
→ 模板主动创建的附加查询

自定义 Loop 结束后通常需要:

wp_reset_postdata();

Tax Query 与 Meta Query 的职责不同

可复用的分类关系
→ Taxonomy / Term
→ tax_query

属于某篇 Post 的额外属性
→ Post Meta
→ meta_query

层级 Page 的 Slug 不等于完整 Path

例如:

Slug: page-grandchild

Path:
page-parent/page-child/page-grandchild

使用 get_page_by_path() 定位层级 Page 时要注意完整路径。

Meta 数字排序不要直接使用字符串排序

测试值:

2
10
100

字符串排序可能得到:

10
100
2

数字排序可以使用:

meta_value_num

或在 Meta Query 中明确数字类型。

offset 不应该直接与正常分页混用

正常分页:

posts_per_page + paged

固定 offset 会改变正常分页起点,需要单独计算分页逻辑。

WordPress 分页要区分查询环境

Main Query
→ the_posts_pagination()

Custom WP_Query
→ paginate_links()

wp_link_pages() 解决的是单篇正文分页,不是文章列表分页。


9. 每章文档的统一结构

每个实验尽量按照同一种方式记录:

  1. 知识点名称
  2. 解决什么问题
  3. 核心概念
  4. 基础语法
  5. 参数说明
  6. 本课测试数据准备
  7. 测试源码
  8. 如何访问 / 运行
  9. 预期结果
  10. 常见错误与排查
  11. 实际开发建议
  12. 官方参考

因此这个仓库同时承担三种职责:

WordPress 可运行实验源码
+
Markdown 学习手册
+
静态知识库阅读页面

10. 项目边界

本项目当前专注于:

WordPress Classic Theme
Template Hierarchy
WordPress 数据模型与读取 API
WP_Query
查询条件
查询结果排序与分页
Markdown 知识整理

当前版本不追求覆盖:

完整商业主题工程
Block Theme / Site Editor
大型前端框架
复杂构建工具
完整插件架构
REST API 应用
生产环境安全与性能体系

部分实验为了观察 WordPress 内部数据,会直接输出数组、查询变量或调试信息。这些代码具有教学用途,不应该未经判断直接复制到生产网站。

adv-14-query-status 会研究 Draft、Pending、Future、Private 等非公开状态,因此实验页包含权限限制,应使用具备编辑文章权限的测试账号进行学习。


11. 后续扩展方向

当前 20 个最小实验已经完成。下一阶段如果继续扩展,优先考虑增加一个完整但仍然保持简单的 Classic Theme:

adv-21-theme-project/
├─ style.css
├─ functions.php
├─ header.php
├─ footer.php
├─ index.php
├─ single.php
├─ archive.php
├─ single-product.php
├─ archive-product.php
├─ taxonomy-product_cat.php
└─ template-parts/

目标从:

单知识点实验

过渡到:

主题结构
模板复用
页面职责
代码组织

v1.1.0 的知识库阅读器已经满足当前 20 章文档的阅读需要,因此暂不增加搜索、数据库或内容后台。


12. 版本记录

v1.1.0

在 v1.0.0 的 20 个已验证实验主题基础上新增静态 Markdown 知识库:

✓ 新增 index.html 知识库入口
✓ 新增 assets/ 前端资源目录
✓ 新增 data/docs.json 文档导航配置
✓ docs/ 直接作为唯一知识内容源
✓ marked.js Markdown 渲染
✓ highlight.js 代码高亮
✓ 代码一键复制
✓ 分组折叠导航
✓ Hash 章节路由
✓ Markdown 表格响应式处理
✓ 手机端导航适配
✓ GitHub Pages 静态发布结构
✓ 不引入搜索、数据库和构建工具

v1.0.0

首个完整学习版本:

✓ 20 个独立 WordPress Classic Theme 实验
✓ 统一测试数据体系
✓ Template Hierarchy / Main Query 实际验证
✓ WordPress 数据对象与读取 API
✓ WP_Query 主要查询参数实验
✓ Author / Category / Tag / Tax Query
✓ Search / Post / Password / Post Type / Post Status
✓ Comment Count / Date Query / Meta Query / MIME
✓ Order / Orderby
✓ Pagination / Offset / WordPress 原生分页函数
✓ 20 章配套中文知识文档
✓ 20 章总知识地图

第三方前端库

知识库阅读器本地使用:

  • marked.js:Markdown 解析
  • highlight.js:代码语法高亮

第三方库遵循其各自许可证;项目保留了相关源码头部许可证信息及 MARKED-LICENSE.md


说明

这是一个以学习和研究为目的的个人实验仓库。

源码和文档优先追求:

小
清晰
可运行
可验证
可复习
可长期维护

About

🔥 通过 20 个独立最小 WordPress 经典主题,系统学习 Theme 开发、WP_Query、Tax Query、Meta Query、排序与分页等核心知识。

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages