เพิ่มปุ่ม“ อัพโหลดสื่อ” ในช่องเมตาดาต้า


17

ฉันมีโพสต์ที่กำหนดเองซึ่งมีเมตาแท็กที่ต้องใช้การอัปโหลดไฟล์ (สำหรับไฟล์วิดีโอ) ฉันสงสัยว่าวิธีใดที่ถูกต้องในการเพิ่มปุ่ม "อัปโหลด" ที่ชี้ไปยังตัวอัปโหลดสื่อ WordPress และตั้งค่า URL ของไฟล์ที่อัปโหลดที่เลือกไปยังช่องข้อความที่ทำให้ปุ่มเชื่อมโยงนั้นเชื่อมโยงกัน

ฉันไม่ได้มองหารหัสในการสร้างตัวเลือกเมตาแท็กจริง ๆ แต่สำหรับวิธีเพิ่มปุ่มอัปโหลดสื่อ Wordpress อย่างถูกต้อง


ดูกวดวิชาและปลั๊กอินง่าย ๆ ที่ทำจากมันที่คุณสามารถลองที่นี่ ช่วยฉันด้วย
Fanky

คำตอบ:


13

ดูโครงกระดูกอัพโหลดสื่อนี้ คุณสามารถใช้มันในมาร์กอัปที่กำหนดเองเช่น Meta Box

คำแนะนำให้ตรวจสอบว่าคุณใช้สคริปต์ในหน้าเว็บที่คุณเปิดใช้งาน Meta Box ของคุณเท่านั้น มิฉะนั้นจะเกิดปัญหาขึ้นกับหน้าเริ่มต้นและผู้อัปโหลด

ตอนนี้ความพยายามที่จะล้างส่วนที่สำคัญเพื่อรวมผู้อัปโหลดไปยังส่วนที่คุณกำหนดเอง

ก่อนอื่นให้รวมปุ่มไว้ในกล่องเมตา:

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

ตอนนี้เข้าคิวสคริปต์:

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

ส่วนสุดท้ายคือสคริปต์ที่กำหนดเองของคุณเพื่อใช้ thickbox และอัพโหลดในนี้

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
เพียงเตือนเล็กน้อยผ่านหน้า Codex สำหรับadmin_print_scriptsบอกว่าadmin_print_scriptsส่วนใหญ่ที่ใช้ในการสะท้อนจาวาสคริปต์แบบอินไลน์ admin_print_scriptsไม่ควรใช้เพื่อจัดคิวสไตล์หรือสคริปต์ในหน้าผู้ดูแลระบบ ใช้admin_enqueue_scriptsแทน
Zulian

ฉันลองใช้วิธีนี้และกล่องป้อนข้อความ#upload_imageจะไม่มีการบรรจุ
Mr Pablo

1
คำตอบนี้ใช้งานไม่ได้ ดูคำตอบอื่น ๆ
T.Todua

0

วิธีการแก้:

1) ในfunctions.phpของคุณเพิ่มบล็อคสำหรับการลงทะเบียนสคริปต์ที่จำเป็น:

// 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) แล้วเพิ่มบล็อกmetabox :

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 ในกรณีที่คุณต้องการหลาย ๆ ฟิลด์จากนั้นคุณสามารถทำสิ่งนี้ได้อย่างง่ายดาย: http://pastebin.com/raw/xpU1ch2W


ทำงานเหมือนมีเสน่ห์ แต่มีเฉพาะภาพเท่านั้น ฉันจะทำเช่นเดียวกันกับไฟล์วิดีโอได้อย่างไร
Alex
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.