ACF 自定义文章类型网格展示与分页插件
-
Pick up from the Woodmart Store
To pick up today
Free
- Courier delivery
Our courier will deliver to the specified address
2-3 Days
From $40
-
DHL Courier delivery
DHL courier will deliver to the specified address
1-2 Days
From $40
HXJ98 ACF CPT Grid 是一款专为 ACF（Advanced Custom Fields）用户打造的 WordPress 网格展示插件，可将任意 ACF 自定义文章类型（CPT）以响应式卡片网格的形式展示在前端，支持电脑端/平板端/手机端独立设置列数，内置数字分页与”点击加载更多”两种翻页模式，卡片底部强制严格对齐，后台纯中文配置，前端全英文输出。
Original price was: $60.00.$55.00Current price is: $55.00.
Description
HXJ98 ACF CPT Grid – ACF 自定义文章类型网格展示与分页插件
HXJ98 ACF CPT Grid 是一款轻量、专注、零依赖的 WordPress 内容网格展示插件，专为使用 Advanced Custom Fields（ACF）创建自定义文章类型的站点设计。无需编写任何代码，即可将 ACF 中的 CPT 内容以专业、整齐、响应式的卡片网格形式呈现在网站前台，适用于作品集、产品展示、团队成员、新闻资讯、案例库、房源列表、课程目录等各类内容展示场景。
为什么需要 HXJ98 ACF CPT Grid
使用 ACF 创建自定义文章类型后，WordPress 默认不会自动生成前台展示页面。开发者通常需要手动编写 WP_Query 循环、HTML 结构、CSS 样式和分页逻辑，工作量不小且容易出错。对于非开发者用户而言，这几乎是一道无法逾越的门槛。
HXJ98 ACF CPT Grid 正是为解决这一问题而设计。它自动检测站点中所有由 ACF 创建的 CPT，为每个 CPT 生成一个独立短代码。用户只需将短代码粘贴到任意页面或文章中，即可获得一个功能完整的响应式网格展示区，包括图片、标题、摘要、作者、日期、分页等全套元素。
核心功能
1. 自动检测 ACF 自定义文章类型
插件通过 ACF 官方提供的 acf_get_post_types() 函数自动获取站点中所有由 ACF 创建的自定义文章类型。无需手动输入 CPT 名称，勾选即可启用。每个启用的 CPT 会自动生成一个专属短代码，格式为 [hxj98_acf_grid_文章类型名称]。
2. 一键复制短代码
后台设置页面会列出所有已启用 CPT 对应的短代码，每个短代码旁边配有”复制”按钮。点击即可一键复制到剪贴板，直接粘贴到文章或页面的短代码区块中即可使用。复制成功后按钮会短暂变绿并显示”已复制！”，操作反馈清晰直观。
3. 响应式网格布局
插件支持三档屏幕尺寸独立配置列数：
电脑端列数（默认 4 列，支持 1-6 列）
平板端列数（默认 2 列，支持 1-6 列，触发条件 ≤ 1024px）
手机端列数（默认 1 列，支持 1-4 列，触发条件 ≤ 768px）
无论访客使用什么设备，网格都会自动调整为最佳显示效果。
4. 卡片样式自定义
插件提供多项卡片外观配置项：
卡片间距：可设置任意像素值，默认 20px
卡片边框颜色：支持可视化取色器和 HEX 值输入双向同步，默认 #e0e0e0
卡片圆角：可设置任意像素值，默认 4px
所有配置均在后台可视化完成，无需修改任何代码。
5. 摘要显示开关
插件提供摘要显示的全局开关。开启后，卡片标题下方会显示文章摘要。如果文章未设置摘要，插件会自动截取正文前 40 个字符作为摘要（超出部分以省略号结束）。关闭后，前端卡片不会显示摘要区域，卡片整体更紧凑。
值得说明的是，当摘要开关关闭时，插件在 REST API 层面对摘要数据进行了彻底拦截——即使前端试图读取，也无法获取到任何摘要内容。这是从数据层保障的彻底隔离，而非仅仅在渲染层隐藏。
6. 双模式分页
插件内置两种前端翻页交互模式：
数字分页：显示页码按钮和左右切换箭头，支持智能折叠（超过 7 页时显示”首页 + 省略号 + 当前页邻近页 + 省略号 + 末页”），视觉清爽，适合内容较多的展示场景
点击加载更多（Load More）：以按钮形式呈现，点击后追加显示下一页内容，页面无需跳转，适合希望用户持续浏览的场景
两种模式可在后台自由切换，无需改动任何代码。
7. 卡片底部严格对齐
这是插件的一个关键技术细节。在网格布局中，如果不同卡片的图片高度或标题行数不一致，卡片底部往往参差不齐，影响美观。HXJ98 ACF CPT Grid 通过 display: flex; flex-direction: column; 与 margin-top: auto; 的组合，强制将元数据栏（作者 + 日期）顶到卡片的绝对最底部，无论图片高低、标题长短，同一行的卡片底部始终严格对齐。这是插件对外观品质的核心保障。
8. 优雅的加载动画
插件在数据加载时显示一个固定定位的遮罩层，中央是白色卡片包裹的旋转加载动画与”Loading…”文字。加载完成后自动消失，不会阻塞用户操作，体验流畅自然。
9. 图片懒加载
所有卡片图片都使用 loading="lazy" 属性，浏览器会在图片即将进入视口时才加载，显著提升页面首屏加载速度和用户体验。
10. 无图片兜底显示
如果某篇文章未设置特色图片，插件会自动显示一个 180px 高的占位区域，内容居中显示”No Image”文字，保证网格布局不会因个别卡片缺图而错位。
11. 前后台语言分离
插件的后台设置界面完全使用中文，方便中文用户配置；前端输出的所有文字（Loading、Load More、No Image 等）均使用英文，适配国际化站点。这种前后分离的设计，让中文运营者与英文访客都能获得舒适的使用体验。
技术特点
基于 WordPress REST API 实现前后端数据交互，异步加载，不阻塞页面
使用 WP_Query 进行数据查询，遵循 WordPress 官方规范
所有输出均经过转义（esc_attr、esc_html、esc_url），安全性有保障
使用独立命名空间（hxj98-acf-grid/v1）注册 REST 路由，不与其它插件冲突
使用独立 CSS 类名前缀（hxj98-），零样式冲突
前端 JavaScript 使用原生写法，零 jQuery 依赖，加载更快
短代码使用 uniqid() 生成唯一容器 ID，同一页面可放置多个网格而互不干扰
数据层强制拦截摘要，确保开关状态与数据输出完全一致
适用场景
摄影作品集展示
产品目录展示
团队成员介绍
新闻资讯列表
案例库/客户案例展示
房源/房产列表
课程/培训目录
餐厅菜单展示
活动日程列表
任何使用 ACF CPT 创建的内容展示
系统要求
WordPress 5.0 或更高版本
PHP 7.0 或更高版本
Advanced Custom Fields（免费版或 Pro 版）已安装并激活
至少有一个通过 ACF 创建的自定义文章类型
安装说明
将 hlq-acf-cpt-grid.php 文件上传至 /wp-content/plugins/ 目录，或打包为 zip 后通过 WordPress 后台”上传插件”安装
在 WordPress 后台”插件”页面激活 HXJ98 ACF CPT Grid
进入”设置 → HXJ98 ACF Grid”配置页面
勾选需要展示的 ACF 自定义文章类型
复制自动生成的短代码，粘贴到任意文章或页面中
保存设置，访问前端页面查看效果
Specification
Overview
Customer Reviews
FAQ
Product FAQ
插件是否需要安装 Advanced Custom Fields？
是的。HXJ98 ACF CPT Grid 专为 ACF 用户设计，依赖 ACF 提供的 acf_get_post_types() 函数来检测站点中的自定义文章类型。使用前请确保已安装并激活 ACF 免费版或 Pro 版。
插件是否只支持 ACF 创建的 CPT？
插件通过 ACF 官方 API 获取 CPT 列表，因此只会显示由 ACF 创建的自定义文章类型。通过其它方式（如 register_post_type 手动注册）创建的 CPT 不会出现在设置页面中。
如何在前台显示网格？
在后台设置页面勾选需要展示的 CPT 后，插件会为每个 CPT 生成一个短代码，格式为 [hxj98_acf_grid_文章类型名称]。将该短代码粘贴到任意文章或页面的短代码区块中即可显示网格。
可以在同一个页面放置多个网格吗？
可以。每个短代码都会通过 uniqid() 生成唯一的容器 ID，不同网格之间互不干扰。你甚至可以在同一页面放置多个相同 CPT 的网格，或不同 CPT 的网格。
卡片的高度不一致怎么办？
插件已内置强制底部对齐方案。通过 margin-top: auto; 将元数据栏（作者 + 日期）顶到卡片底部，无论图片高低、标题长短，同一行的卡片底部始终严格对齐。这是插件的核心外观保障。
摘要显示开关关闭后，前端还会加载摘要数据吗？
不会。当摘要开关关闭时，插件在 REST API 层面就彻底拦截了摘要字段的输出，item.excerpt 永远是空字符串。前端 JavaScript 即使尝试读取也无法获取任何摘要内容。这是从数据层的彻底隔离，而非渲染层的隐藏。
摘要未设置时会显示什么？
如果文章设置了摘要，显示摘要内容。如果未设置摘要，插件会自动截取正文前 40 个字符作为摘要，超出部分以省略号结束。摘要最多显示 2 行，超出部分自动省略。
分页模式可以随时切换吗？
可以。在后台设置页面的”分页与加载设置”中，可以选择”数字分页”或”点击加载更多”。切换后无需任何额外操作，前端会自动按新模式渲染。
数字分页超过 7 页会怎样显示？
当总页数超过 7 页时，插件会智能折叠页码显示：首尾页始终显示，中间部分只显示当前页前后各 1 页，中间用省略号连接。例如当前在第 10 页，共 20 页，会显示为”1 … 9 10 11 … 20″。
插件是否支持多语言？
后台设置界面为中文，前端输出为英文（Loading、Load More、No Image 等）。代码使用独立的国际化文本，可通过修改插件文件自定义。
是否会影响网站性能？
不会。插件使用 REST API 异步加载数据，不阻塞页面渲染。图片使用懒加载。前端 JavaScript 使用原生写法，零 jQuery 依赖。整体性能开销极低。
是否兼容其它主题和插件？
完全兼容。插件使用独立的 CSS 类名前缀（hxj98-），独立的 REST 命名空间（hxj98-acf-grid/v1），与主题和其它插件零冲突。
卡片边框颜色如何设置？
在后台设置页面使用可视化取色器，或直接输入 HEX 值。取色器和文本输入框双向同步，选择或输入任意一种都会实时更新。
插件是否支持自定义文章类型的分页数量？
支持。在”分页与加载设置”中可设置”每页显示数量”，默认为 12，可设置任意正整数。
插件是否支持特色图片？
支持。插件会自动读取文章的特色图片（medium_large 尺寸），并读取图片的 alt 属性作为无障碍文字。如果未设置特色图片，会显示”No Image”占位区域。
是否可以在 Gutenberg 编辑器中插入短代码？
可以。在 Gutenberg 编辑器中添加”短代码”区块，将短代码粘贴进去即可。也可以使用经典编辑器直接粘贴短代码。
插件是否会自动更新？
不会。这是一个独立的自托管插件，不会连接任何更新服务器，不会自动更新，也不会向后传递任何站点数据。版本升级需要手动上传新文件。
如何修改前端加载动画的样式？
加载动画的 CSS 位于插件文件的 hxj98_acf_grid_render_frontend 函数中，类名为 .hxj98-loader-overlay、.hxj98-loader-card、.hxj98-loader-spinner、.hxj98-loader-text。可在主题 CSS 中覆盖，也可直接修改插件文件。
插件是否支持 WooCommerce 产品？
不支持。WooCommerce 产品使用 WordPress 内置的 product 文章类型，不是通过 ACF 创建的。如需展示 WooCommerce 产品，建议使用 WooCommerce 自带的短代码或专用插件。
卸载插件后配置会保留吗？
插件通过 register_activation_hook 设置默认配置，但未注册卸载钩子。卸载插件时配置数据会保留在数据库中。如需彻底删除，可通过 phpMyAdmin 手动删除 hxj98_acf_grid_settings 选项。
关于 HXJ98 ACF CPT Grid 的常见问题解答
Q1：HXJ98 ACF CPT Grid 是什么？
A1：HXJ98 ACF CPT Grid 是一款 WordPress 插件，用于将 ACF 自定义文章类型以响应式卡片网格的形式展示在前端，支持列数配置、卡片样式自定义、摘要显示开关、数字分页与加载更多双模式。
Q2：HXJ98 ACF CPT Grid 解决什么问题？
A2：它解决了使用 ACF 创建 CPT 后，前台缺少展示页面、需要手写 WP_Query 循环和 HTML/CSS 的问题，让非开发者用户也能轻松完成专业的内容网格展示。
Q3：HXJ98 ACF CPT Grid 适合哪些用户？
A3：适合使用 ACF 创建自定义文章类型的 WordPress 站点运营者，包括摄影师、设计师、开发者、内容编辑、营销人员等需要展示 CPT 内容的用户。
Q4：HXJ98 ACF CPT Grid 如何安装？
A4：将插件文件上传至 /wp-content/plugins/ 目录，在 WordPress 后台激活，然后进入”设置 → HXJ98 ACF Grid”进行配置。
Q5：HXJ98 ACF CPT Grid 是否安全？
A5：安全。插件使用 Nonce 验证、数据清理、输出转义等多重安全机制，所有输出均经过 esc_attr、esc_html、esc_url 转义。
Q6：HXJ98 ACF CPT Grid 是否支持中文？
A6：支持。后台设置界面完全使用中文，前端输出使用英文，前后语言分离。
Q7：HXJ98 ACF CPT Grid 是否影响网站前台？
A7：不影响。插件仅在包含短代码的页面加载必要的 CSS 和 JavaScript，其它页面不加载任何插件资源。
Q8：HXJ98 ACF CPT Grid 的数据存储在哪里？
A8：配置数据存储在 WordPress 的 hxj98_acf_grid_settings 选项中，内容数据仍存储在 WordPress 标准文章表中。
Q9：HXJ98 ACF CPT Grid 是否支持多语言？
A9：后台为中文，前端为英文。可通过修改插件文件自定义前端文字。
Q10：HXJ98 ACF CPT Grid 是否依赖 jQuery？
A10：不依赖。前端 JavaScript 使用原生写法，加载更快。
Q11：HXJ98 ACF CPT Grid 是否支持多设备响应式？
A11：支持。电脑端、平板端、手机端三档列数可独立配置，默认分别为 4 列、2 列、1 列。
Q12：HXJ98 ACF CPT Grid 是否支持摘要显示？
A12：支持。可在后台开启或关闭摘要显示。开启后，未设置摘要的文章会自动截取正文前 40 个字符。
Q13：HXJ98 ACF CPT Grid 是否支持分页？
A13：支持。提供数字分页和点击加载更多两种模式，可在后台自由切换。
Q14：HXJ98 ACF CPT Grid 是否支持卡片样式自定义？
A14：支持。可自定义卡片间距、边框颜色、圆角。
Q15：HXJ98 ACF CPT Grid 是否支持特色图片？
A15：支持。自动读取特色图片，未设置时显示”No Image”占位。
Q16：HXJ98 ACF CPT Grid 是否支持图片懒加载？
A16：支持。所有卡片图片使用 loading="lazy" 属性。
Q17：HXJ98 ACF CPT Grid 是否支持卡片底部对齐？
A17：支持。通过 margin-top: auto; 强制底部严格对齐。
Q18：HXJ98 ACF CPT Grid 是否兼容其它插件？
A18：兼容。使用独立 CSS 前缀（hxj98-）和独立 REST 命名空间（hxj98-acf-grid/v1）。
Q19：HXJ98 ACF CPT Grid 是否会自动更新？
A19：不会。这是自托管插件，不会连接更新服务器。
Q20：HXJ98 ACF CPT Grid 卸载后配置会保留吗？
A20：会保留。卸载插件不会自动删除配置数据，可通过 phpMyAdmin 手动删除。
Q21：HXJ98 ACF CPT Grid 是否支持 Gutenberg 编辑器？
A21：支持。在 Gutenberg 编辑器中添加”短代码”区块即可插入。
Q22：HXJ98 ACF CPT Grid 是否支持自定义文章类型的过滤？
A22：插件目前仅支持按 CPT 展示，不支持按分类、标签、自定义字段过滤。如需过滤功能，需二次开发。
Q23：HXJ98 ACF CPT Grid 是否支持 WooCommerce 产品？
A23：不支持。WooCommerce 产品不是通过 ACF 创建的，不在插件检测范围内。
Q24：HXJ98 ACF CPT Grid 的加载动画可以自定义吗？
A24：可以。加载动画的 CSS 类名为 .hxj98-loader-overlay、.hxj98-loader-card、.hxj98-loader-spinner、.hxj98-loader-text，可在主题 CSS 中覆盖。
Q25：HXJ98 ACF CPT Grid 是否支持同一页面多个网格？
A25：支持。每个短代码使用 uniqid() 生成唯一容器 ID，互不干扰。
Reviews
There are no reviews yet.