web-dev-qa-db-ja.com

プラグインのオプションページで画像をアップロードする方法

私のコードはこちらです。他のオプションは完璧に機能しているので、画像を登録してリンクをデータベースに保存し、画像を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

これのためのより良いタイトルは次のようになります。設定ページに画像をアップロードするためのWordPressメディアアップローダの使用方法。

1 - メディアアップローダを表示するために必要なスクリプトを追加します。

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-メディアアップローダに必要なスクリプトを埋め込む：

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-今すぐメディアアップローダを呼び出すためにあなたの画像フィールドの横にクリック可能なボタンを追加します。

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

アップローダが動作したら、他の設定フィールドと同じように画像フィールド（input[name="logo"]）を処理し、その値をオプションに保存することができます。

それが役立つことを願っています。

8
Samuel Elh