Ich habe einen benutzerdefinierten Post mit einem Meta-Tag, für den ein Datei-Upload erforderlich ist (für Videodateien). Ich frage mich, wie man eine "Upload" -Schaltfläche, die auf den WordPress-Medien-Uploader verweist und die URL der ausgewählten hochgeladenen Datei auf das Textfeld setzt, das die Verknüpfung mit der Upload-Schaltfläche verursacht hat, korrekt hinzufügt.

Ich suche keinen Code zum Erstellen der eigentlichen Meta-Tag-Option, sondern nach einer Möglichkeit, eine Wordpress-Medien-Upload-Schaltfläche ordnungsgemäß hinzuzufügen.

Siehe dieses Media Uploader-Skelett . Sie können es auch in Ihrem benutzerdefinierten Markup verwenden, z. B. Meta Box.

Ein Hinweis, überprüfen Sie, dass Sie nur die Skripte auf der Seite verwenden, auf der Sie Ihre Meta Box aktivieren. Ansonsten ist es oft ein Problem auf den Standardseiten und beim Uploader.

Versuchen Sie nun, die wichtigen Teile zu löschen, um den Uploader in Ihr benutzerdefiniertes Teil aufzunehmen.

Fügen Sie zunächst eine Schaltfläche in das Meta-Feld ein:

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

Stellen Sie nun die Skripte in die Warteschlange:

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

Der letzte Teil ist Ihr benutzerdefiniertes Skript, um die Thickbox und den Uploader darin zu verwenden.

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

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

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

        return false;
    });

});

Lösung:

1) Fügen Sie in Ihrer functions.php den Block zum Registrieren der erforderlichen Skripte hinzu:

// 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) und dann den Metabox- Block hinzufügen :

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: Wenn Sie mehrere Felder benötigen, können Sie dies ganz einfach tun: http://pastebin.com/raw/xpU1ch2W