
本文介绍如何使用 PHP 的 array_chunk() 函数将 WordPress 分类列表按每组 2 个进行分组,并渲染为结构清晰的 HTML 布局,适用于响应式网格或双列分类展示场景。
本文介绍如何使用 php 的 `array_chunk()` 函数将 wordpress 分类列表按每组 2 个进行分组,并渲染为结构清晰的 html 布局,适用于响应式网格或双列分类展示场景。
在 WordPress 开发中,有时需要将全部分类(categories)以成对形式展示——例如每行两个分类卡片,而非默认的单列垂直排列。原代码的问题在于:嵌套了重复的 get_categories() 调用,且未正确分组逻辑,导致只输出前两项;同时混淆了外层循环与内层截断逻辑,造成语义混乱和不可扩展性。
正确的思路是:先一次性获取所有分类,再用 array_chunk() 按每 2 项切分成子数组,最后遍历每个“块”(chunk)渲染对应 HTML 结构。
以下是推荐的完整实现(兼容 WordPress 主题模板,如 index.php 或自定义页面模板):
<?php // 获取所有启用的分类(可选参数:排除特定分类、限制数量等)
$categories = get_categories([
'hide_empty' => false, // 包含无文章的分类(按需调整)
'orderby' => 'name',
'order' => 'ASC'
]);
// 将分类数组按每 2 个一组切分
$chunks = array_chunk($categories, 2);
// 遍历每个 chunk(即每一对分类)
foreach ($chunks as $chunk) :
?>
<div class="box">
<?php foreach ($chunk as $category) : ?><p>
<a href="<?php%20echo%20esc_url(get_category_link(%24category->term_id));%20?>">
<?php echo esc_html($category->name); ?>
</a>
</p>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
✅ 关键说明:
使用tbot机器ID身份文件配合tsh CLI,通过Teleport访问控制SSH登录托管主机或执行远程命令。
- array_chunk($categories, 2) 是核心:它将原始一维分类数组转换为二维数组,如 [[cat1, cat2], [cat3, cat4], ...];
- 每个 $chunk 是一个最多含 2 个元素的子数组,确保 内恰好渲染两个
标签;
- 使用 esc_url() 和 esc_html() 是 WordPress 安全最佳实践,防止 XSS 漏洞;
- 若需展示分类图标(如你原代码中的 z_taxonomy_image_url()),请确保该函数已定义(通常来自插件 Taxonomy Images),并加入到
标签中:
@@##@@term_id)); ?>" alt="<?php echo esc_attr($category->name); ?>" width="60" height="60">⚠️ 注意事项:
- 若分类总数为奇数(如 5 个),最后一组仅含 1 项,array_chunk 会自动处理,无需额外判断;
- 避免在循环内重复调用 get_categories() —— 这会显著降低性能,应只调用一次;
- 如需响应式适配(如移动端单列),建议配合 CSS Flexbox 或 Grid 实现,而非 PHP 逻辑控制列数。
通过该方法,你不仅能精准生成所需 HTML 结构,还能轻松扩展为每行 3 个、4 个甚至动态配置列数(只需修改 array_chunk 第二个参数),大幅提升模板的可维护性与灵活性。
php免费学习视频:立即使用
踏上前端学习之旅,开启通往精通之路!从前端基础到项目实战,循序渐进,一步一个脚印,迈向巅峰!










