Nút upload trong wordpress (Button upload in wordpress)

29/06/2019 08:05 5246

Như quý anh chị đều biết wordpress quản lý file qua mục media, câu hỏi đặt ra là tôi đang viết một plugin và cần upload một logo của một tổ chức. Vậy toàn bộ code cho vấn đề này là gì. Sau đây cùng tôi tìm hiểu nhé

Chúng ta sẽ hình dung việc upload logo qua ảnh dưới đây:

Trước hết là code html cho nút add/replace

<?php $src_logo =wp_get_attachment_image_src($organization_logo_upload,'full'); ?>
    <div id="rich_snippet_pro_organization_logo_upload_logo_show"><img src="<?php echo $src_logo[0]; ?>" /></div>
	<input type="hidden" name="rich_snippet_pro[organization_logo_upload]" id="rich_snippet_pro_organization_logo_upload" value="<?php echo $organization_logo_upload; ?>" />
	<button type="button" class="btn btn-primary btn-sm rich_snippet_pro_organization_logo_upload_logo_trigger"><span class="fa fa-upload mr-1"></span><?php _e( 'Add/Replace', RICHSNIPPETPRO_TEXT_DOMAIN); ?></button>

<?php $src_logo =wp_get_attachment_image_src($organization_logo_upload,'full'); ?>

Và code js

//upload logo's organization
	var file_frame;
	$(document).on( 'click', '.rich_snippet_pro_organization_logo_upload_logo_trigger', function( event ){
		event.preventDefault();
		// If the media frame already exists, reopen it.
		if ( file_frame ) {
			file_frame.open();
			return;
		}
		// Create the media frame.
		file_frame = wp.media.frames.downloadable_file = wp.media({
			title: richsnippetpro_admin_vars.upload,
			multiple: false
		});
		// When an image is selected, run a callback.
		file_frame.on( 'select', function() {
			attachment = file_frame.state().get('selection').first().toJSON();
			//alert(attachment.id);
			jQuery('#rich_snippet_pro_organization_logo_upload').val(String(attachment.id));
			jQuery('#rich_snippet_pro_organization_logo_upload_logo_show img').attr('src', attachment.url );		
		});
		// Finally, open the modal.
		file_frame.open();
	});

//upload logo's organization

var file_frame;

$(document).on( 'click', '.rich_snippet_pro_organization_logo_upload_logo_trigger', function( event ){

event.preventDefault();

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

if ( file_frame ) {

file_frame.open();

return;

}

// Create the media frame.

file_frame = wp.media.frames.downloadable_file = wp.media({

title: richsnippetpro_admin_vars.upload,

multiple: false

});

// When an image is selected, run a callback.

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

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

//alert(attachment.id);

jQuery('#rich_snippet_pro_organization_logo_upload').val(String(attachment.id));

jQuery('#rich_snippet_pro_organization_logo_upload_logo_show img').attr('src', attachment.url );

});

// Finally, open the modal.

file_frame.open();

});

Và nhớ gọi wp_enqueue_media(); trong enqueue scripts

4.9/5 (16 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

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

Khắc phục lỗi không update được wordpress trên centos 7 nginx [ 02/04/2023 04:41 ]
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 ]

Nút upload trong wordpress (Button upload in wordpress)

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

Đăng ký nhận bài viết mới

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)