如何使用我的自定义WP插件中的选项保存图像数据

Question

我必须创建一个自定义的WP插件才能工作。我以前从未做过这样的事情。到目前为止，我能够上传图像，并在各自的预览框中查看它们。但是，我的问题是让他们在提交表单后保存并保持显示。我错过了什么或做错了什么？

options-page-wrapper.php
    <form name="upload_form" method="post" action="">
        <input type="hidden" name="upload_form_submitted" value="Y">
          <table class="form-table">
            <tr>
                <th class="row-title">Base Image</th>
                <th>Hover Image</th>
                <th>Link To</th>
            </tr>
            <tr valign="top">
                <td>
                <div class='image-preview-wrapper'>
                    <img name="image-preview1" id='image-preview1' src='<?php echo wp_get_attachment_image_src(get_option('image_1')); ?>' height='100'>
                </div>
                <p>
                <input class="btn" id="upload-button1" type="button" class="button" value="Upload Image" />
                <input type='hidden' name='image_id1' id='image_id1' value='<?php echo get_option('image_1'); ?>'>
                </p>
                </td>
                <td>
                    <div class='image-preview-wrapper'>
                        <img name="image-preview2" id='image-preview2' src='<?php echo wp_get_attachment_image_src(get_option('image_2')); ?>' height='100'>
                    </div>
                    <p>
                        <input class="btn" id="upload-button2" type="button" class="button" value="Upload Image" />
                        <input type='hidden' name='image_id2' id='image_id2' value='<?php echo get_option('image_2'); ?>'>
                    </p>
                </td>
                <td>
                    <label for="link-upload-field">Link to attach to images: </label>
                <input name="link-upload-field" type="text" value="" class="regular-text" />
                </td>
            </tr>
        </table>
        <p align="right">
            <input class="button-primary" type="submit" name="hiu_submit" value="Save" />
        </p>
</form>

hover-image-upload.php
    // save the data
function hiu_save() {
    global $options;
    if (isset($_POST['upload_form_submitted']) && isset($_POST['image_id1']) && isset($_POST['image_id2'])) {
        $hidden_field = esc_html($_POST['upload_form_submitted']);
        if ($hidden_field == 'Y') {
            $image_1 = esc_html($_POST["image_id1"]);
            $image_2 = esc_html($_POST["image_id2"]);
            $options['image_1'] = $image_1;
            $options['image_2'] = $image_2;
            update_option('hiu_images', $options);
        }
    }
    $options = get_option('hiu_images');
    if (!empty($options)) {
        $image_1 = esc_attr($options['image_1']);
        $image_2 = esc_attr($options['image_2']);
        $image_1_src = wp_get_attachment_image_src($image_1);
        $image_2_src = wp_get_attachment_image_src($image_2);
        $img_1_url = $image_1_src[0];
        $img_2_url = $image_2_src[0];

    }
}

image-upload.js

// scriptfor base image upload button
jQuery(document).ready(function($) {
    var mediaUploader;
    var wp_image_id = wp.media.model.settings.post.id; // Store the old id
    var set_to_post_id = 10; // Set this

    $("#upload-button1").click(function(e){
        e.preventDefault();
        if (mediaUploader) {
            mediaUploader.uploader.uploader.param('post_id', set_to_post_id);
            mediaUploader.open();
            return;
        } else {
            // Set the wp.media post id so the uploader grabs the ID we want when initialised
            wp.media.model.settings.post.url = set_to_post_id;
        }
        // sets the title and button text for the media uploader
        mediaUploader = wp.media.frames.file_frame = wp.media({
            title: 'Select an Image',
            button: {
                text: 'Choose Image'
            }, 
            mutilple: false
        });

        // runs when image is selected
        mediaUploader.on('select', function() {
            var image = mediaUploader.state().get('selection').first().toJSON();
            $('#image-preview1').attr('src', image.url).css('width', 'auto');
            $('#image_id1').val(image.id);
            // Restore the main post ID
            wp.media.model.settings.post.id = wp_image_id;
        });
         mediaUploader.open();
    });
    // Restore the main ID when the add media button is pressed
    jQuery('a.add_media').on( 'click', function() {
        wp.media.model.settings.post.id = wp_image_id;
    });
    //mediaUploader.close();
});

// script for hoveri mage upload button
jQuery(document).ready(function($) {
    var mediaUploader;
    var wp_image_id = wp.media.model.settings.post.id; // Store the old id
    var set_to_post_id = 10; // Set this

    $("#upload-button2").click(function(e){
        e.preventDefault();
        if (mediaUploader) {
            mediaUploader.uploader.uploader.param('post_id', set_to_post_id);
            mediaUploader.open();
            return;
        } else {
            // Set the wp.media post id so the uploader grabs the ID we want when initialised
            wp.media.model.settings.post.url = set_to_post_id;
        }
        // sets the title and button text for the media uploader
        mediaUploader = wp.media.frames.file_frame = wp.media({
            title: 'Select an Image',
            button: {
                text: 'Choose Image'
            }, 
            mutilple: false
        });

        // runs when image is selected
        mediaUploader.on('select', function() {
            var image = mediaUploader.state().get('selection').first().toJSON();
            $('#image-preview2').attr('src', image.url).css('width', 'auto');
            $('#image_id2').val(image.id);
            // Restore the main post ID
            wp.media.model.settings.post.id = wp_image_id;
        });
         mediaUploader.open();
    });
    // Restore the main ID when the add media button is pressed
    jQuery('a.add_media').on( 'click', function() {
        wp.media.model.settings.post.id = wp_image_id;
    });
    //mediaUploader.close();
});

Answer 1

想

通了。我需要称这部分为：

$options = get_option('hiu_images');
if (!empty($options)) {
    $image_1 = esc_attr($options['image_1']);
    $image_2 = esc_attr($options['image_2']);
    $image_1_src = wp_get_attachment_image_src($image_1);
    $image_2_src = wp_get_attachment_image_src($image_2);
    $img_1_url = $image_1_src[0];
    $img_2_url = $image_2_src[0];

}

在不同的函数中，在呈现视图之前编写。