Fügen Sie die Schaltfläche "Upload Media" in das Feld "Meta Box" ein

17

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.

SpyrosP
quelle
Sehen Sie sich das Tutorial und das daraus erstellte einfache Plugin an, das Sie hier ausprobieren können . Half mir.
Fanky

Antworten:

13

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&amp;TB_iframe=true' );
        window.send_to_editor = function(html) {
           imgurl = $(html).attr('src');
           $('#upload_image').val(imgurl);
           tb_remove();
        }

        return false;
    });

});
bueltge
quelle
2
Nur eine kleine Erinnerung über die Codex-Seite für admin_print_scriptssagt, dass admin_print_scriptshauptsächlich verwendet, um Inline-Javascript zu Echo. admin_print_scriptssollte nicht zum Einreihen von Stilen oder Skripten auf den Admin-Seiten verwendet werden. Verwenden Sie admin_enqueue_scriptsstattdessen.
Zulian
Ich habe diese Methode ausprobiert und das Texteingabefeld #upload_imagewird nie ausgefüllt
Mr Pablo
1
Diese Antwort funktioniert nicht. siehe andere Antworten.
T.Todua
0

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

T.Todua
quelle
Funktioniert wie ein Zauber, aber nur mit Bildern. Wie kann ich dasselbe mit Videodateien machen?
Alex