添加Wordpress“添加媒体”按钮以在自己的插件中形成

Question

我正在尝试在我自己的插件表单页面中添加自己的“添加媒体”按钮，我创建了一个插件，我在add-new.php文件中有一个表单，这里是代码：

  <div class="wrap">
<h1><?php _e( 'Add Deal', 'webdevs' ); ?></h1>

<form action="" method="post">
                    <!-- I NEED TO CHANGE THIS TO SHOW "ADD MEDIA BUTTON" -->
                     <input id="upload_image" type="text" size="36" name="upload_image" value="" />
        <input id="upload_image_button" type="button" value="Upload Image" />

      <?php wp_nonce_field( 'deal-new' ); ?>
        <?php submit_button( __( 'Add Deal', 'webdevs' ), 'primary', 'submit_deal' ); ?>

  </form>

如何添加html代码并在php中处理它

请帮助

Thnaks

Answer 1

我已经使用元数据库创建了自定义图片上传，您可以根据需要在下面设置代码。

您需要在您的网页上调用新的WP's thickbox媒体上传器CSS和JS。你必须修改为插件页面添加脚本的条件。

  

修改if( 'post' !== $typenow )的条件。

它会做什么？

它将允许您打开wordpress媒体上传器并将您选择的图片网址发送到文本框，然后您可以使用post_meta或update_post_meta()保存网址，或者将其保存在任何位置。你可以从

获得网址

Supposeable variable： 的 $content_img = $_POST['content_img'];

Html

<p>
                <label><b>Upload Content Image</b></label><br/>
                <input class="upload_image" name="content_img" type="text" readonly="readonly" value="<?php echo $content_img ?>"/>
                <input type="button" value="Upload" class="button button-primary button-large" onclick="upload_new_img(this)"/>
                &nbsp;<a href="javascript:void(0);" onclick="remove_image(this);" class="remove_image">Remove</a>&nbsp;
            </p>

管理员functions.php

// Enqueue script in admin 
    function my_admin_scripts() {    

# Not our screen, bail out
    if( 'post.php' !== $hook )
        return;

    # Not our post type, bail out
    global $typenow;
    if( 'post' !== $typenow )
        return;

        wp_enqueue_media('media-upload');
        wp_enqueue_media('thickbox');
        wp_register_script('my-upload', get_stylesheet_directory_uri().'/js/metabox.js', array('jquery','media-upload','thickbox'));
        wp_enqueue_media('my-upload');

    }

    // Call thickbox CSS
    function my_admin_styles() {
        wp_enqueue_style('thickbox');
    }

    add_action('admin_enqueue_scripts', 'my_admin_scripts');
    add_action('admin_enqueue_scripts', 'my_admin_styles');

自定义JS metabox.js

function upload_new_img(obj)
{
    var file_frame;
    var img_name  =   jQuery(obj).closest('p').find('.upload_image');

        if ( file_frame ) {
            file_frame.open();
            return;
        }

        file_frame = wp.media.frames.file_frame = wp.media(
            {
                title: 'Select File',
                button: {
                    text: jQuery( this ).data( 'uploader_button_text' )
                },
                multiple: false
            }
        );

        file_frame.on('select', function() {
            attachment = file_frame.state().get('selection').first().toJSON();
            var newwurl = attachment.url.split('/wp-content');
            img_name[0].value = '/wp-content'+newwurl[1];
            file_frame.close();
           // jQuery('.upload_image').val(attachment.url);
        });

        file_frame.open();
}

function remove_image(obj) {
    var img_name;
    if (jQuery(obj).closest('p').find('.upload_image').length > 0) {
        img_name = jQuery(obj).closest('p').find('.upload_image');
    } else {
        img_name = jQuery(obj).closest('td').find('.upload_image');
    }
    if (typeof img_name != "undefined") {
        img_name.val('');
    }
}