定制程序配色方案不通过颜色

Question

我没有在多年的WordPress工作，Customizer对我来说是全新的，我相信我搞砸了获取默认的配色方案值，并可以真正使用一些帮助。我带了一个HTML网站，并将其构建在基本文件结构的股票TwentySixteen主题的顶部，以及绑定到一些新功能（对我来说是新的）。我以改变Customizer.php文件的方式改变了CSS的格式，但它不再提取颜色方案选项并将它们传递出去，所以我的主题现在开始基本没有颜色。我正在继续研究它，看看我搞砸了什么，但是如果有人能指出我解决这个问题的方向，那将是非常棒的。

这是我的Customizer.php文件的一个pastebin。

http://pastebin.com/gmK4KmGX

虽然通常我会尽量提供什么，我试图做修复它更多的细节，在这一点上，我完全失去了刚刚拉升法典开始找出一些新的东西希望在某个地方休息一下。

任何帮助将不胜感激。

编辑︰如果我手动选择颜色并保存它，它的工作原理。只是没有与颜色方案和默认的配色方案。

编辑2：也注意到它在Customizer中编辑时没有自动更新网站（如在选择新颜色时），我现在完全卡住了，不得不丢失一些简单的东西。要开始对此的赏金。

Answer 1

您需要更新color-scheme-control.js中的数组以反映customizer.php中的更改以及您的customizer.php中的数组索引$color_scheme是错误的，因为您已经删除了$wp_customize->remove_control('background_color');索引0为page_background_color不索引1

下面是我所作的更改，目前仅适用于“标题背景图片”部分，其施加到.site选择

颜色方案-control.js

/* global colorScheme, Color */ 
/** 
* Add a listener to the Color Scheme control to update other color controls to new values/defaults. 
* Also trigger an update of the Color Scheme CSS when a color is changed. 
*/ 

(function(api) { 
    var cssTemplate = wp.template('twentysixteen-color-scheme'), 
    colorSchemeKeys = [ 
     'page_background_color', 
     'link_color', 
     'main_text_color', 
     'secondary_text_color' 
    ], 
    colorSettings = [ 
     'page_background_color', 
     'link_color', 
     'main_text_color', 
     'secondary_text_color' 
    ]; 

    api.controlConstructor.select = api.Control.extend({ 
    ready: function() { 
     if ('color_scheme' === this.id) { 
     this.setting.bind('change', function(value) { 
      var colors = colorScheme[value].colors; 

      // Update Page Background Color. 
      var color = colors[0]; 
      api('page_background_color').set(color); 
      api.control('page_background_color').container.find('.color-picker-hex') 
      .data('data-default-color', color) 
      .wpColorPicker('defaultColor', color); 

      // Update Link Color. 
      color = colors[1]; 
      api('link_color').set(color); 
      api.control('link_color').container.find('.color-picker-hex') 
      .data('data-default-color', color) 
      .wpColorPicker('defaultColor', color); 

      // Update Main Text Color. 
      color = colors[2]; 
      api('main_text_color').set(color); 
      api.control('main_text_color').container.find('.color-picker-hex') 
      .data('data-default-color', color) 
      .wpColorPicker('defaultColor', color); 

      // Update Secondary Text Color. 
      color = colors[3]; 
      api('secondary_text_color').set(color); 
      api.control('secondary_text_color').container.find('.color-picker-hex') 
      .data('data-default-color', color) 
      .wpColorPicker('defaultColor', color); 
     }); 
     } 
    } 
    }); 

    // Generate the CSS for the current Color Scheme. 
    function updateCSS() { 
    var scheme = api('color_scheme')(), 
     css, 
     colors = _.object(colorSchemeKeys, colorScheme[scheme].colors); 

    // Merge in color scheme overrides. 
    _.each(colorSettings, function(setting) { 
     colors[setting] = api(setting)(); 
    }); 

    // Add additional color. 
    // jscs:disable 
    colors.border_color = Color(colors.main_text_color).toCSS('rgba', 0.2); 
    // jscs:enable 

    css = cssTemplate(colors); 

    api.previewer.send('update-color-scheme-css', css); 
    } 

    // Update the CSS whenever a color setting is changed. 
    _.each(colorSettings, function(setting) { 
    api(setting, function(setting) { 
     setting.bind(updateCSS); 
    }); 
    }); 
})(wp.customize); 

customizer.php

<?php 
/** 
* Twenty Sixteen Customizer functionality 
* 
* @package WordPress 
* @subpackage Twenty_Sixteen 
* @since Twenty Sixteen 1.0 
*/ 

/** 
* Sets up the WordPress core custom header and custom background features. 
* 
* @since Twenty Sixteen 1.0 
* 
* @see twentysixteen_header_style() 
*/ 
function twentysixteen_custom_header_and_background() { 
    $color_scheme    = twentysixteen_get_color_scheme(); 
    $default_background_color = trim($color_scheme[0], '#'); 
    $default_text_color  = trim($color_scheme[3], '#'); 

    /** 
    * Filter the arguments used when adding 'custom-background' support in Twenty Sixteen. 
    * 
    * @since Twenty Sixteen 1.0 
    * 
    * @param array $args { 
    *  An array of custom-background support arguments. 
    * 
    *  @type string $default-color Default color of the background. 
    * } 
    */ 
    add_theme_support('custom-background', apply_filters('twentysixteen_custom_background_args', array(
     'default-color' => $default_background_color, 
    ))); 

    /** 
    * Filter the arguments used when adding 'custom-header' support in Twenty Sixteen. 
    * 
    * @since Twenty Sixteen 1.0 
    * 
    * @param array $args { 
    *  An array of custom-header support arguments. 
    * 
    *  @type string $default-text-color Default color of the header text. 
    *  @type int  $width   Width in pixels of the custom header image. Default 1200. 
    *  @type int  $height   Height in pixels of the custom header image. Default 280. 
    *  @type bool  $flex-height  Whether to allow flexible-height header images. Default true. 
    *  @type callable $wp-head-callback Callback function used to style the header image and text 
    *          displayed on the blog. 
    * } 
    */ 
    add_theme_support('custom-header', apply_filters('twentysixteen_custom_header_args', array(
     'default-text-color'  => $default_text_color, 
     'width'     => 1200, 
     'height'     => 280, 
     'flex-height'   => true, 
     'wp-head-callback'  => 'twentysixteen_header_style', 
    ))); 
} 


if (! function_exists('twentysixteen_header_style')) : 
/** 
* Styles the header text displayed on the site. 
* 
* Create your own twentysixteen_header_style() function to override in a child theme. 
* 
* @since Twenty Sixteen 1.0 
* 
* @see twentysixteen_custom_header_and_background(). 
*/ 
function twentysixteen_header_style() { 
    // If the header text option is untouched, let's bail. 
    if (display_header_text()) { 
     return; 
    } 

    // If the header text has been hidden. 
    ?> 
    <style type="text/css" id="twentysixteen-header-css"> 
     .site-branding { 
      margin: 0 auto 0 0; 
     } 

     .site-branding .site-title, 
     .site-description { 
      clip: rect(1px, 1px, 1px, 1px); 
      position: absolute; 
     } 
    </style> 
    <?php 
} 
endif; // twentysixteen_header_style 

/** 
* Adds postMessage support for site title and description for the Customizer. 
* 
* @since Twenty Sixteen 1.0 
* 
* @param WP_Customize_Manager $wp_customize The Customizer object. 
*/ 
function twentysixteen_customize_register($wp_customize) { 
    $color_scheme = twentysixteen_get_color_scheme(); 

    $wp_customize->get_setting('blogname')->transport   = 'postMessage'; 
    $wp_customize->get_setting('blogdescription')->transport = 'postMessage'; 

    if (isset($wp_customize->selective_refresh)) { 
     $wp_customize->selective_refresh->add_partial('blogname', array(
      'selector' => '.site-title a', 
      'container_inclusive' => false, 
      'render_callback' => 'twentysixteen_customize_partial_blogname', 
     )); 
     $wp_customize->selective_refresh->add_partial('blogdescription', array(
      'selector' => '.site-description', 
      'container_inclusive' => false, 
      'render_callback' => 'twentysixteen_customize_partial_blogdescription', 
     )); 
    } 

// Remove the core header textcolor control, as it shares the main text color. 
$wp_customize->remove_control('background_color'); 

    // Add color scheme setting and control. 
    $wp_customize->add_setting('color_scheme', array(
     'default'   => 'default', 
     'sanitize_callback' => 'twentysixteen_sanitize_color_scheme', 
     'transport'   => 'postMessage', 
    )); 

    $wp_customize->add_control('color_scheme', array(
     'label' => __('Base Color Scheme', 'twentysixteen'), 
     'section' => 'colors', 
     'type'  => 'select', 
     'choices' => twentysixteen_get_color_scheme_choices(), 
     'priority' => 1, 
    )); 


    // Add page background color setting and control. 
    $wp_customize->add_setting('page_background_color', array(
     'default'   => $color_scheme[0], 
     'sanitize_callback' => 'sanitize_hex_color', 
     'transport'   => 'postMessage', 
    )); 

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'page_background_color', array(
     'label'  => __('Header Background Color', 'twentysixteen'), 
     'section'  => 'colors', 
    ))); 

    // Remove the core header textcolor control, as it shares the main text color. 
    $wp_customize->remove_control('header_textcolor'); 

    // Add link color setting and control. 
    $wp_customize->add_setting('link_color', array(
     'default'   => $color_scheme[1], 
     'sanitize_callback' => 'sanitize_hex_color', 
     'transport'   => 'postMessage', 
    )); 

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'link_color', array(
     'label'  => __('Header Text Color', 'twentysixteen'), 
     'section'  => 'colors', 
    ))); 

    // Add main text color setting and control. 
    $wp_customize->add_setting('main_text_color', array(
     'default'   => $color_scheme[2], 
     'sanitize_callback' => 'sanitize_hex_color', 
     'transport'   => 'postMessage', 
    )); 

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'main_text_color', array(
     'label'  => __('Sidebar Left Background Color', 'twentysixteen'), 
     'section'  => 'colors', 
    ))); 

    // Add secondary text color setting and control. 
    $wp_customize->add_setting('secondary_text_color', array(
     'default'   => $color_scheme[3], 
     'sanitize_callback' => 'sanitize_hex_color', 
     'transport'   => 'postMessage', 
    )); 

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'secondary_text_color', array(
     'label'  => __('Sidebar Right Background Color', 'twentysixteen'), 
     'section'  => 'colors', 
    ))); 
} 
add_action('customize_register', 'twentysixteen_customize_register', 11); 

/** 
* Render the site title for the selective refresh partial. 
* 
* @since Twenty Sixteen 1.2 
* @see twentysixteen_customize_register() 
* 
* @return void 
*/ 
function twentysixteen_customize_partial_blogname() { 
    bloginfo('name'); 
} 

/** 
* Render the site tagline for the selective refresh partial. 
* 
* @since Twenty Sixteen 1.2 
* @see twentysixteen_customize_register() 
* 
* @return void 
*/ 
function twentysixteen_customize_partial_blogdescription() { 
    bloginfo('description'); 
} 

/** 
* Registers color schemes for Twenty Sixteen. 
* 
* Can be filtered with {@see 'twentysixteen_color_schemes'}. 
* 
* The order of colors in a colors array: 
* 1. Main Background Color. 
* 2. Page Background Color. 
* 3. Link Color. 
* 4. Main Text Color. 
* 5. Secondary Text Color. 
* 
* @since Twenty Sixteen 1.0 
* 
* @return array An associative array of color scheme options. 
*/ 
function twentysixteen_get_color_schemes() { 
    /** 
    * Filter the color schemes registered for use with Twenty Sixteen. 
    * 
    * The default schemes include 'default', 'dark', 'gray', 'red', and 'yellow'. 
    * 
    * @since Twenty Sixteen 1.0 
    * 
    * @param array $schemes { 
    *  Associative array of color schemes data. 
    * 
    *  @type array $slug { 
    *   Associative array of information for setting up the color scheme. 
    * 
    *   @type string $label Color scheme label. 
    *   @type array $colors HEX codes for default colors prepended with a hash symbol ('#'). 
    *        Colors are defined in the following order: Main background, page 
    *        background, link, main text, secondary text. 
    *  } 
    * } 
    */ 
    return apply_filters('twentysixteen_color_schemes', array(
     'default' => array(
      'label' => __('Default', 'twentysixteen'), 
      'colors' => array(
       '#ffffff', 
       '#ffffff', 
       '#007acc', 
       '#1a1a1a', 
       '#686868', 
      ), 
     ), 
     'dark' => array(
      'label' => __('Dark', 'twentysixteen'), 
      'colors' => array(
       '#262626', 
       '#1a1a1a', 
       '#9adffd', 
       '#e5e5e5', 
       '#c1c1c1', 
      ), 
     ), 
     'gray' => array(
      'label' => __('Gray', 'twentysixteen'), 
      'colors' => array(
       '#616a73', 
       '#4d545c', 
       '#c7c7c7', 
       '#f2f2f2', 
       '#f2f2f2', 
      ), 
     ), 
     'red' => array(
      'label' => __('Red', 'twentysixteen'), 
      'colors' => array(
       '#ffffff', 
       '#ff675f', 
       '#640c1f', 
       '#402b30', 
       '#402b30', 
      ), 
     ), 
     'yellow' => array(
      'label' => __('Yellow', 'twentysixteen'), 
      'colors' => array(
       '#3b3721', 
       '#ffef8e', 
       '#774e24', 
       '#3b3721', 
       '#5b4d3e', 
      ), 
     ), 
    )); 
} 

if (! function_exists('twentysixteen_get_color_scheme')) : 
/** 
* Retrieves the current Twenty Sixteen color scheme. 
* 
* Create your own twentysixteen_get_color_scheme() function to override in a child theme. 
* 
* @since Twenty Sixteen 1.0 
* 
* @return array An associative array of either the current or default color scheme HEX values. 
*/ 
function twentysixteen_get_color_scheme() { 
    $color_scheme_option = get_theme_mod('color_scheme', 'default'); 
    $color_schemes  = twentysixteen_get_color_schemes(); 

    if (array_key_exists($color_scheme_option, $color_schemes)) { 
     return $color_schemes[ $color_scheme_option ]['colors']; 
    } 

    return $color_schemes['default']['colors']; 
} 
endif; // twentysixteen_get_color_scheme 

if (! function_exists('twentysixteen_get_color_scheme_choices')) : 
/** 
* Retrieves an array of color scheme choices registered for Twenty Sixteen. 
* 
* Create your own twentysixteen_get_color_scheme_choices() function to override 
* in a child theme. 
* 
* @since Twenty Sixteen 1.0 
* 
* @return array Array of color schemes. 
*/ 
function twentysixteen_get_color_scheme_choices() { 
    $color_schemes    = twentysixteen_get_color_schemes(); 
    $color_scheme_control_options = array(); 

    foreach ($color_schemes as $color_scheme => $value) { 
     $color_scheme_control_options[ $color_scheme ] = $value['label']; 
    } 

    return $color_scheme_control_options; 
} 
endif; // twentysixteen_get_color_scheme_choices 


if (! function_exists('twentysixteen_sanitize_color_scheme')) : 
/** 
* Handles sanitization for Twenty Sixteen color schemes. 
* 
* Create your own twentysixteen_sanitize_color_scheme() function to override 
* in a child theme. 
* 
* @since Twenty Sixteen 1.0 
* 
* @param string $value Color scheme name value. 
* @return string Color scheme name. 
*/ 
function twentysixteen_sanitize_color_scheme($value) { 
    $color_schemes = twentysixteen_get_color_scheme_choices(); 

    if (! array_key_exists($value, $color_schemes)) { 
     return 'default'; 
    } 

    return $value; 
} 
endif; // twentysixteen_sanitize_color_scheme 

/** 
* Enqueues front-end CSS for color scheme. 
* 
* @since Twenty Sixteen 1.0 
* 
* @see wp_add_inline_style() 
*/ 
function twentysixteen_color_scheme_css() { 
    $color_scheme_option = get_theme_mod('color_scheme', 'default'); 

    // Don't do anything if the default color scheme is selected. 
    if ('default' === $color_scheme_option) { 
     return; 
    } 

    $color_scheme = twentysixteen_get_color_scheme(); 

    // Convert main text hex color to rgba. 
    $color_textcolor_rgb = twentysixteen_hex2rgb($color_scheme[3]); 

    // If the rgba values are empty return early. 
    if (empty($color_textcolor_rgb)) { 
     return; 
    } 

    // If we get this far, we have a custom color scheme. 
    $colors = array(
     'page_background_color' => $color_scheme[0], 
     'link_color'   => $color_scheme[1], 
     'main_text_color'  => $color_scheme[2], 
     'secondary_text_color' => $color_scheme[3], 
     'border_color'   => vsprintf('rgba(%1$s, %2$s, %3$s, 0.2)', $color_textcolor_rgb), 

    ); 

    $color_scheme_css = twentysixteen_get_color_scheme_css($colors); 

    wp_add_inline_style('twentysixteen-style', $color_scheme_css); 
} 
add_action('wp_enqueue_scripts', 'twentysixteen_color_scheme_css'); 

/** 
* Binds the JS listener to make Customizer color_scheme control. 
* 
* Passes color scheme data as colorScheme global. 
* 
* @since Twenty Sixteen 1.0 
*/ 
function twentysixteen_customize_control_js() { 
    wp_enqueue_script('color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array('customize-controls', 'iris', 'underscore', 'wp-util'), '20160816', true); 
    wp_localize_script('color-scheme-control', 'colorScheme', twentysixteen_get_color_schemes()); 
} 
add_action('customize_controls_enqueue_scripts', 'twentysixteen_customize_control_js'); 

/** 
* Binds JS handlers to make the Customizer preview reload changes asynchronously. 
* 
* @since Twenty Sixteen 1.0 
*/ 
function twentysixteen_customize_preview_js() { 
    wp_enqueue_script('twentysixteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array('customize-preview'), '20160816', true); 
} 
add_action('customize_preview_init', 'twentysixteen_customize_preview_js'); 

/** 
* Returns CSS for the color schemes. 
* 
* @since Twenty Sixteen 1.0 
* 
* @param array $colors Color scheme colors. 
* @return string Color scheme CSS. 
*/ 
function twentysixteen_get_color_scheme_css($colors) { 
    $colors = wp_parse_args($colors, array(
     'page_background_color' => '', 
     'link_color'   => '', 
     'main_text_color'  => '', 
     'secondary_text_color' => '', 
     'border_color'   => '', 
    )); 

    return <<<CSS 
    /* Color Scheme */ 

    /* Background Color */ 


    /* Page Background Color */ 
    .site { 
     background-color: {$colors['page_background_color']}; 
    } 


CSS; 
} 


/** 
* Outputs an Underscore template for generating CSS for the color scheme. 
* 
* The template generates the css dynamically for instant display in the 
* Customizer preview. 
* 
* @since Twenty Sixteen 1.0 
*/ 
function twentysixteen_color_scheme_css_template() { 
    $colors = array(
     'page_background_color' => '{{ data.page_background_color }}', 
     'link_color'   => '{{ data.link_color }}', 
     'main_text_color'  => '{{ data.main_text_color }}', 
     'secondary_text_color' => '{{ data.secondary_text_color }}', 
     'border_color'   => '{{ data.border_color }}', 
    ); 
    ?> 
    <script type="text/html" id="tmpl-twentysixteen-color-scheme"> 
     <?php echo twentysixteen_get_color_scheme_css($colors); ?> 
    </script> 
    <?php 
} 
add_action('customize_controls_print_footer_scripts', 'twentysixteen_color_scheme_css_template'); 

/** 
* Enqueues front-end CSS for the page background color. 
* 
* @since Twenty Sixteen 1.0 
* 
* @see wp_add_inline_style() 
*/ 
function twentysixteen_page_background_color_css() { 
    $color_scheme   = twentysixteen_get_color_scheme(); 
    $default_color   = $color_scheme[0]; 
    $page_background_color = get_theme_mod('page_background_color', $default_color); 

    // Don't do anything if the current color is the default. 
    if ($page_background_color === $default_color) { 
     return; 
    } 

    $css = ' 
     /* Custom Header Background Color */ 
     .site { 
      background-color: %1$s; 
     } 
     .ui-bar-a { 
      background-color: %1$s; 
     } 

    '; 

    wp_add_inline_style('twentysixteen-style', sprintf($css, $page_background_color)); 
} 
add_action('wp_enqueue_scripts', 'twentysixteen_page_background_color_css', 11); 

/** 
* Enqueues front-end CSS for the link color. 
* 
* @since Twenty Sixteen 1.0 
* 
* @see wp_add_inline_style() 
*/ 
function twentysixteen_link_color_css() { 
    $color_scheme = twentysixteen_get_color_scheme(); 
    $default_color = $color_scheme[2]; 
    $link_color = get_theme_mod('link_color', $default_color); 

    // Don't do anything if the current color is the default. 
    if ($link_color === $default_color) { 
     return; 
    } 

    $css = ' 
     /* Custom Header Text Color */ 

     [data-role=header] .header-title { 
      color: %1$s; 
     } 

     [data-role=panel][data-theme=d] .widget * { 
      color: %1$s; 
     } 

     [data-role=panel][data-theme=d] ul li a { 
     color: %1$s !important; 
     } 
    '; 

    wp_add_inline_style('twentysixteen-style', sprintf($css, $link_color)); 
} 
add_action('wp_enqueue_scripts', 'twentysixteen_link_color_css', 11); 

/** 
* Enqueues front-end CSS for the main text color. 
* 
* @since Twenty Sixteen 1.0 
* 
* @see wp_add_inline_style() 
*/ 
function twentysixteen_main_text_color_css() { 
    $color_scheme = twentysixteen_get_color_scheme(); 
    $default_color = $color_scheme[3]; 
    $main_text_color = get_theme_mod('main_text_color', $default_color); 

    // Don't do anything if the current color is the default. 
    if ($main_text_color === $default_color) { 
     return; 
    } 

    // Convert main text hex color to rgba. 
    $main_text_color_rgb = twentysixteen_hex2rgb($main_text_color); 

    // If the rgba values are empty return early. 
    if (empty($main_text_color_rgb)) { 
     return; 
    } 

    // If we get this far, we have a custom color scheme. 
    $border_color = vsprintf('rgba(%1$s, %2$s, %3$s, 0.2)', $main_text_color_rgb); 

    $css = ' 

    /* Custom Sidebar Left Background Color */ 

    [data-role=panel][data-theme=a] { 
     background: %1$s; 
     border-right: 1px solid %1$s; 
    } 

    '; 

    wp_add_inline_style('twentysixteen-style', sprintf($css, $main_text_color, $border_color)); 
} 
add_action('wp_enqueue_scripts', 'twentysixteen_main_text_color_css', 11); 

/** 
* Enqueues front-end CSS for the secondary text color. 
* 
* @since Twenty Sixteen 1.0 
* 
* @see wp_add_inline_style() 
*/ 
function twentysixteen_secondary_text_color_css() { 
    $color_scheme = twentysixteen_get_color_scheme(); 
    $default_color = $color_scheme[4]; 
    $secondary_text_color = get_theme_mod('secondary_text_color', $default_color); 

    // Don't do anything if the current color is the default. 
    if ($secondary_text_color === $default_color) { 
     return; 
    } 

    $css = ' 
     /* Custom Sidebar Right Background Color */ 

    .ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-open.ui-panel-position-right.ui-panel-display-push { 
     background: %1$s; 
    } 

    .ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-right.ui-panel-display-push { 
     background: %1$s; 
    } 

    '; 

    wp_add_inline_style('twentysixteen-style', sprintf($css, $secondary_text_color)); 
} 
add_action('wp_enqueue_scripts', 'twentysixteen_secondary_text_color_css', 11);