Dodaj przycisk „Prześlij multimedia” w polu meta-box


17

Mam niestandardowy post, który ma metatag, który wymaga przesyłania pliku (w przypadku plików wideo). Zastanawiam się, jaki jest właściwy sposób dodania przycisku „Prześlij”, który wskazuje na program do przesyłania multimediów WordPress i ustawia adres URL wybranego przesłanego pliku na pole tekstowe, które spowodowało skojarzenie przycisku przesyłania.

Nie szukam kodu na temat tworzenia faktycznej opcji metatagu, ale sposobu na prawidłowe dodanie przycisku przesyłania multimediów Wordpress.


Zobacz samouczek i wykonaną z niego prostą wtyczkę, którą możesz wypróbować tutaj . Pomogło mi.
Fanky,

Odpowiedzi:


13

Zobacz ten szkielet przesyłającego media . Możesz także użyć go w niestandardowym znaczniku, takim jak Meta Box.

Wskazówka, sprawdź, czy używasz tylko skryptów na stronie, na której aktywujesz Meta Box. W przeciwnym razie jest to często problem na domyślnych stronach i w programie do przesyłania.

Teraz próba wyczyszczenia ważnych części w celu włączenia programu przesyłającego do części niestandardowej.

Najpierw dołącz przycisk w polu meta:

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

Teraz kolejkuj skrypty:

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

Ostatnią częścią jest niestandardowy skrypt do korzystania z DubeBox i programu do przesyłania.

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

});

2
Tylko małe przypomnienie na stronie Kodeksu dla admin_print_scriptsnapisów, które admin_print_scriptsgłównie służyły do ​​echa wbudowanego javascript. admin_print_scriptsnie należy używać do kolejkowania stylów ani skryptów na stronach administracyjnych. Użyj admin_enqueue_scriptszamiast tego.
Zulian

Wypróbowałem tę metodę, a pole wprowadzania tekstu #upload_imagenigdy nie jest wypełnione
Pan Pablo,

1
ta odpowiedź nie działa. zobacz inne odpowiedzi.
T.Todua

0

Rozwiązanie:

1) w pliku functions.php dodaj blok do rejestracji niezbędnych skryptów:

// 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), a następnie dodaj blok metaboksu :

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, jeśli potrzebujesz wielu pól, możesz to zrobić w następujący sposób: http://pastebin.com/raw/xpU1ch2W


Działa jak urok, ale tylko z obrazami. Jak mogę zrobić to samo z plikami wideo?
Alex
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.