WordPress 实现艺术家按 A–Z（含中文拼音）分组排序（完整实战）
在艺术类网站（Artist / Exhibition / Gallery）开发中，一个高频需求是：
👉 按 A–Z 字母分组展示艺术家
👉 中文名称按拼音首字母归类
例如：
A
- Artist C
W
- 王羲之
- 王鹏
X
- 薛之谦
但 WordPress 默认并不支持这种能力。
这篇文章将带你从技术角度，完整实现一套：
- ✅ 支持中英文混排
- ✅ 可扩展（SEO / Ajax）
- ✅ 适用于生产环境
的解决方案。
一、为什么 WordPress 做不到？
WordPress 提供的 get_terms()：
get_terms([
'taxonomy' => 'artist',
'orderby' => 'name'
]);
只能做到：
- 按名称排序（数据库排序）
- 不支持“首字母分组”
- 不支持“拼音排序”
👉 所以必须自己实现：
数据获取 → 首字母计算 → 分组 → 输出
二、拼音库选择（关键前置）
要实现“中文 → 拼音首字母”，核心是拼音转换。
✅ 推荐库：overtrue/pinyin
特点：
- 支持中文转拼音 / 首字母
- 精度高（比 iconv 稳定）
- Composer 生态成熟
❌ 不推荐方案
| 方案 | 问题 |
|---|---|
| iconv | 不准确、不可控 |
| 手写映射 | 成本高、维护困难 |
三、安装方式（放在主题 tihubb 内）
1. 进入主题目录
cd wp-content/themes/tihubb
2. 安装拼音库
composer require overtrue/pinyin
安装后结构：
/tihubb
/vendor
composer.json
3. 在主题中加载
functions.php：
require_once get_template_directory() . '/vendor/autoload.php';
4. 封装工具函数（推荐）
function tihubb_get_pinyin() {
static $pinyin = null;
if ($pinyin === null) {
$pinyin = new \Overtrue\Pinyin\Pinyin();
}
return $pinyin;
}
👉 避免重复实例化（性能优化）
四、前端实现（实时计算版本）
用于快速验证逻辑。
1. 获取 artist 数据
$artists = get_terms([
'taxonomy' => 'artist',
'hide_empty' => false,
'orderby' => 'name',
'order' => 'ASC'
]);
2. 分组处理（核心逻辑）
$pinyin = tihubb_get_pinyin();
$grouped_artists = [];
foreach ($artists as $art) {
$name = $art->name;
if (preg_match('/\p{Han}/u', $name)) {
$letter = strtoupper(substr($pinyin->abbr($name), 0, 1));
} else {
$letter = strtoupper(mb_substr($name, 0, 1));
}
if (!preg_match('/[A-Z]/', $letter)) {
$letter = '#';
}
$grouped_artists[$letter][] = $art;
}
ksort($grouped_artists);
3. 输出结构
<?php foreach ($grouped_artists as $letter => $items) : ?>
<h3 id="group-<?php echo esc_attr($letter); ?>">
<?php echo esc_html($letter); ?>
</h3>
<div class="row">
<?php foreach ($items as $art) : ?>
<div class="col-md-2">
<a href="<?php echo esc_url(get_term_link($art)); ?>">
<?php echo esc_html($art->name); ?>
</a>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
五、性能问题分析
当前方案的问题：
❗ 每次页面加载都会执行拼音转换
当数据量较大时（如 1000+ artist）：
- CPU 开销明显
- 页面响应变慢
六、生产级优化（推荐方案）
👉 将“首字母”写入数据库（term_meta）
1. 在保存术语时生成
add_action('created_artist', 'tihubb_save_artist_letter', 10, 2);
add_action('edited_artist', 'tihubb_save_artist_letter', 10, 2);
function tihubb_save_artist_letter($term_id) {
$term = get_term($term_id, 'artist');
if (!$term) return;
$name = $term->name;
$pinyin = tihubb_get_pinyin();
if (preg_match('/\p{Han}/u', $name)) {
$letter = strtoupper(substr($pinyin->abbr($name), 0, 1));
} else {
$letter = strtoupper(mb_substr($name, 0, 1));
}
if (!preg_match('/[A-Z]/', $letter)) {
$letter = '#';
}
update_term_meta($term_id, 'first_letter', $letter);
}
2. 前端读取
$letter = get_term_meta($art->term_id, 'first_letter', true);
👉 不再进行拼音计算
七、扩展能力（高级用法）
1. A–Z 导航
foreach (range('A', 'Z') as $char) {
echo '<a href="#group-' . $char . '">' . $char . '</a>';
}
2. SEO 优化结构
/artists/a
/artists/b
👉 提升搜索引擎收录能力
3. Ajax 筛选（进阶）
实现：
- 点击字母 → 加载对应 artist
- 无刷新更新列表
八、架构思考（重要）
这个需求本质不是“前端展示问题”，而是：
👉 数据结构设计问题
为什么模板做不好？
- 模板只处理 UI
- 不处理数据逻辑
- 无法支持拼音排序
👉 正确做法是：
- 自定义数据逻辑（如 term_meta）
- 控制排序规则
- 分离数据与展示
九、总结
实现流程：
获取数据 → 计算首字母 → 分组 → 输出
生产环境：
保存时计算 → 存储 → 前端直接读取
最后
👉 WordPress 高质量项目的核心，不是选主题，而是设计数据结构
A–Z 分组只是一个典型案例。当你开始处理“排序、筛选、索引”这些问题时，你已经进入了：👉 真正的定制开发阶段
