Question

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

<?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中初始化了我的colorpicker

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

我实际上添加了.each以查看初始化是否需要按输入字段分开，但即使我把它放在一起也没有区别

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

我也加入了colorpicker

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

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

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

那么我错过了什么？

Answer 1

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

特别是here ...

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

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

1 个答案: