Wordpress 编辑 <img> 标记以包含数据属性

Posted 2023-05-09

【中文标题】Wordpress 编辑 <img> 标记以包含数据属性

【英文标题】：Wordpress edit <img> markup to include data attribute

【发布时间】：2016-01-06 07:03:01

【问题描述】：

我在 Wordpress 媒体上传器中添加了一个自定义字段，用于存储 Vimeo ID。我需要将此自定义字段数据（如果已输入）拉到 Wordpress 中默认 <img> 标记的标记中 - 我希望将其添加为 data- 属性。

在网上搜索后，我没有在这里尝试什么的线索，有人有这方面的经验吗？

如果存在上述data- 属性，我还想自动将“video-thumb”类添加到该图像。

我可以按如下方式调用 cusotm 字段，但不知道如何将其合并到 <img> 标签中：

$video_url = get_post_meta($id, 'video-url', true);

默认 Wordpress <img> 代码

<img class="aligncenter size-large wp-image-114" src="#"    />

期望的结果

<img class="video-thumb aligncenter size-large wp-image-114" src="#"    data-vimeo-id="69171201" />

【参考方案1】：

你可以在你的帖子循环中试试这个

$key = 'your custom meta key'

echo get_post_meta($post->ID, $key, true);

全面实施

<?php
$query = new WP_Query('showposts=3');
if ($query->have_posts()):
    while ($query->have_posts()):
        $query->the_post();
        $vimeo = get_post_meta($post->ID, 'your_key', true);
        the_title();
?>

<img class="video-thumb aligncenter size-large wp-image-114" src="#"    data-vimeo-id="<?php echo $vimeo; ?>" />

<?php
    endwhile;
endif;
wp_reset_query();
?>

更多信息请阅读here