Question

我有一个主题选项对话框

的单词印刷主题

我想添加一项功能，通过主题选项页面上传徽标，然后将其作为徽标显示在标题的前端。我该怎么做我想使用上传的wordpress媒体，但如果这是不可能的或替代方案可用我也欣赏

Answer 1

可以在您的主题功能中使用内置的WordPress媒体上传。我已将它成功地融入到许多主题中，并用于各种不同的用途。

下面是一个简单的版本（我的另一个版本在一个页面中支持多个图像上传字段）。

在javascript文件中（在主题目录中另存为media_upload.js）：

var formfield, tbframe_interval;
jQuery(document).ready(function() {
    // Bind the click to your upload image button
    jQuery('.upload_image_button').click(function() {
            // Which gets the name of the input field
            formfield = '.image_input';
            tb_show('', 'media-upload.php?post_id=0&#038;type=image&#038;TB_iframe=1');
            // Set an interval to change the button text from Insert Into Post
            tbframe_interval = setInterval(function() {
                jQuery('#TB_iframeContent').contents().find('.savesend .button').val('Use This Image');
                }, 2000);
            return false;
    });
    // Bind event to the focus of the input field to trigger the media upload
    jQuery('.image_input').focus(function() {
        jQuery('.upload_image_button').trigger("click");
    });
    // Bind click event to the delete button if it is already displayed
    jQuery("#preview_image .delete").click(function() {removeImage();});
    // Get original send to editor because we are about to override it
    window.original_send_to_editor = window.send_to_editor;
    // Custom function to override where media upload sends data
    window.send_to_editor = function(html) {
        // If formfield set, means we're using our custom function
        if (formfield) {
                // Have to add tags around html in order to be sure finds img src
                imgurl = jQuery('img','<p>' + html + '</p>').attr('src');
                // Send the img url to the input field
                jQuery(formfield).val(imgurl);
                // Remove the media upload box
                tb_remove();
                // Call our function to display image
                renderImage(imgurl);
                // Clear the formfield
                formfield = "";
                // Clear the interval that changes the button name
                clearInterval(tbframe_interval);
            // If not, use the original function
            } else {
                window.original_send_to_editor(html);
            }
      }
});

// function to load the image url into the correct input box
function renderImage(img) {
    // Load the image into the div we set up to display it
    // Also throws in a delete button to remove the image
    jQuery("#preview_image").html('<img src="' + img + '" alt="" /><a class="delete" title="Remove Image" href="javascript:void(0);">X</a>');
    // Bind the click to the delete in order to remove the image
    jQuery("#preview_image .delete").click(function() {removeImage();});
}

// Function we call when the delete button is clicked
function removeImage() {
    jQuery("#preview_image").html('');
    jQuery('.image_input').val('');
}

在你的主题的functions.php文件中，你必须通过创建一个函数并使用WP钩子来调用admin int中的函数来排列必要的脚本（包括上面的脚本）：

function my_theme_media_script_load() {
    // Load the necessary WP scripts
    wp_enqueue_script('media-upload'); 
    wp_enqueue_script('thickbox'); 
    // Register our custom script
    wp_register_script('my-custom-media-upload', get_bloginfo("template_url") .
        '/javascript/media_upload.js', array('jquery','media-upload','thickbox')); 
    // Load our custom script
    wp_enqueue_script('my-custom-media-upload'); 
    // Load the WP style for the media upload thickbox
    wp_enqueue_style('thickbox');
}

add_action ('admin_init', 'my_theme_media_script_load');

最后，在您希望媒体上传输入字段和预览显示的位置，请使用以下html：

<?php 
    // Provide your own code to load the image url into the variable $image
    // Then prepare a couple of variables for displaying the image and delete in the html
    $preview = ($image) ? '<img src="' . $image . '" alt="" />' : '';
    $delete_button = ($image) ? '<a class="delete" href="javascript:void(0);" title="Remove Image"><img src="' . get_bloginfo("template_url") . '/images/delete.png" alt="X" /></a>' : '';
?>
<div class="media">
    <label for="acg_user_photo">Image:</label>
    <input type="text" class="image_input" id="image_input" name="image_upload" value="<?php echo $image; ?>" />
    <input type="button" class="upload_image_button" name="image_button"  value="Upload" />
    <div class="preview" id="preview_image">
        <?php echo $delete_button; ?>
        <p id="preview"><?php echo $preview; ?></p>
    </div>
</div>

由你来提供css来设计它看起来很好。

另请注意，这应该只在管理员方面完成。您无法相信普通访问者可以向您的网站上传任何内容。

Answer 2

我找到了一种将WP Media Uploader中的url传递到文本框的方法，然后从文本字段中保存了id信息。输入字段：

<input class="uploading" id="<?php echo $value['id']; ?>_btn" type="button" name="<?php echo $value['id']; ?>" value="Upload File" />
<input class="set_item_text" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="text" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" />

对于我的jQuery：

jQuery(document).ready(function($) {

$( 'input.uploading' ).click(function() {
    formfield = jQuery(this).attr('name');
    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('#'+formfield).val(imgurl);
    tb_remove();
}

});

Button中的名称字段与文本框中的ID相同 - 链接两者并轻松传递信息。其余的是functions.php中的标准，以启用您的脚本

function mytheme_add_style() {
    $file_dir=get_bloginfo('template_directory');
    wp_enqueue_script("functionsJS", $file_dir."/functions/functions.js", false, "1.0");
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}

add_action('admin_init', 'mytheme_add_style');

Answer 3

我不是wordpress用户/开发人员，但只是作为一个想法，是否可以编写自己的php页面将此文件上传到正确的位置并将此页面作为iFrame嵌入到对话框中？

Answer 4

它出现在Wordpress 3中，这是不可能的。 Wordpress在iframe中加载media-upload.php文件，并且通常包含删除并插入post并用作后缩略图的表单是media.php第1156行的get_media_item（）。

不幸的是，虽然可以拉起媒体上传器，但是无法通过挂钩和过滤器修改它以插入额外的按钮或链接而无需修改核心wordpress文件。

Wordpress媒体上传了主题选项

4 个答案: