定制程序配色方案不传递颜色 _WordPress开发

我多年来没有从事WordPress的工作, Customizer对我来说是全新的, 我相信我搞砸了获取默认配色方案的值, 确实可以使用一些帮助。我使用了一个HTML网站, 并将其构建在基本的TwentySixteen主题之上, 以用于基本文件结构以及与某些较新的功能相关(对我而言是新的)。我按照更改CSS所需的方式修改了Customizer.php文件, 但是它不再采用颜色方案选项并将其传递出去, 因此我的主题目前基本上没有颜色。我将继续仔细研究它, 以弄清楚我搞砸了什么, 但是如果有人能指出我的方向来解决这个问题, 那将是很棒的。
这是我的Customizer.php文件的pastebin。
http://pastebin.com/gmK4KmGX
通常, 我会尽力提供修复措施的更多详细信息, 但此时, 我完全迷失了, 只是拉起食典委开始研究一些新事物, 希望能有所作为。
任何帮助将不胜感激。
编辑：如果我手动选择颜色并将其保存, 它将起作用。只是无法使用配色方案和默认配色方案。
编辑2：还注意到在Customizer中编辑时(如选择新颜色)它不会自动更新站点, 我现在完全陷入困境, 不得不丢失一些非常简单的事情。要为此开始赏金。
#1你需要更新color-scheme-control.js中的数组以反映对customr.php的更改, 并且$ color_scheme中的customr.php中的数组索引是错误的, 因为你已经删除了$ wp_customize-> remove_control(‘ 背景颜色’ ); 索引0用于page_background_color而不是索引1
以下是我所做的更改, 目前仅适用于适用于.site选择器的” 标题背景图片” 部分
color-scheme-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:enablecss = 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);

【定制程序配色方案不传递颜色】customr.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$widthWidth in pixels of the custom header image. Default 1200. *@type int$heightHeight in pixels of the custom header image. Default 280. *@type bool$flex-heightWhether 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 $labelColor 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_schemeif ( ! 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_choicesif ( ! 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 );