• Về tôi
  • Chính sách riêng tư
  • Liên hệ

HoangThuc.com

Website Developer

  • Trang chủ
  • WordPress
    • Plugin wordpress
  • Lập trình
    • Php
  • Thủ thuật máy tính
You are here: Home / Wordpress / Wordpress nâng cao / Sử dụng media của wordpress để tải hình ảnh

Sử dụng media của wordpress để tải hình ảnh

20 June, 2018 by Hoàng Thức Leave a Comment

Hôm nay mình sẽ hướng dẫn cách sử dụng nút media trong quản trị wordpress để upload hình ảnh.

Cốt lỏi của vấn đề là sử dụng đối tượng meta_image_frame trong thư viện wordpress. Mình sẽ tiến hành từng bước để các bạn nắm rõ:

Bước 1: Tạo layout dạng HTML vu vơ và có các nút Media button

<div class="wrap" id="theme_option">
   
    <div class="container-fluid">
        <div class="Logo">
            <div class="box-title" data-toggle="collapse" href="#logo" aria-expanded="false" aria-controls="logo">Logo <span class="dashicons dashicons-arrow-right-alt2 navbar-right"></span></div>
            <div id="logo" aria-expanded="false" class="collapse in">
                <div id="images-container" class="form-group">
                    <div class="input-group">
                        <input type="text" name="wp_theme_logo_image" id="logo-image" class="form-control" value="">
                        <div class="input-group-addon">
                            <input type="button" class="logo-image-button btn btn-primary " value="Chọn hình">
                            <input type="button" class="remove-logo btn btn-primary" value="Xóa">
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div><!-- end images container -->
            </div>
        </div>
    </div>
</div>

 

Bước 2: Khai báo thư viện Media và Script để gọi

function wp_artisans_theme_back_end()
{
    wp_enqueue_media();
    wp_enqueue_script('custom', WP_PLUGIN_URL . '/Tester/bootstrap/js/admin_custom.js', array(),'',true );
}
add_action( 'admin_enqueue_scripts2', 'wp_artisans_theme_back_end' );

File Script

jQuery(document).ready(function($){
  // add image uploader functionality
        var meta_image_frame;
      $('.logo-image-button').live('click', function(e){
            e.preventDefault();

            if( meta_image_frame ){
             meta_image_frame.open();
                return;
            }

            meta_image_frame = wp.media.frames.file_frame = wp.media({
                title: 'Add Images',
                button: {text: 'Add to Images'},
                library: { type: 'image'}
            });

            meta_image_frame.on('select', function(){
                var media_attachment = meta_image_frame.state().get('selection').first().toJSON();

                   var url = '';

                $('#logo-image').val(media_attachment.url);
            });

            meta_image_frame.open();

      });
$('.remove-logo').click(function(){
$('#logo-image').val('');   
})
    
})

Lưu ý:

Bạn cần gọi hook admin_enqueue_scripts2  

Đến đây là xong !

 

Chúc các bạn may mắn.

 

Bài viết khác

  • Tạo template trong plugin wordpressTạo template trong plugin wordpress
  • Xóa slug trên custom post và custom taxonomy: Phần 2Xóa slug trên custom post và custom taxonomy: Phần 2
  • Xóa slug trên custom post và custom taxonomy: Phần 1Xóa slug trên custom post và custom taxonomy: Phần 1
  • Hiển thị thời gian kể từ ngày đăng trong wordpressHiển thị thời gian kể từ ngày đăng trong wordpress
  • Plugin lấy tin tự động version 2.1Plugin lấy tin tự động version 2.1
  • Lỗi redirect khi phân trang trong single wordpressLỗi redirect khi phân trang trong single wordpress
Share

Bình luận

Bình luận

Filed Under: Wordpress, Wordpress nâng cao Tagged With: Thủ thuật wordpress, wordpress nâng cao

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Bài viết mới

> 2021/10/11 19:10:10 [INFO] acme: Registering account for admin@X.X.X.X>

  • Dữ liệu JSON trong MySQL
  • Chuyển thư mục public sang public_html trong Laravel khi deploy
  • Fix “Requested icu-uc 50.1 but version of icu-uc is” trên DirectAdmin

FOLLOW ME

  • Facebook
  • Google+
  • Twitter

Danh mục

  • Blog
  • Lập trình
  • Laravel
  • MYSQL
  • Php
  • Thủ thuật máy tính
  • Vps
    • DirectAdmin
  • Wordpress
    • Plugin wordpress
    • Wordpress căn bản
    • Wordpress nâng cao
      • Custom post wordpress

Archives

  • October 2021
  • January 2021
  • December 2020
  • November 2020
  • September 2020
  • August 2020
  • September 2019
  • August 2019
  • July 2019
  • June 2018
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • March 2017
  • November 2016
  • September 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • January 2016
  • December 2015
  • May 2015
  • April 2015
Copyright © 2022 · HoangThuc.com · Genesis Framework