it-swarm.com.de

Wie lade ich ein Bild auf der Optionsseite des Plugins hoch?

Mein Code ist hier. Die anderen Optionen funktionieren perfekt, so dass ich das Bild registrieren und den Link in der Datenbank und das Bild in der WP-Bibliothek speichern kann.

function register_team_show_case_setting() {
    //register our settings
        register_setting('my_team_show_case_setting', 'layout');
        register_setting('my_team_show_case_setting', 'color');

        register_setting('my_team_show_case_setting', 'image');
}
function submenu_callback() {
    ?>
    <div class="wrap">
        <h2>Team Showcase Setting</h2>
        <form method="post" action="options.php">
            <?php settings_fields('my_team_show_case_setting'); ?>
    <?php do_settings_sections('my_team_show_case_setting'); ?>
            <table class="form-table">
                <tr valign="top">
                    <th scope="row">Layout</th>
                    <td> 
                        <select class="select-box" name="layout" value="<?php echo esc_attr(get_option('layout')); ?> class="form-control">
                            <option></option>
                            <option value="Grid"  <?php if (get_option('layout') == "Grid") echo 'selected="selected"'; ?>>Grid</option>
                            <option value="Grid-without-tab"  <?php if (get_option('layout') == "Grid-without-tab") echo 'selected="selected"'; ?>>Grid-without-tab</option>
                            <option value="Row" <?php if (get_option('layout') == "Row") echo 'selected="selected"'; ?>>Row</option>
                        </select>
                    </td>
                </tr>
                <tr valign="top">
                    <th scope="row">Color Schema</th>
                    <td> 
                        <select class="select-box" name="color" value="<?php echo esc_attr(get_option('color')); ?> class="form-control">
                            <option value="orange" <?php if (get_option('color') == "orange") echo 'selected="selected"'; ?> >orange</option>
                            <option value="green" <?php if (get_option('color') == "green") echo 'selected="selected"'; ?>>green</option>
                            <option value="blue" <?php if (get_option('color') == "blue") echo 'selected="selected"'; ?>>blue</option>
                        </select>
                    </td>
                </tr>

                <tr valign="top">
                    <th scope="row">Background Image</th>       
                     <td> 
                     <input type="file" name="image" />

                    </td> 
                </tr> 

            </table>
    <?php submit_button(); ?>
        </form>
    </div>
    <?php
}
4
rajwa766

Der bessere Titel dafür wäre: Wie man den WordPress Media Uploader benutzt, um Bilder in die Einstellungsseite hochzuladen.

1- Fügen Sie die erforderlichen Skripte hinzu, um den Medien-Uploader anzuzeigen:

add_action('admin_footer', function() { 

    /*
    if possible try not to queue this all over the admin by adding your settings GET page val into next
    if( empty( $_GET['page'] ) || "my-settings-page" !== $_GET['page'] ) { return; }
    */

    ?>

    <script>
        jQuery(document).ready(function($){

            var custom_uploader
              , click_elem = jQuery('.wpse-228085-upload')
              , target = jQuery('.wrap input[name="logo"]')

            click_elem.click(function(e) {
                e.preventDefault();
                //If the uploader object has already been created, reopen the dialog
                if (custom_uploader) {
                    custom_uploader.open();
                    return;
                }
                //Extend the wp.media object
                custom_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
                custom_uploader.on('select', function() {
                    attachment = custom_uploader.state().get('selection').first().toJSON();
                    target.val(attachment.url);
                });
                //Open the uploader dialog
                custom_uploader.open();
            });      
        });
    </script>

    <?php
    });

2- Betten Sie die für den Medien-Uploader erforderlichen Skripte ein:

add_action('admin_enqueue_scripts', function(){
    /*
    if possible try not to queue this all over the admin by adding your settings GET page val into next
    if( empty( $_GET['page'] ) || "my-settings-page" !== $_GET['page'] ) { return; }
    */
    wp_enqueue_media();
});

3- Fügen Sie nun eine anklickbare Schaltfläche neben Ihrem Bildfeld hinzu, um den Medien-Uploader aufzurufen:

<input type="file" name="logo" />
<button class="button wpse-228085-upload">Upload</button>

Sobald der Uploader funktioniert, können Sie das Bildfeld (input[name="logo"]) wie jedes andere Einstellungsfeld verarbeiten und seinen Wert in Ihren Optionen speichern.

Hoffentlich hilft das.

8
Samuel Elh