ACF5：对 HTML 元素 ID 使用字段名称而不是字段键

Question

我接管了一个严重依赖高级自定义字段的插件。为了进一步开发，我将 ACF 从版本 4 更新到最新版本 (5.8.x)。

插件包括依赖于 HTML 元素（例如输入）ID 的样式和脚本，例如 acf-field-header_caption，其中 header_caption 是字段名称。这适用于 ACF 4，但在版本 5 中，对编码器不太友好的字段键（例如 5ac098bae96e4）用于 ID 和类，例如：acf-field-5ac098bae96e4。 （自定义字段被添加到 post_type 并在后端的 post_type 上进行编辑。）

例子：

ACF v4 中的输入字段（我需要的）：

<input type="text" id="acf-field-header_caption" class="text" name="fields[field_5ac098bae96e4]" value="" placeholder="">

ACF v5 中的相同字段（我不想要的）：

<input type="text" id="acf-field-5ac098bae96e4" class="text" name="fields[field_5ac098bae96e4]" value="" placeholder="">

有没有办法恢复到使用字段名称而不是字段键的 HTML ID？

Answer 1

John Huebner 在 ACF 支持论坛上回答了这个问题（谢谢！）。

无法恢复到旧的类和 ID 格式。这意味着，当更新到 ACF 5 时，您必须更新自定义脚本和 CSS。

如果更喜欢使用字段名称而不是字段键，例如 jQuery 或 CSS 选择器，可以在包装器 div 中使用 data-name 属性。从上面引用 header_caption 输入字段的选择器示例：

[data-name="header_caption"] input

（这适用于文本字段、单选字段等在包装器中有多个输入。）

我引用原答案：

不，没有办法恢复字段 ID 值。唯一可以找到字段名称的地方是包装器 div data-name="field_name_here"。

除了更改 ID 和类之外，即使更改它们也可能对 JS 没有帮助。如果 JS 依赖于 ACFs JS，那么它可能无论如何都不会工作。 ACF5 中的 JS 与 ACF4 完全不同，任何与之交互的自定义​​ JS 都需要完全重建。