Một bài toán đặt ra đó là Khi bạn muốn chọn nhiều ảnh để tạo silde trong theme wordpress, vậy làm thế nào để chọn được nhiều ảnh cùng một lúc?
Trước mình có viết một bài hướng dẫn các bạn Upload ảnh lấy link trong wordpress trong thiết kế theme wordpress. Hôm nay mình tiếp tục hướng dẫn các bạn cách giải quyết bài toán như nêu ở trên.
Như bài trước mình đã nói để sử dụng được thư viện ảnh trong wordpress các bạn cần thêm code vào file functions.php của theme wordpress
Ví dụ
function load_custom_wp_admin_style($hook) {
// Load only on ?page=carrental_main_menu
if($hook != 'toplevel_page_carrental_main_menu') {
return;
}
wp_enqueue_script( 'carrental_admin_js', get_template_directory_uri().'/admin/js/script.js' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
add_action( 'admin_enqueue_scripts', 'wp_enqueue_media' );trong file script.js các bạn thêm dòng code sau:
Ví dụ
jQuery(document).ready( function( $ ) {
var myplugin_media_upload;
$('#about_slider_image_select').click(function(e) {
e.preventDefault();
// If the uploader object has already been created, reopen the dialog
if( myplugin_media_upload ) {
myplugin_media_upload.open();
return;
}
// Extend the wp.media object
myplugin_media_upload = wp.media.frames.file_frame = wp.media({
//button_text set by wp_localize_script()
title: jQuery( this ).data( 'uploader_title' ),
button: { text: jQuery( this ).data( 'uploader_button' ) },
multiple: true //allowing for multiple image selection
});
/**
*THE KEY BUSINESS
*When multiple images are selected, get the multiple attachment objects
*and convert them into a usable array of attachments
*/
myplugin_media_upload.on( 'select', function(){
var attachments = myplugin_media_upload.state().get('selection').map(
function( attachment ) {
attachment.toJSON();
return attachment;
});
//loop through the array and do things with each attachment
var i;
for (i = 0; i < attachments.length; ++i) {
//sample function 1: add image preview
$('#myplugin-placeholder').after(
'<div class="myplugin-image-preview"><img src="' +
attachments[i].attributes.url + '" ></div>'
);
//sample function 2: add hidden input for each image
$('#myplugin-placeholder').after(
'<nput id="myplugin-image-input' + attachments[i].id + '" type="hidden" name="myplugin_attachment_id_array[]" value="' + attachments[i].id + '">'
);
}
});
myplugin_media_upload.open();
});
});Trong theme thì tùy bạn thiết kế nhé, ví dụ của mình:
Ví dụ
<td>
<input type="button" id="about_slider_image_select" data-uploader_title="Select or Upload Image" data-uploader_button="Select Image" data-img_id="about_slider_image" class="deo-btn button button-primary" value="+"><br />
<p class="description" id="myplugin-placeholder"></p>
</td>Đơn giản vậy là xong rồi, trong quá trình làm nếu có gì vướng mắc thì comment lại để mình hướng dẫn nhé