wordpress metabox中的多个颜色选择器不保存

Question

我正在关注这篇文章：http://javatechig.com/wordpress/how-to-implement-color-picker-with-wordpress 关于如何将颜色选择器放入我的元框，它显示正常，但是当我尝试保存它时，什么都没有保存。奇怪的是，我在一个站点上尝试过这个，基本上复制粘贴了整个过程，并且成功了。这次我需要 2 个颜色输入。所以我创建了我的元框并保存了表单：

<?php 

if ( ! function_exists( 'Theme_add_meta_box' ) ){
    function Theme_add_meta_box(){
        add_meta_box( 'breadcrumbs-image-page-metabox-options', esc_html__('Breadcrumbs Image', 'Theme' ), 'Theme_breadcrumbs_image_meta_box', 'page', 'side', 'low');
    }
}
add_action( 'add_meta_boxes', 'Theme_add_meta_box' );

if ( ! function_exists( 'Theme_breadcrumbs_image_meta_box' ) ){
    function Theme_breadcrumbs_image_meta_box( $post ){
        $custom = get_post_custom( $post->ID );
        $breadcrumbs_image = (isset($custom["breadcrumbs_image"][0])) ? $custom["breadcrumbs_image"][0] : '';
        $headline_color = (isset($custom["headline_color"][0])) ? $custom["headline_color"][0] : '';
        $breadcrumbs_color = (isset($custom["breadcrumbs_color"][0])) ? $custom["breadcrumbs_color"][0] : '';

        ?>
        <style type="text/css">
            .hidden{display: none;}
            .postbox .separator{padding-top: 20px;margin-top: 20px;border-top: 1px solid #ddd;}
        </style>
        <p>
            <input id="Theme_breadcrumbs_image_input" type="hidden" name="breadcrumbs_image" value="<?php echo $breadcrumbs_image; ?>"/>
            <a title="<?php esc_html_e('Add Breadcrumbs Image', 'Theme'); ?>" href="#" id="add-post-breadcrumbs_image">
            <?php
                if(isset($custom["breadcrumbs_image"][0]) ){
                    echo '<img width="254" src="'.$breadcrumbs_image.'" />';
                } else{
                    esc_html_e('Add Breadcrumbs Image', 'Theme');
                } ?></a>
            <?php
                if (!isset($custom["breadcrumbs_image"][0])) {
                    echo '<a title="'.esc_html__('Remove Breadcrumbs Image', 'Theme').'" href="#" id="remove-post-breadcrumbs_image" class="hidden">'.esc_html__('Remove Breadcrumbs Image', 'Theme').'</a>';
                } else{
                    echo '<a title="'.esc_html__('Remove Breadcrumbs Image', 'Theme').'" href="#" id="remove-post-breadcrumbs_image" >'.esc_html__('Remove Breadcrumbs Image', 'Theme').'</a>';
                }
            ?>
        </p>
        <p class="separator">
        <h4><?php esc_attr_e('Headline Color', 'Theme' ); ?></h4>
            <input class="color-field" type="text" name="headline_color" value="<?php echo '#'.$headline_color; ?>"/>
        <h4><?php esc_attr_e('Breadcrumbs Color', 'Theme' ); ?></h4>
            <input class="color-field" type="text" name="breadcrumbs_color" value="<?php echo '#'.$breadcrumbs_color; ?>"/>
        </p>
        <?php
    }
}

if ( ! function_exists( 'Theme_save_breadcrumbs_image_meta_box' ) ){
    function Theme_save_breadcrumbs_image_meta_box( $post ){
        if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ){
            return;
        }
        $breadcrumbs_image = (isset($_POST["breadcrumbs_image"])) ? $_POST["breadcrumbs_image"] : '';
        update_post_meta($post->ID, "breadcrumbs_image", $breadcrumbs_image);

        $headline_color = (isset($_POST["headline_color"])) ? $_POST["headline_color"] : '';
        update_post_meta($post->ID, "headline_color", $headline_color);

        $breadcrumbs_color = (isset($_POST["breadcrumbs_color"])) ? $_POST["breadcrumbs_color"] : '';
        update_post_meta($post->ID, "breadcrumbs_color", $breadcrumbs_color);

    }
}

add_action( 'save_post', 'Theme_save_breadcrumbs_image_meta_box' );

我也上传了图片，它正在正常工作。

我在 javascript 中初始化了我的颜色选择器

 $('.color-field').each(function(){
     $(this).wpColorPicker();
 });

我实际上添加了.each 以查看初始化是否需要每个输入字段分开，但即使我放这个也没有区别

 $('.color-field').wpColorPicker();

我也加入了颜色选择器

wp_enqueue_style( 'wp-color-picker');
wp_enqueue_script( 'wp-color-picker');

在我的functions.php 中，我的管理脚本被排入队列。

我可以选择颜色，我看到了颜色选择器，当我去保存它们时，什么也没有发生：\ 当页面刷新时，我得到空的颜色选择器。图片上传工作正常（我没有在这里包含它的 js 代码，但它可以工作，并且可以保存）。

那么我错过了什么？

Answer 1

我强烈建议你看看 WP 的 Piklist 插件。

特别是here...

Piklist 是一个非常棒的 WP 开发框架，不能更简单或更强大。