用 HappyFiles 做下载区

“片段包含的功能”

• text: “使用前提”

• text: “完整源代码”

• text: “使用方法”

• text: “局限”

• text: “小结”

— 除了正在连载的「用 HappyFiles、Meta Box 和 Bricks 做自定义画廊与滑块」系列之外，作者还写了一个能输出指定文件夹所有子文件夹的代码片段。如果你想做一个自定义「下载区」，这个片段非常实用：所有可下载文件都可以在 WP 媒体库（Media）里管理，文档/图片变动、删除或新增时不需要手动更新页面。 ## 片段包含的功能 - 图标生成

• 可选择带或不带 CSS 规则输出

• 自动按文件夹分组文件/图片

• 过滤器支持添加自定义链接 ## 使用前提 基本上你只需要创建文件夹结构并上传文件。注意两点： 1. 所有想包含的文件夹必须是同一个父文件夹的子文件夹；

2. 父文件夹里面的文件不会被脚本包含——脚本只处理子文件夹！ 一个可行的目录结构： 如上图，父文件夹里也有一些文件，但它们不会出现在输出里（见文章顶部效果图）。这一点要记住。 ## 完整源代码 `<?php

function get_happyfile_childFolders($parentSlug)

{ $happyfile_terms = get_terms([ “taxonomy” => HAPPYFILES_TAXONOMY, “hide_empty” => false, ]); $parentID = false; // GET THE ID OF THE PARENT FOLDER foreach ($happyfile_terms as $term) { if ($term->slug == $parentSlug || $term->name == $parentSlug || $term->term_id == $parentSlug) { $parentID = $term->term_id; } } if (!$parentID){ return false; } $folders = []; foreach ($happyfile_terms as $term) { if ($term->parent == $parentID) { $term = json_decode(json_encode($term), true); $folders[$term[“slug”]] = $term; } } return $folders;

} function outputFiles($folderSlug)

{ global $wpdb; $folders = get_happyfile_childFolders($folderSlug); if (!$folders){ echo ‘No Folder found, please check the passed Parameter!’; return; } echo ‘

} function outputDefaultStyles()

{ ?>

## 使用方法 把上面的代码复制到子主题的functions.php或你用的代码执行工具里。 在 WordPress 创建页面并用 Bricks 打开，在 Bricks 里使用 **Code 元素**，有两种输出方式（带或不带 CSS）： **带 CSS 样式**，这样调用：outputDefaultStyles();

outputFiles( ‘SLUG/NAME/ID’ ); // pass the slug, name or ID of your happyfiles-parentfolder here> 更新：现在传给outputFiles()的参数可以是 HappyFiles 文件夹的 **SLUG**、**NAME** 或 **ID** 任意一种，如上注释所说。 **不带 CSS 样式**：省略第一个函数outputDefaultStyles()，自己写 CSS 样式。当然你也可以用预置样式，直接在 outputDefaultStyles()函数开头的 CSS 变量里改颜色输出。 ### 怎么换图标 每个文件前面的图标可以手动替换：从 FontAwesome、Bootstrap Icons 等地方下载一个图标，把 SVG 内容做 URL 编码。可以用这个在线工具：<https://yoksel.github.io/url-encoder/> 拿到 URL 编码后的 SVG 后，替换源码里对应部分——具体位置在outputDefaultStyles()函数里.file a:before {这一行，找到-webkit-mask-image: url(开头的那行，把里面的内容换成你的图标即可。 ### 用过滤器添加自定义内容 这个过滤器可以让你在任意子文件夹里添加自定义链接。 想要一整块都是自定义链接的 Section？因为过滤器是在遍历所有子文件夹时运行的，你需要创建一个**空的子文件夹**，就能得到只有自定义链接的区块。当然，你也可以往那个文件夹里放文件，自定义链接会和文件夹内容混排。 在代码块里这样调用过滤器：add_filter( ‘foldersCustomContent’, function( $links, $name ) { // Here you can specify the foldername to which you want to add custom links. if ( $name != ‘THE_NAME_OF_THE_FOLDER_YOU_WANT_TO_ADD_SOMETHING’ ) { return $links; } $links[‘NAME OF THE LINK’] = ‘https://example.com’; $links[‘NAME OF ANOTHER LINK’] = ‘https://example.com’; return $links;

}, 10, 2);这个过滤器回调里有两个变量可用： -$links`：当前循环文件夹的链接数组。可以像示例那样往里加任意链接甚至外部文件。

• $name：目标文件夹的 NAME（不是 slug）——也就是你在 HappyFiles 里定义的显示名称。 这样，自定义链接就加进你的文件夹循环了。 ## 局限 查询本身还有优化空间——用 wp_query 可以替代 $wpdb，不过作者目前没遇到性能问题。 > 相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

适用场景与常见误区

适合：给客户/会员发资料包、文档、素材，且文件常更新的场景——用 HappyFiles 分类 + 自动列表，加新文件不用改页面。误区：一是把所有文件堆一个文件夹，列表越滚越长难找，按 HappyFiles 分类拆细；二是没限制下载权限，敏感资料被搜到，记得配合登录/权限；三是前端没搜索或筛选，文件多了用户找不到。它不像页面构建器可视化，但维护下载区极省事。

小结 这绝对不是一篇新手文章，但如果你只是复制粘贴片段、只玩 CSS，新手也能跑起来。它不像页面构建器那么可视化，但干起活来很漂亮，而且能在任何网站上省下大量维护下载区的时间。反正文件总要上传，用这个片段就不用在各个位置反复添加上传内容——脚本全帮你处理了。

延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

HappyFiles 是什么？ 它是 WordPress 媒体库的分类管理插件，配合本文片段能把某类文件自动列成下载区。

文件更新要改页面吗？ 不用，往对应分类加文件，前端列表自动更新。

下载区要登录才能看吗？ 看需求，敏感资料配合 WordPress 权限/登录，别让搜索引擎抓到。

文件太多怎么让用户找？ 前端加搜索或按 HappyFiles 分类做筛选，别只堆一个长列表。

• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程