Thêm tùy chọn nút media uploader trong WordPress Admin

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Thêm tùy chọn nút media uploader trong WordPress Admin

Đôi khi nó là cần thiết để làm được một giao diện đồ họa trực quan cho các khách hàng, mà cho phép tải lên hình ảnh hoặc các tập tin khác cho bài viết hay trong cài đặt trang web một cách dễ dàng.

Đối với tôi nó sẽ ok nếu các thiết lập trang web có một trường nhập văn bản, nơi tôi có thể đặt URL hình ảnh. Nhưng nó chẳng cần là đủ cho người sử dụng thông thường. Nó thậm chí còn không chuyên nghiệp.

Trong bài này, mình sẽ chỉ cho bạn phương pháp để tạo một trình tải file dễ dàng và có thể tùy biến cho trang web của bạn.

Minh họa nút tải tệp (Upload button)

Ví dụ nút upload được thêm để tải tệp ở ngay vị trí tệp sẽ xuất hiện, trông khá trực quan.

Upload Image button in WordPress admin area

Nếu bạn bấm vào nút Upload image , trình tải tệp của WordPress sẽ được mở ra. Trong cửa sổ này bạn cũng có thể chọn một trong các hình ảnh được tải lên trước hoặc tải lên một hình ảnh mới.

WordPress media uploader popup with the image selected

Một số tuỳ chỉnh khác:

  • bạn có thể thay đổi tiêu đề của thư viện Media popup (Insert image) và nhãn của nút (Use this image),
  • bạn cũng cũng có thể cấu hình trong mã code 1 cách đơn giản nếu bạn muốn đính kèm hình ảnh đã tải lên vào bài hiện tại hay không,
  • chọn lựa nhiều hình ảnh cùng lúc  được coi phép.

Nếu hình ảnh được chọn, bạn có thể click vào nó để chọn một ảnh khác thay thế hoặc loại bỏ nó bằng cách nhấn liên kết  Remove image .

If the image is selected, you can click on it to choose another one.

Hãy đọc tiếp hướng dẫn ở bên dưới nhé.

3 bước đơn giản để Tạo Nút tải hình ảnh trên Website riêng cho bạn

Bước 1. Sử dụng jQuery

Nếu bạn không biết nhiều về jQuery, tạo một file .js trong thư mục theme WordPress ngày nay của bạn.

Bước 2. sử dụng wp_enqueue_script () và wp_enqueue_media ()

Chúng ta cần đoạn mã này để thêm mã javascript trong khu vực quản trị WordPress. Dán đoạn mã sau vào file functions.php trong thư mục giao diện của bạn.

 function misha_include_myuploadscript() { /* * I recommend to add additional conditions just to not to load the scipts on each page * like: * if ( !in_array('post-new.php','post.php') ) return; */ if ( ! did_action( 'wp_enqueue_media' ) ) { wp_enqueue_media(); } wp_enqueue_script( 'myuploadscript', get_stylesheet_directory_uri() . '/customscript.js', array('jquery'), null, false ); } add_action( 'admin_enqueue_scripts', 'misha_include_myuploadscript' );  

Bước 3. Sử dụng hàm PHP

Tiếp theo bạn chèn mã này vào cuối file functions.php .

 /* * @param string $name Name of option or name of post custom field. * @param string $value Optional Attachment ID * @return string HTML of the Upload Button */ function misha_image_uploader_field( $name, $value = '') { $image = ' button">Upload image'; $image_size = 'full'; // it would be better to use thumbnail size here (150x150 or so) $display = 'none'; // display state ot the "Remove image" button if( $image_attributes = wp_get_attachment_image_src( $value, $image_size ) ) { // $image_attributes[0] - image URL // $image_attributes[1] - image width // $image_attributes[2] - image height $image = '">'; $display = 'inline-block'; } return ' 
Remove image
'; }

Ví dụ 1. Media Uploader với Meta Boxes

Để thêm trình tải media vào metabox bạn sử dụng mã sau đây:

 /* * Add a meta box */ add_action( 'admin_menu', 'misha_meta_box_add' ); function misha_meta_box_add() { add_meta_box('mishadiv', // meta box ID 'More settings', // meta box title 'misha_print_box', // callback function that prints the meta box HTML 'post', // post type where to add it 'normal', // priority 'high' ); // position } /* * Meta Box HTML */ function misha_print_box( $post ) { $meta_key = 'second_featured_img'; echo misha_image_uploader_field( $meta_key, get_post_meta($post->ID, $meta_key, true) ); } /* * Save Meta Box data */ add_action('save_post', 'misha_save'); function misha_save( $post_id ) { if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) return $post_id; $meta_key = 'second_featured_img'; update_post_meta( $post_id, $meta_key, sanitize_text_field( $_POST[$meta_key] ) ); // if you would like to attach the uploaded image to this post, uncomment the line: // wp_update_post( array( 'ID' => $_POST[$meta_key], 'post_parent' => $post_id ) ); return $post_id; }  

Ví dụ 2. Media Uploader trong trang cài đặt Option

Tương tự, bạn chèn đoạn mã dưới đây vào file functions.php :

 add_action('admin_menu', 'misha_add_options_page'); function misha_add_options_page() { $page_slug = 'uplsettings'; $option_name = 'header_img'; if ( isset( $_GET['page'] ) && $_GET['page'] == $page_slug ) { if ( isset( $_REQUEST['action'] ) && 'save' == $_REQUEST['action'] ) { update_option( $option_name, sanitize_text_field( $_REQUEST[ $option_name ] ) ); header('Location: '. site_url() .'/wp-admin/options-general.php page=' . $page_slug . '&saved=true'); die; } } add_submenu_page('options-general.php','More settings','More settings (title)', 'edit_posts', $page_slug, 'misha_print_options_page'); } function misha_print_options_page() { $option_name = 'header_img'; if ( isset( $_REQUEST['saved'] ) ){ echo ' 
Saved.
'; } echo ''; }

Ví dụ 3. Đơn giản hơn bằng kiểu viết plugin cho WordPress

Trước hết bạn cần cài plugin meta boxes options pages  trên trang web WordPress của bạn.

Meta Box

Mã sau sẽ thêm 1 nút tải lên 1 cách dễ dàng (thêm vào functions.php ):

 new trueMetaBox( array( 'misha', // metabox ID, this is also used as custom field prefix 'name' => 'Metabox with the image upload button', // title 'post_type' => array('page'), // post types here 'priority' => 'high', // low high default 'capability'=> 'edit_posts', // capabilities the user should have to edit this metabox 'args' => array( array( 'img', 'label' => 'Image', 'description' => 'The upload button description should be here.', 'type' => 'image' ) ) ) );  

Kết quả:

Upload Image Meta Box in WordPress using my plugin

Option page

Và bạn chỉ cần sử dụng đoạn mã sau đây để thêm 1 nút Upload trong trang General. “> Settings > General.

 new trueOptionspage( array( 'slug' => 'general', 'sections' => array( array( 'default', 'fields'=> array( array( 'img1', 'label' => 'Custom image in setting', 'description' => 'Your custom description is here.', 'type' => 'image' ) ) ) ) ));  

Image Upload Button in WordPress general settings.

Thật dễ dàng phải không, tuy vậy bạn bắt buộc thanh toán phí để mua framework này. Nếu bạn có bất cứ câu hỏi thắc mắc cần mình giải đáp vui lòng để lại ý kiến dưới bài viết này nhé.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

Bài viết Thêm tùy chọn nút media uploader trong WordPress Admin được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang