wordpress - 定制器配色方案不传递颜色

Question

我已经好几年没有在 WordPress 上工作了，定制器对我来说是全新的，我相信我已经把默认的配色方案值搞砸了，真的可以使用一些帮助。我采用了一个 HTML 站点，并将其构建在用于基本文件结构的股票 TwoSixteen 主题之上，并与一些较新的功能相关联(对我来说是新的)。我进去换了Customizer.php以我需要的方式提交 CSS 更改，但它不再选择配色方案选项并通过它们，所以我的主题目前基本上没有颜色。我正在继续查看它，看看我搞砸了什么，但如果有人能指出我解决这个问题的方向，那就太好了。

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

http://pastebin.com/gmK4KmGX

虽然通常我会尝试提供更多关于我试图修复它的细节，但此时我完全迷失了，只是拉起 Codex 开始找出一些希望在某处休息的新事物。

任何帮助将不胜感激。

编辑:如果我手动选择颜色并保存它，它就可以工作。只是不使用配色方案和默认配色方案。

编辑 2:还注意到在定制器中编辑时它不会自动更新站点(如选择新颜色)，我现在完全卡住了，不得不遗漏一些非常简单的东西。打算开始赏金。

Answer 1

您需要更新 color-scheme-control.js 中的数组以反射(reflect)您在 customr.php 中的更改以及您在 customr.php 中为 $color_scheme 的数组索引错了，因为你已经删除了 $wp_customize->remove_control( 'background_color' );索引 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: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);

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      $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 );