Tambahkan tombol "unggah media" di bidang kotak meta

17

Saya memiliki pos khusus yang memiliki tag meta yang perlu menggunakan unggahan file (untuk file video). Saya bertanya-tanya, apa cara yang benar untuk menambahkan tombol "Unggah" yang menunjuk ke pengunggah media WordPress dan menetapkan url dari file yang diunggah yang dipilih ke bidang teks yang menyebabkan yang mengaitkan tombol unggah.

Saya tidak mencari kode untuk membuat opsi meta tag yang sebenarnya, tetapi cara untuk benar-benar menambahkan tombol unggah media Wordpress dengan benar.

SpyrosP
sumber
Lihat tutorial dan plugin sederhana yang bisa Anda coba di sini . Membantuku.
Fanky

Jawaban:

13

Lihat kerangka pengunggah media ini . Anda juga dapat menggunakannya di markup kustom Anda, seperti Meta Box.

Sebuah petunjuk, periksa, bahwa Anda hanya menggunakan skrip pada halaman, tempat Anda mengaktifkan Meta Box Anda. Kalau tidak, sering terjadi masalah pada halaman default dan pengunggah.

Sekarang upaya untuk menghapus bagian-bagian penting untuk memasukkan pengunggah ke bagian kustom Anda.

Pertama-tama sertakan tombol di kotak meta:

<input id="upload_image" type="text" size="36" name="upload_image" value="" />
<input id="upload_image_button" type="button" value="Upload Image" />

Sekarang enqueue skrip:

function my_admin_scripts() {    
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox'));
    wp_enqueue_script('my-upload');
}

function my_admin_styles() {

    wp_enqueue_style('thickbox');
}

// better use get_current_screen(); or the global $current_screen
if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {

    add_action('admin_print_scripts', 'my_admin_scripts');
    add_action('admin_print_styles', 'my_admin_styles');
}

Bagian terakhir adalah skrip khusus Anda untuk menggunakan kotak tebal dan pengunggah di dalamnya.

jQuery(document).ready( function( $ ) {

    $('#upload_image_button').click(function() {

        formfield = $('#upload_image').attr('name');
        tb_show( '', 'media-upload.php?type=image&amp;TB_iframe=true' );
        window.send_to_editor = function(html) {
           imgurl = $(html).attr('src');
           $('#upload_image').val(imgurl);
           tb_remove();
        }

        return false;
    });

});
bueltge
sumber
2
Hanya sedikit pengingat melalui halaman Codex untuk admin_print_scriptsmengatakan bahwa admin_print_scriptsterutama digunakan untuk echo javascript inline. admin_print_scriptstidak boleh digunakan untuk memberikan gaya atau skrip pada halaman admin. Gunakan admin_enqueue_scriptssebagai gantinya.
Zulian
Saya mencoba metode ini dan kotak input teks #upload_imagetidak pernah diisi
Tn. Pablo
1
jawaban ini tidak berfungsi. lihat jawaban lain.
T.Todua
0

Larutan:

1) di functions.php Anda , tambahkan blok untuk mendaftarkan skrip yang diperlukan:

// add necessary scripts
add_action('plugins_loaded', function(){
  if($GLOBALS['pagenow']=='post.php'){
    add_action('admin_print_scripts', 'my_admin_scripts');
    add_action('admin_print_styles',  'my_admin_styles');
  }
});

function my_admin_scripts(){
  wp_enqueue_script('jquery');
  wp_enqueue_script('media-upload');
  wp_enqueue_script('thickbox');
}

// Proper way to enqueue
// wp_register_script(
//   'my-upload',
//   WP_PLUGIN_URL.'/my-script.js',
//   array('jquery','media-upload','thickbox') /* dependencies */
// );
//
// wp_enqueue_script('my-upload');

function my_admin_styles(){
  wp_enqueue_style('thickbox');
}

2) dan kemudian tambahkan blok metabox :

add_action(
  'add_meta_boxes',
  function(){
    add_meta_box(
      'my-metaboxx1', // ID
      'my-metaboxx1-title', // Title
      'func99999', // Callback (Construct function)
      get_post_types(), //screen (This adds metabox to all post types)
      'normal' // Context
    );
 },
 9
);
function func99999($post){
  $url = get_post_meta($post->ID, 'my-image-for-post', true); ?>
  <input id="my_image_URL" name="my_image_URL" type="text"
         value="<?php echo $url;?>" style="width:400px;" />
  <input id="my_upl_button" type="button" value="Upload Image" /><br/>
  <img src="<?php echo $url;?>" style="width:200px;" id="picsrc" />
  <script>
  jQuery(document).ready( function($) {
    jQuery('#my_upl_button').click(function() {
      window.send_to_editor = function(html) {
        imgurl = jQuery(html).attr('src')
        jQuery('#my_image_URL').val(imgurl);
        jQuery('#picsrc').attr("src", imgurl);
        tb_remove();
      }

      formfield = jQuery('#my_image_URL').attr('name');
      tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true' );
      return false;
    }); // End on click
  });
  </script>
<?php
}

add_action('save_post', function ($post_id) {
  if (isset($_POST['my_image_URL'])){
    update_post_meta($post_id, 'my-image-for-post', $_POST['my_image_URL']);
  }
});





ps jika Anda membutuhkan beberapa bidang, maka Anda dapat dengan mudah melakukan hal ini: http://pastebin.com/raw/xpU1ch2W

T.Todua
sumber
Bekerja seperti pesona, tetapi hanya dengan gambar. Bagaimana saya bisa melakukan hal yang sama dengan file video?
Alex