wordpress - 使用 select2 for wordpress 插件选项页面的多选产品

Question

我正在尝试使用select2. 该列表使用getproductsearch我之前所做的这个 ajax 操作出现，但我未能保存它。我之前做过这个功能post-meta，product-category但是插件失败了option page。我不确定我做错了什么。

请帮忙。

 class FeatureSale {
    private $feature_sale_options;

    public function __construct() {
        add_action( 'admin_menu', array( $this, 'feature_sale_add_plugin_page' ) );
        add_action( 'admin_init', array( $this, 'feature_sale_page_init' ) );
    }

    public function feature_sale_add_plugin_page() {
        add_submenu_page(
        'exclutips-settings',
            'Feature & Sale', // page_title
            'Feature & Sale', // menu_title
            'manage_options', // capability
            'feature-sale', // menu_slug
            array( $this, 'feature_sale_create_admin_page' ) // function
        );
    }

    public function feature_sale_create_admin_page() {
        $this->feature_sale_options = get_option( 'feature_sale_option_name' ); ?>

        <div class="wrap">
        <div class="catbox-area-admin" style="width: 500px;background: #fff;padding: 27px 50px;">
            <h2>Feature & Sale</h2>
            <p></p>
            <?php settings_errors(); ?>

            <form method="post" action="options.php">
                <?php
                    settings_fields( 'feature_sale_option_group' );
                    do_settings_sections( 'feature-sale-admin' );
                    submit_button();
                ?>
            </form>
        </div>
        </div>
    <?php }

    public function feature_sale_page_init() {
        register_setting(
            'feature_sale_option_group', // option_group
            'feature_sale_option_name', // option_name
            array( $this, 'feature_sale_sanitize' ) // sanitize_callback
        );

        add_settings_section(
            'feature_sale_setting_section', // id
            '', // title
            array( $this, 'feature_sale_section_info' ), // callback
            'feature-sale-admin' // page
        );

        add_settings_field(
            'vpm_sale_product', // id
            'VPM Sale Product', // title
            array( $this, 'vpm_sale_product_callback' ), // callback
            'feature-sale-admin', // page
            'feature_sale_setting_section' // section
        );

        add_settings_field(
            'vpm_featured_product', // id
            'VPM Featured Product', // title
            array( $this, 'vpm_featured_product_callback' ), // callback
            'feature-sale-admin', // page
            'feature_sale_setting_section' // section
        );
    }

    public function feature_sale_sanitize($input) {
        $sanitary_values = array();
        if ( isset( $input['vpm_sale_product'] ) ) {
            $sanitary_values['vpm_sale_product'] = $input['vpm_sale_product'];
        }

        if ( isset( $input['vpm_featured_product'] ) ) {
            $sanitary_values['vpm_featured_product'] = $input['vpm_featured_product'];
        }

        return $sanitary_values;
    }

    public function feature_sale_section_info() {

    }

    //Output the HTML for the metabox.

    public function vpm_sale_product_callback() {
        global $post;
        // Nonce field to validate form request came from current site
        wp_nonce_field( basename( __FILE__ ), 'vpm_sale_product_nonce' );

        $html = '';

        // always array because we have added [] to our <select> name attribute
        $feature_sale_options = get_option( 'feature_sale_option_name' ); // Array of All Options
        $vpm_sale_product = $feature_sale_options['vpm_sale_product'];

        $html .= '<p><select id="vpm_sale_product" name="vpm_sale_product[]" multiple="multiple" style="width:99%;max-width:25em;">';

        if( $vpm_sale_product ) {
            foreach( $vpm_sale_product as $post_id ) {
                $title = get_the_title( $post_id );
                // if the post title is too long, truncate it and add "..." at the end
                $title = ( mb_strlen( $title ) > 50 ) ? mb_substr( $title, 0, 49 ) . '...' : $title;
                $html .=  '<option value="' . $post_id . '" selected="selected">' . $title . '</option>';
            }
        }
        $html .= '</select></p>';

        echo $html;
        //==========================================
    }


     //* Output the HTML for the metabox.

    public function vpm_featured_product_callback() {
        global $post;
        // Nonce field to validate form request came from current site
        wp_nonce_field( basename( __FILE__ ), 'vpm_featured_product_nonce' );

        $html = '';

        // always array because we have added [] to our <select> name attribute
        $feature_sale_options = get_option( 'feature_sale_option_name' ); // Array of All Options
        $vpm_featured_product = $feature_sale_options['vpm_featured_product'];

        $html .= '<p><select id="vpm_featured_product" name="vpm_featured_product[]" multiple="multiple" style="width:99%;max-width:25em;">';

        if( $vpm_featured_product ) {
            foreach( $vpm_featured_product as $post_id ) {
                $title = get_the_title( $post_id );
                // if the post title is too long, truncate it and add "..." at the end
                $title = ( mb_strlen( $title ) > 50 ) ? mb_substr( $title, 0, 49 ) . '...' : $title;
                $html .=  '<option value="' . $post_id . '" selected="selected">' . $title . '</option>';
            }
        }
        $html .= '</select></p>';

        echo $html;
        echo $vpm_featured_product;
        //==========================================
        ?>
        <script>
        (function ($) {
            'use strict';
        $(function () {
            //--------------------------------------------------------------------------
            // multiple select with AJAX search
            $('#vpm_featured_product,#vpm_sale_product').select2({
                ajax: {
                        url: ajaxurl, // AJAX URL is predefined in WordPress admin
                        dataType: 'json',
                        delay: 250, // delay in ms while typing when to perform a AJAX search
                        data: function (params) {
                            return {
                                q: params.term, // search query
                                action: 'getproductsearch' // AJAX action for admin-ajax.php
                            };
                        },
                        processResults: function( data ) {
                        var options = [];
                        if ( data ) {

                            // data is the array of arrays, and each of them contains ID and the Label of the option
                            $.each( data, function( index, text ) { // do not forget that "index" is just auto incremented value
                                options.push( { id: text[0], text: text[1]  } );
                            });

                        }
                        return {
                            results: options
                        };
                    },
                    cache: true
                },
                minimumInputLength: 3 // the minimum of symbols to input before perform a search
            });

            //----------------------------------------------------------------------------------------
        });
    })(jQuery);
    </script>   
        <?php 
    }

}
if ( is_admin() )
    $feature_sale = new FeatureSale();

标签： wordpressjquery-select2

Answer 1

问题是这些select标签没有使用正确的name值：

<select id="vpm_sale_product" name="vpm_sale_product[]"...>
<select id="vpm_featured_product" name="vpm_featured_product[]"...>

正确的name值是：（根据您的register_setting()电话）

<select id="vpm_sale_product" name="feature_sale_option_name[vpm_sale_product][]"...>
<select id="vpm_featured_product" name="feature_sale_option_name[vpm_featured_product][]"...>

虽然在更正上述问题后，表单数据将被正确保存，但传递给的第五个参数（即菜单/页面 slug）应该与传递给andadd_submenu_page()的第四个参数匹配，也应该与传递给的那个匹配。在您的通话中，菜单/页面 slug 是，但对于其他三个功能，您将其设置为。add_settings_section()add_settings_field()do_settings_sections()add_submenu_page()feature-salefeature-sale-admin

建议使用wp_nonce_field()，但在您的情况下，没有必要，因为您提交到wp-admin/options.php. 当然，除非您想在 WordPress 保存选项之前进行检查。但即便如此，我相信一个 nonce 字段是好的。:)