WordPress设置页面上传标志答案

【问题标题】：WordPress settings page upload logoWordPress设置页面上传标志
【发布时间】：2014-10-03 05:03:01
【问题描述】：

在过去的几个小时里，我一直在努力解决这个问题.. 我正在尝试创建自己的主题设置页面，然后进入了徽标上传字段现在我被卡住了..我在这里和谷歌上查看了帖子，但我仍然缺少一些东西并且无法完成..

我添加到我的主题functions.php-

    register_setting( 'empathy-settings', 'empathy-setting-logo' );
add_settings_section( 'section-three', '', 'section_three_callback', 'empathy-design' );
add_settings_field( 'logo-image', 'Website Logo', 'field_logo_callback', 'empathy-design', 'section-three' );

function admin_scripts_upload() {
   wp_enqueue_script('media-upload');
   wp_enqueue_script('thickbox');
   wp_register_script('empathy-logo-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/uploader.js', 
   array('jquery','media-upload','thickbox'));
   wp_enqueue_script('empathy-logo-upload');
}
function admin_styles_upload() {
    wp_enqueue_style('thickbox');
}

function section_three_callback() { }

function field_logo_callback() {
    $setting = esc_attr( get_option( 'empathy-setting-logo' ) );

    echo '<img src="" id="thenewlogo" />';
    echo '<div style="width:100%; float:left;">';

        echo '<input type="text" name="empathy-setting-logo" id="empathy-setting-logo" style="width:200px;" />';
        echo '<br /><a id="empathy-setting-logo-button">Upload</a>';

    echo '</div>';
}

add_action('admin_print_scripts', 'admin_scripts_upload');
add_action('admin_print_styles', 'admin_styles_upload');

我用代码创建了 uploader.js-

jQuery(document).ready(function() {

jQuery('#empathy-setting-logo-button').click(function() {
     targetfield = jQuery('#empathy-setting-logo');
     tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
     return false;
});

window.send_to_editor = function(html) {
     imgurl = jQuery('img',html).attr('src');
     jQuery(targetfield).val(imgurl);
     tb_remove();
}

});

媒体库显示并且文件正在上传，但我无法“插入发布” 所以我无法保存图片网址。

请问我该怎么做呢？

【问题讨论】：

标签： php wordpress api upload settings

【解决方案1】：

我就是这样做的：

<input type="text" name="new_img" id="new_img" value="<?php echo esc_attr( get_option( 'empathy-setting-logo' ) ); ?>">
<a class="button" onclick="upload_image('new_img');">Upload Favicon</a>

这里是 JS 函数：

var uploader;
function upload_image(id) {

  //Extend the wp.media object
  uploader = wp.media.frames.file_frame = wp.media({
    title: 'Choose Image',
    button: {
      text: 'Choose Image'
    },
    multiple: false
  });

  //When a file is selected, grab the URL and set it as the text field's value
  uploader.on('select', function() {
    attachment = uploader.state().get('selection').first().toJSON();
    var url = attachment['url'];
    jQuery('#'+id).val(url);
  });

  //Open the uploader dialog
  uploader.open();
}
</script>

确保您将以下内容添加到您的functions.php

add_action( 'admin_enqueue_scripts', 'wp_enqueue_media' );

【讨论】：