Gọi upload media wordpress

25/07/2021 06:55 1023

Chúng ta sẽ làm nút upload media wordpress như hình bên dưới: (lưu ý bên dưới là mã html và js thôi còn submit và lưu dữ liệu như thế nào thì chúng ta chế biến thêm nhé)

Table of Contents

1. Mã html

<div class="form-group  row">
    			<label for="email-logo" class="col-sm-3 col-form-label"><?php esc_html_e("Email logo","asenpts"); ?></label>
                <div class="col-sm-9">
                <input class="form-control" name="email-logo" id="email-logo"  type="hidden" value="<?php echo $email_logo; ?>" />
                <button type="button" class="btn btn-primary btn-sm" id="email-logo-trigger"><?php esc_html_e("Upload logo","asenpts"); ?></button>
                <span id="email-logo-show">
                <?php if(!empty($email_logo)): 
					echo wp_get_attachment_image($email_logo,'full'); 
               endif; ?>
                </span>
                </div>
                </div>

<?php if(!empty($email_logo)):

echo wp_get_attachment_image($email_logo,'full');

endif; ?>

</span>

</div>

2. Mã js

$(document).on('click','#email-logo-trigger',function(e){
				e.preventDefault();
				var frame;
				 // If the media frame already exists, reopen it.
				if ( frame ) {
				  frame.open();
				  return;
				}
				// Create a new media frame
				frame = wp.media({
				  title: 'Select a logo',
				  button: {
					text: 'Use'
				  },
				  multiple: false  // Set to true to allow multiple files to be selected
				});
				// When an image is selected in the media frame...
				frame.on( 'select', function() {
				  // Get media attachment details from the frame state
				  var attachment = frame.state().get('selection').first().toJSON();
				  // Send the attachment URL to our custom image input field.
				  $('#email-logo-show').append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );
				  // Send the attachment id to our hidden input
				  $('#email-logo').val( attachment.id );
				});
			
				// Finally, open the modal on click
				frame.open();
			});

$(document).on('click','#email-logo-trigger',function(e){

e.preventDefault();

var frame;

// If the media frame already exists, reopen it.

if ( frame ) {

frame.open();

return;

}

// Create a new media frame

frame = wp.media({

title: 'Select a logo',

button: {

text: 'Use'

multiple: false // Set to true to allow multiple files to be selected

});

// When an image is selected in the media frame...

frame.on( 'select', function() {

// Get media attachment details from the frame state

var attachment = frame.state().get('selection').first().toJSON();

// Send the attachment URL to our custom image input field.

$('#email-logo-show').append( '<img src="'+attachment.url+'" alt="" style="max-width:100%;"/>' );

// Send the attachment id to our hidden input

$('#email-logo').val( attachment.id );

});

// Finally, open the modal on click

frame.open();

});

Các bài viết khác có thể hữu ích với bạn

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Disable animation trong revolution slider [ 20/09/2022 08:07 ]
Cách tạo button printer một element bằng javascript [ 19/09/2022 12:56 ]
Code sử dụng vue js, quasar, axios, sweetalert2 trong tác vụ quản lý danh sách [ 19/07/2022 10:26 ]
Hướng dẫn lấy botToken và chatId của bot telegram [ 13/06/2022 13:54 ]
Tạo thanh bar bottom mobile trong theme wordpress [ 07/06/2022 10:00 ]
Fix acf not save iframe [ 23/04/2022 07:44 ]
Rewrite lại url cho page template wordpress [ 21/04/2022 02:11 ]
Tối ưu hóa cron trong wordpress để website chạy nhanh hơn [ 09/04/2022 03:30 ]
Function tạo rating star sử dụng dashicon từ wordpress [ 03/04/2022 03:02 ]
Thêm editor cho mô tả category wordpress (add editor description for category wordpress) [ 01/04/2022 02:02 ]

Gọi upload media wordpress

1. Mã html

2. Mã js

có thể bạn cần xem:

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)