Wordpress编辑<标记以包含数据属性 - Wordpress edit <img> markup to include data attribute

Wordpress edit <img> markup to include data attribute

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

在网上搜索了一下，我没有线索在这里尝试什么，有人有任何经验吗?

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

我能够调用自定义字段如下，但不知道如何将其合并到<img>标签:

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

默认Wordpress <img>代码

<img class="aligncenter size-large wp-image-114" src="#" alt="" width="1024" height="435" />

期望结果

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

你可以在你的post loop中试试

$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="#" alt="" width="1024" height="435" data-vimeo-id="<?php echo $vimeo; ?>" />
<?php
    endwhile;
endif;
wp_reset_query();
?>

请从这里阅读更多信息