Tạo Custom Field Upload Media trên WordPress

Trong bài viết dưới đây, mình sẽ hướng dẫn các bạn tạo trường tùy chỉnh trong WordPress bằng nút tải lên media để tải ảnh lên:

Bước 1: Đầu tiên chúng ta tạo một metabox với giao diện như trên:

<?php
function vinasupport_custom_meta_boxes( $post_type, $post ) {
    add_meta_box(
        'vinasupport-meta-box',
        __( 'Custom Image' ),
        'render_vinasupport_meta_box',
        array('post', 'page'), //post types here
        'normal',
        'high'
    );
}
add_action( 'add_meta_boxes', 'vinasupport_custom_meta_boxes', 10, 2 );
  
function render_vinasupport_meta_box($post) {
    $image = get_post_meta($post->ID, 'vinasupport_custom_image', true);
    ?>
    <table>
        <tr>
            <td><a href="#" class="vinasupport_upload_image_button button button-secondary"><?php _e('Upload Image'); ?></a></td>
            <td><input type="text" name="vinasupport_custom_image" id="aw_custom_image" value="<?php echo $image; ?>" /></td>
        </tr>
    </table>
    <?php
}

Bước 2: Nhúng File script vào

<?php
function vinasupport_include_script() {
  
    if ( ! did_action( 'wp_enqueue_media' ) ) {
        wp_enqueue_media();
    }
  
    wp_enqueue_script( 'vinasupport-script', get_stylesheet_directory_uri() . '/js/vinasupport-script.js', array('jquery'), null, false );
}
add_action( 'admin_enqueue_scripts', 'vinasupport_include_script' );

Bước 3: trong File vinasupport-script.js, bạn thêm trình xử lý tải lên

Tải game crack việt hoá tại: https://daominhha.com

jQuery(function($){
    $('body').on('click', '.vinasupport_upload_image_button', function(e){
        e.preventDefault();
        let vinasupport_uploader = wp.media({
            title: 'Custom image',
            button: {
                text: 'Use this image'
            },
            multiple: false
        }).on('select', function() {
            let attachment = vinasupport_uploader.state().get('selection').first().toJSON();
            $('#vinasupport_custom_image').val(attachment.url);
        })
        .open();
    });
});

Bước 4: Lưu thông tin khi gửi bài

<?php
function vinasupport_save_postdata($post_id)
{
    if (array_key_exists('vinasupport_custom_image', $_POST)) {
        update_post_meta(
            $post_id,
            'vinasupport_custom_image',
            $_POST['vinasupport_custom_image']
        );
    }
}
add_action('save_post', 'vinasupport_save_postdata');

Như vậy là chúng ta đã tạo thành công một phương tiện tùy chỉnh trong wordpress.