如何在wordpress主题选项中添加颜色选择器

Question

我想在主题选项中添加颜色选择器。我在外观下添加了主题选项，因为我尝试添加颜色选择器。这里的主题选项和我仅在functions.php文件中添加的其他 PHP 代码。我想了解流程。到目前为止我添加了checkbox，input现在我想添加color picker.i 尝试过但没有得到。我是新手，可以WordPress随意解释任何错误。这里我使用了默认主题twenty seventeen ，有人可以建议我如何根据我的代码添加颜色选择器吗？代码在这里

    /******** Theme options *******/

 /**
 * Create A Simple Theme Options Panel
 *
 */

 // Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
  exit;
}

 // Start Class
 if ( ! class_exists( 'WPEX_Theme_Options' ) ) {

class WPEX_Theme_Options {

    /**
     * Start things up
     *
     * @since 1.0.0
     */
    public function __construct() {

        // We only need to register the admin panel on the back-end
        if ( is_admin() ) {
            add_action( 'admin_menu', array( 'WPEX_Theme_Options', 'add_admin_menu' ) );
            add_action( 'admin_init', array( 'WPEX_Theme_Options', 'register_settings' ) );
        }

    }

    /**
     * Returns all theme options
     *
     * @since 1.0.0
     */
    public static function get_theme_options() {
        return get_option( 'theme_options' );
    }

    /**
     * Returns single theme option
     *
     * @since 1.0.0
     */
    public static function get_theme_option( $id ) {
        $options = self::get_theme_options();
        if ( isset( $options[$id] ) ) {
            return $options[$id];
        }
    }

    /**
     * Add sub menu page
     *
     * @since 1.0.0
     */
    public static function add_admin_menu() {
        add_theme_page(
            esc_html__( 'Theme Options', 'text-domain' ),
            esc_html__( 'Theme Options', 'text-domain' ),
            'manage_options',
            'theme-settings',
            array( 'WPEX_Theme_Options', 'create_admin_page' )
        );
    }

    public static function register_settings() {
        register_setting( 'theme_options', 'theme_options', array( 'WPEX_Theme_Options', 'sanitize' ) );
    }

    /**
     * Sanitization callback
     */
    public static function sanitize( $options ) {



        // If we have options lets sanitize them
        if ( $options ) {

            // Checkbox
            if ( ! empty( $options['checkbox_example'] ) ) {
                $options['checkbox_example'] = 'on';
            } else {
                unset( $options['checkbox_example'] ); // Remove from options if not checked
            }

            // Input
            if ( ! empty( $options['input_example'] ) ) {
                $options['input_example'] = sanitize_text_field( $options['input_example'] );
            } else {
                unset( $options['input_example'] ); // Remove from options if empty
            }

            // Select
            if ( ! empty( $options['select_example'] ) ) {
                $options['select_example'] = sanitize_text_field( $options['select_example'] );
            }

        }

        // Return sanitized options
        return $options;

    }

    /**
     * Settings page output
     *
     * @since 1.0.0
     */
    public static function create_admin_page() { ?>

        <div class="wrap">

            <h1><?php esc_html_e( 'Theme Options', 'text-domain' ); ?></h1>

            <form method="post" action="options.php">

                <?php settings_fields( 'theme_options' ); ?>

                <table class="form-table wpex-custom-admin-login-table">

                    <?php // Checkbox example ?>
                    <tr valign="top">
                        <th scope="row"><?php esc_html_e( 'Checkbox Example', 'text-domain' ); ?></th>
                        <td>
                            <?php $value = self::get_theme_option( 'checkbox_example' ); ?>
                            <input type="checkbox" name="theme_options[checkbox_example]" <?php checked( $value, 'on' ); ?>> <?php esc_html_e( 'Checkbox example description.', 'text-domain' ); ?>
                        </td>
                    </tr>

                    <?php // Text input example ?>
                    <tr valign="top">
                        <th scope="row"><?php esc_html_e( 'Input Example', 'text-domain' ); ?></th>
                        <td>
                            <?php $value = self::get_theme_option( 'input_example' ); ?>
                            <input type="text" name="theme_options[input_example]" value="<?php echo esc_attr( $value ); ?>">
                        </td>
                    </tr>

                    <?php // Select example ?>
                    <tr valign="top" class="wpex-custom-admin-screen-background-section">
                        <th scope="row"><?php esc_html_e( 'Select Example', 'text-domain' ); ?></th>
                        <td>
                            <?php $value = self::get_theme_option( 'select_example' ); ?>
                            <select name="theme_options[select_example]">
                                <?php
                                $options = array(
                                    '1' => esc_html__( 'Option 1', 'text-domain' ),
                                    '2' => esc_html__( 'Option 2', 'text-domain' ),
                                    '3' => esc_html__( 'Option 3', 'text-domain' ),
                                );
                                foreach ( $options as $id => $label ) { ?>
                                    <option value="<?php echo esc_attr( $id ); ?>" <?php selected( $value, $id, true ); ?>>
                                        <?php echo strip_tags( $label ); ?>
                                    </option>
                                <?php } ?>
                            </select>
                        </td>                       
                    </tr>
                    <tr valign="top">
                            <th scope="row"><?php esc_html_e( 'Background Color', 'text-domain' ); ?></th>
                    </tr>
                </table>

                <?php submit_button(); ?>

            </form>

        </div><!-- .wrap -->
    <?php }

   }
 }
 new WPEX_Theme_Options();

 // Helper function to use in your theme to return a theme option value
  function myprefix_get_theme_option( $id = '' ) {
    return WPEX_Theme_Options::get_theme_option( $id );
  }

所以，远输出图像。

Answer 1

步骤 1)将“wp-color-picker”jquery 脚本和样式加入队列

add_action( 'admin_enqueue_scripts', 'mw_enqueue_color_picker' );
function mw_enqueue_color_picker( $hook_suffix ) {
    // first check that $hook_suffix is appropriate for your admin page
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'my-script-handle', plugins_url('my-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}

步骤 2)将输入（例如：文本输入）添加到您想要颜色选择器的界面

<input class="my-color-field" type="text" value="#bada55" data-default-color="#effeff" />

步骤 3)从脚本中调用“wpColorPicker”对象

记得上面我们把my-script.js入队打开，在my-script.js中加入这段代码。

jQuery(document).ready(function($){
    $('.my-color-field').wpColorPicker();
});

就是这样。