如何使用自定义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];


}

在另一个函数中，在渲染视图之前写入。