web-dev-qa-db-fra.com

Comment télécharger une image dans la page des options du plugin

Mon code est ici.Les autres options fonctionnent parfaitement, alors comment puis-je enregistrer l'image et enregistrer le lien dans la base de données et l'image dans la bibliothèque wp.

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
}
uploadsmedia-libraryupload-dirwp-handle-upload
4
rajwa766

Le meilleur titre pour cela serait: Comment utiliser l'utilitaire de téléchargement de média WordPress pour télécharger des images dans la page des paramètres.

1- Ajoutez les scripts nécessaires pour montrer le téléchargeur de média:

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- Intégrez les scripts nécessaires à l’éditeur de média:

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- Maintenant, ajoutez un bouton cliquable à côté de votre champ d’image pour appeler l’éditeur de média:

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

Une fois que le programme de téléchargement fonctionne, vous pouvez maintenant traiter le champ d'image (input[name="logo"]) comme tout autre champ de paramètres et enregistrer sa valeur dans vos options.

J'espère que cela pourra aider.

8
Samuel Elh