Adăugare buton "Încarcă media" în câmpul meta box

Question

Adăugare buton "Încarcă media" în câmpul meta box

4 oct. 2012, 00:18:41

Vizualizări: 62.9K

Voturi: 21

Am un post personalizat care are o etichetă meta care trebuie să folosească încărcarea de fișiere (pentru fișiere video). Mă întreb, care este modalitatea corectă de a adăuga un buton "Încarcă" care să pointeze către încărcătorul de media WordPress și să seteze URL-ul fișierului încărcat selectat în câmpul text asociat butonului de încărcare.

Nu caut cod pentru crearea opțiunii de meta tag, ci o metodă de a adăuga corect un buton de încărcare media WordPress.

SpyrosP

515

cutie meta încărcări post meta media

Comentarii

Vezi tutorialul și simplul plugin realizat din el pe care îl poți încerca aici. M-a ajutat.

Fanky

25 oct. 2019 10:07:03

Toate răspunsurile la întrebare

Comentarii

Am încercat această metodă și caseta de introducere a textului #upload_image nu este niciodată populată

Mr Pablo

7 iul. 2016 11:19:08

acest răspuns nu funcționează. vezi alte răspunsuri.

T.Todua

1 sept. 2016 14:19:15

Doar o mică reamintire prin pagina Codex pentru admin_print_scripts spune că admin_print_scripts este folosit în principal pentru a afișa javascript inline. admin_print_scripts nu ar trebui folosit pentru a încărca stiluri sau scripturi pe paginile de administrare. Folosește admin_enqueue_scripts în schimb.

Zulian

22 ian. 2013 10:47:33

Soluție:

1) în fișierul tău functions.php, adaugă blocul pentru înregistrarea scripturilor necesare:

// adaugă scripturile necesare
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');
}

// Metoda corectă de a încărca
// wp_register_script(
//   'my-upload',
//   WP_PLUGIN_URL.'/my-script.js',
//   array('jquery','media-upload','thickbox') /* dependințe */
// );
//
// wp_enqueue_script('my-upload');

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

2) și apoi adaugă blocul pentru metabox:

add_action(
  'add_meta_boxes',
  function(){
    add_meta_box(
      'my-metaboxx1', // ID
      'my-metaboxx1-title', // Titlu
      'func99999', // Callback (Funcția de construcție)
      get_post_types(), //screen (Aceasta adaugă metabox la toate tipurile de postări)
      '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="Încarcă Imaginea" /><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;
    }); // Sfârșit la 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']);
  }
});

p.s. în caz că ai nevoie de mai multe câmpuri, poți face ușor așa: http://pastebin.com/raw/xpU1ch2W

T.Todua

5.85K

1 sept. 2016 14:11:09

Comentarii

Funcționează perfect, dar doar cu imagini. Cum pot face același lucru cu fișiere video?

Alex

18 iul. 2018 14:57:11

bueltge 17.1K · Accepted Answer · 2012-10-04T06:37:33Z

Vezi acest schelet pentru încărcarea fișierelor media. Îl poți folosi și în markup-ul tău personalizat, cum ar fi Meta Box.

Un sfat, verifică să folosești scripturile doar pe pagina unde activezi Meta Box-ul. Altfel, pot apărea probleme pe paginile implicite și la încărcare.

Acum o încercare de a clarifica părțile importante pentru a include încărcătorul în secțiunea ta personalizată.

Mai întâi include un buton în meta box:

<input id="upload_image" type="text" size="36" name="upload_image" value="" />
<input id="upload_image_button" type="button" value="Încarcă Imagine" />

Acum încarcă scripturile:

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');
}

// mai bine folosește get_current_screen(); sau variabila 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');
}

Ultima parte este scriptul tău personalizat pentru a folosi thickbox și încărcătorul în interiorul acestuia.

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;
    });
});