Question

我在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);

?>

Answer 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文档获取图像并添加新的类（video-thumb）和数据属性（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。

希望这可以帮助你： - ）

Answer 2

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

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

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

然后只需粘贴此代码<?php the_post_thumbnail('vimeo', array( 'class' => "vimeo-id")); ?>即可进行设置。

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

将数据属性和类添加到WP中的所有图像

2 个答案: