如何从 Gutenberg block gallery 获取图像链接并将它们作为 html 数据属性添加到 wordpress 中的按钮

Question

我在 post 中使用古腾堡画廊块，我正在尝试创建一个按钮，其中包含画廊块中的所有图像 ID 作为 html 数据属性，以便稍后当我将内容输出到页面时，我可以使用 javascript 访问这些 ID。基本上我正在尝试为自定义 post 类型创建灯箱功能。

问题是我无法访问古腾堡画廊块数据。

这是我的代码

while ($custom_post_type->have_posts()) {
    $custom_post_type->the_post();
    $gallery = get_post_gallery(get_the_id(), false);
    $ids = explode(",", $gallery['ids']);
}

这是具有 html 数据属性的按钮

<button class="gallery" 
<?php 
for ($i = 0; $i < count($ids); $i++) {
  $img_link = wp_get_attachment_image_url($ids[$i], 'full');
  echo "data-img-" . $i . " = " . $img_link . " ";
}?>
>
Light-box
</button>

但是不行，$ids是空的。它打印出这个

<button class="gallery">Light-box</button>

感谢您的帮助！

编辑

我在 post 页面上使用 wordpress 块，我不太确定它们是如何生成的，但它们开箱即用。

Answer 1

"it does not work, $ids is empty."

该块是默认的 wordpress 块之一，又名“核心块”。为了访问其数据，您需要使用 parse_blocks 函数而不是 get_post_gallery。这就是为什么你的变量是空的。

---

因此，获得所需内容的整体工作流程为：

1. 检查你的post是否有任何块，使用has_block函数。 has_block^Docs
2. 如果是，则使用 parse_blocks 函数获取所有块（包括画廊块）。 parse_blocks^Docs
3. parse_blocks 将 return 您的 post 中使用的所有块的数组，因此遍历它们并查看哪个称为 "core/gallery".
4. "core/gallery" 块有 "attributes" 和 "ids" 用于您在管理面板中添加的每个图像。
5. 获得 "ids" 后，您应该能够使用 wp_get_attachment_image_url 函数创建自定义按钮和图像链接。 wp_get_attachment_image_url^Docs

---

作为 POC：

请看下面代码：

if (has_block("gallery", get_the_content())) 
{
  $post_blocks = parse_blocks(get_the_content());
  foreach ($post_blocks as $post_block) 
  {
    if ("core/gallery" == $post_block["blockName"]) 
    {
      $ids = $post_block["attrs"]["ids"];
    }
  }
}

这是按钮：

<button class="gallery" 
<?php
for ($i = 0; $i < count($ids); $i++) {
  $img_link = wp_get_attachment_image_url($ids[$i], "full");
  echo "data-img-" . $i . " = " . $img_link . " ";
}
?>
>
Light Box 
</button>

哪个会 return:

注：

• 我已经使用了 get_the_content 函数，假设您在基于您在问题中提供的代码的循环中。如果您不在循环中或者您需要在循环外使用代码，您可以使用 global $post; $post->post_content; 代替。

---

这个答案已经在 wordpress 5.8 上测试过并且有效。