Thêm thuộc tính vào hình ảnh trong media

Bài viết này mình sẽ hướng dẫn cho bạn cách thêm thuộc tính vào hình ảnh trong media, ngoài ra thì bạn cũng có thể chỉnh sửa thuộc tính của hình ảnh trong quá trình chèn hình vào bài viết hoặc gán hình ảnh thumbnail cho bài viết.

Với các hàm này bạn có thể thêm thông tin cho hình ảnh nhằm xử lý các sự kiện trong javascript hoặc với mục đích bất kỳ. Bây giờ thì bạn mở tập tin functions.php của giao diện lên và thêm vào các hàm sau:

function sb_theme_custom_attachment_field($form_fields, $post) {
    $form_fields['store-url'] = array(
        'label' => 'Store url',
        'input' => 'text',
        'value' => get_post_meta($post->ID, 'store_url', true)
    );
    return $form_fields;
}
add_filter('attachment_fields_to_edit', 'sb_theme_custom_attachment_field', 10, 2);

function sb_theme_custom_save_attachment_field($post, $attachment) {
    if(isset($attachment['store-url'])) {
        update_post_meta($post['ID'], 'store_url', $attachment['store-url']);
    }
    return $post;
}
add_filter('attachment_fields_to_save', 'sb_theme_custom_save_attachment_field', 10, 2);

Sau khi bạn thêm 2 đoạn code bên trên vào tập tin functions.php của giao diện, bạn bắt đầu nhất insert media để xem trình quản lý hình ảnh và bạn sẽ thấy có mục tùy chọn bạn vừa mới tạo.

Để thay đổi thông tin hình ảnh trong quá trình gửi từ media sang trình soạn thảo của bài viết thì bạn cần làm thêm một công đoạn nữa. Cũng là thêm vào tập tin functions của giao diện, bạn thêm nối tiếp bên dưới các hàm bên trên nhé.

function sb_theme_edit_image_send_to_editor($html, $id, $caption, $title, $align, $url, $size) {
    $doc = new DOMDocument();
    $doc->loadHTML($html);
    $tags = $doc->getElementsByTagName('img');
    if(count($tags) > 0) {
        $tag = $tags->item(0);
        $data_url = get_post_meta($id, 'store_url', true );
        $tag->setAttribute('data-url', $data_url);
        $html = $doc->saveHTML($tag);
    }
    return $html;
}
add_filter('image_send_to_editor', 'sb_theme_edit_image_send_to_editor', 10, 9);

Như vậy là sau khi bạn hoàn thành xong các code này, bạn chèn ảnh vào bài viết thì bên trong thẻ img của hình ảnh sẽ có thêm thông tin data-url với đường dẫn như bạn nhập trong trình quản lý media. Chúc bạn thành công.

Lại Đình Cường