为 WP 中的所有图像添加数据属性和类答案

【问题标题】：Add data-attribute and class to all images in WP为 WP 中的所有图像添加数据属性和类
【发布时间】：2016-03-01 11:51:32
【问题描述】：

我在 Wordpress 中为图像创建了一个自定义字段，该字段是使用以下代码正确创建和保存的。

但是，如果该图像上的字段存在值，我需要将此字段 vimeo-id 插入到插入 WYSIWYG 编辑器的任何 <img> 标记中（作为 data 属性）。另外，如果该值存在，我还想将 .video-thumb 类添加到图像中。

电流输出类似于以下内容：

<img src="ImageURL.jpg" alt="Image Alt" width="1920" height="1080" class="size-full wp-image-0000">

所需输出（如果存在 vimeo-id）：

<img src="ImageURL.jpg" alt="Image Alt" width="1920" height="1080" class="size-full wp-image-0000 video-thumb" data-vimeo-id="12345678">

有人可以帮忙吗？

自定义字段函数

/* Add custom field to attachment */
function image_attachment_add_custom_fields($form_fields, $post) {
    $form_fields["vimeo-id"] = array(
        "label" => __("Vimeo ID"),
        "input" => "text",
        "value" => get_post_meta($post->ID, "vimeo-id", true),
    );
    return $form_fields;
}
add_filter("attachment_fields_to_edit", "image_attachment_add_custom_fields", null, 2);

/* Save custom field value */
function image_attachment_save_custom_fields($post, $attachment) {
    if(isset($attachment['vimeo-id'])) {
        update_post_meta($post['ID'], 'vimeo-id', $attachment['vimeo-id']);
    } else {
        delete_post_meta($post['ID'], 'vimeo-id');
    }
    return $post;
}
add_filter("attachment_fields_to_save", "image_attachment_save_custom_fields", null , 2);

?>

【问题讨论】：

标签： php html wordpress filter

【解决方案1】：

我想你需要的是这样的：

add_filter( 'image_send_to_editor', 'add_vimeo_data_to_image', 10, 2 );

function add_vimeo_data_to_image( $html, $attachment_id ) 
{
    if ($attachment_id)
    {
        //check if there is vimeo video id for the image
        $vimeo_id = get_post_meta($attachment_id, 'vimeo-id', true);

        //if there is a vimeo id set for the image, add class and data-attr
        if ($vimeo_id)
        {
            $document = new DOMDocument();
            $document->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

            $imgs = $document->getElementsByTagName('img');

            foreach ($imgs as $img)
            {
                //get the current class
                $current_image_class = $img->getAttribute('class');

                //add new class along with current class
                $img->setAttribute('class',$current_image_class . ' video-thumb');

                //add the data attribute
                $img->setAttribute('data-vimeo-id', $vimeo_id);
            }

            $html = $document->saveHTML();
        }
    }

    return $html;
}

这将获取附件 id 并检查数据库中的 vimeo id。如果找到 vimeo id，则使用 dom 文档获取图像并添加新的 class (video-thumb) 和 data 属性 (data-vimeo-id)。到图片。

但是如果你的PHP版本低于PHP 5.4且Libxml低于Libxml 2.6，那么$document->loadHTML没有第二个选项参数。你必须使用：

# remove <!DOCTYPE
$document->removeChild($document->doctype);

# remove <html><body></body></html>
$document->replaceChild($document->firstChild->firstChild->firstChild, $document->firstChild);

$html = $document->saveHTML();

或

$html = preg_replace('~<(?:!DOCTYPE|/?(?:html|head|body))[^>]*>\s*~i', '', $html);

获取没有 Doctype、head 和 body 的 HTML。

希望这对你有帮助:-)

【讨论】：

嗨@sabari。非常感谢你的帮助。然而不幸的是，当把它放到我的functions.php文件中，然后试图在WP编辑器中放置一个图像时，什么都没有出现，它几乎就像是冻结一样？我喜欢您的代码正在执行的操作，但正如我所说，它似乎无法在后端运行（这意味着我无法对其进行测试）。知道如何解决吗？谢谢
我认为最好的选择是在 wp-config.php 中启用调试，然后在 chrome 或 firefox 中打开网络选项卡，并检查插入到发布按钮时您的请求的响应是什么点击。
启用调试后，我在编辑器页面顶部看到以下消息：注意：自 4.3.0 版起，WP_Widget 的调用构造方法已被弃用！改用__construct()。在第 3457 行的 /homepages/26/d247113712/htdocs/kurdmem/staging/wp-includes/functions.php 当我单击添加媒体时，图像也不会加载，仅在调试模式下。
我不确定这个问题。如果只有我可以获得访问权限，我就可以检查问题。我的 WordPress 版本是 4.3，它对我来说很好用。您在哪里添加了此过滤器？
当您点击插入帖子或添加媒体按钮时，您是否检查过网络标签显示的内容？

【解决方案2】：

我不确定我是否完全理解了你的问题，但我能想到的最简单的方法是。

首先在你的functions.php文件中创建一个自定义函数。

add_theme_support( 'post-thumbnails' ); 
add_image_size( 'vimeo', 1920, 1080 );`

然后只需粘贴此代码<?php the_post_thumbnail('vimeo', array( 'class' => "vimeo-id")); ?>，您就应该设置好了。

您当然可以使用函数部分进行编辑，但输出几乎保持不变。

【讨论】：

嘿@open。感谢您的回复。我想我需要一些比这更复杂的东西，因为我需要将新数据和类应用于 the_content 中的所有图像。我无法在模板文件中单独添加图像。
@dungey_140 - 为什么不直接从图像 url 中完全去除 <img> 标签，然后手动提取图像 url 并回显自定义分类法或您正在使用的任何内容数据字段？肯定是草率的方式，但它可能会奏效。 wordpress.org/support/topic/retrieveing-featured-image-url
我需要 the_content 显示为客户端设置。无法手动编辑模板文件。