Wordpress媒體上傳了主題選項

Question

我有一個主題選項對話框的單詞新聞主題

我想添加一個功能，通過主題選項頁面上傳徽標，然后將其作為徽標顯示在標題的前端。 我該怎么做 我想使用wordpress媒體上傳，但如果這是不可能的或可用的替代品我也欣賞

Answer 1

可以在主題函數中使用內置的WordPress Media Upload。 我已將它成功地融入到許多主題中，並用於各種不同的用途。

下面是一個簡單的版本（我有另一個版本，在一個頁面中支持多個圖像上傳字段）。

在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&type=image&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媒體上傳器中的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&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文件。