it-swarm.com.de

Hinzufügen der Schaltfläche "Upload Media" im Feld "Meta Box"

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 einen "Upload" -Button hinzufügt, der auf den WordPress-Medien-Uploader verweist und die URL der ausgewählten hochgeladenen Datei auf das Textfeld setzt, das die Verknüpfung mit dem Upload-Button verursacht hat.

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.

15
SpyrosP

Siehe hierzu Media Uploader Skeleton . 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 zuerst 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 zur Verwendung der Thickbox und des darin enthaltenen Uploaders.

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

});
12
bueltge

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





p.s. Wenn Sie mehrere Felder benötigen, können Sie dies leicht tun: http://Pastebin.com/raw/xpU1ch2W

0
T.Todua