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

Question

我想在主题中添加颜色选择器 options.I 添加到外观下的主题选项，因为我尝试添加颜色 picker.Here 主题选项和其他 PHP 我在 functions.php 文件 only.I 想了解 flow.so far 我添加了 checkbox，input 现在我想添加 color picker。我试过但没有得到.我是 WordPress 的新手，请随意解释 mistakes.Here 我使用的是默认主题 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”对象

记得我们在上面enqueued my-script.js 打开，在my-script.js.

中加入这段代码

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

就是这样。

Answer 2

我们需要 wp_enqueue_script 脚本和 wp_enqueue_style 带有 add_action 的样式到 functions.php 文件。只需通过此脚本包含一个 jQuery 文件和样式表文件。

// Register Scripts &amp; Styles in Admin panel
function custom_color_picker_scripts() {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 );
wp_enqueue_script( 'cp-active', plugins_url('/js/cp-active.js', __FILE__), array('jquery'), '', true );

}
add_action( 'admin_enqueue_scripts', custom_color_picker_scripts);

现在创建一个新的 javascript 文件，如 cp-active.js 并使用波纹管代码保持它定义为“/js/cp-active.js”文件路径。

jQuery('.color-picker').iris({
// or in the data-default-color attribute on the input
defaultColor: true,
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
palettes: true
});

在您的设置页面中添加一个带有 CSS class 颜色选择器的文本框，您要在其中显示输入文本。我使用“color_code”作为输入 $variable。

<input id="color_code" class="color-picker" name="color_code" type="text" value="" />

详情请见Add jQuery Color Picker WordPress Theme or Plugin

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

How to add color picker in wordpress theme options

wordpress

custom-wordpress-pages