如何在主题选项中添加颜色选择器

时间：2018-04-16 作者：Mehraj Khan

我是WordPress的新手，我想在主题选项中添加简单的颜色选择器。我试过了，但没有成功。有人能推荐我吗？

3 个回复

最合适的回答,由SO网友:Bhupen 整理而成

在wordpress主题设置中设置颜色自定义程序的工作代码：

  function color_customizer($wp_customize){
  $wp_customize->add_section( \'theme_colors_settings\', array(
      \'title\' => __( \'Theme Colors Settings\', \'themeslug\' ),
      \'priority\' => 5,
    ) );

    $theme_colors = array();

    // Navigation Background Color
    $theme_colors[] = array(
      \'slug\'=>\'color_section_name\',
      \'default\' => \'#000000\',
      \'label\' => __(\'Color Section Title\', \'themeslug\')
    );

    foreach( $theme_colors as $color ) {

      $wp_customize->add_setting(
        $color[\'slug\'], array(
          \'default\' => $color[\'default\'],
          \'sanitize_callback\' => \'sanitize_hex_color\',
          \'type\' => \'option\',
          \'capability\' => \'edit_theme_options\'
        )
      );

      $wp_customize->add_control(
        new WP_Customize_Color_Control(
          $wp_customize,
          $color[\'slug\'],
          array(\'label\' => $color[\'label\'],
          \'section\' => \'theme_colors_settings\',
          \'settings\' => $color[\'slug\'])
        )
      );
    }
  }

  add_action( \'customize_register\', \'color_customizer\' );

SO网友:Alexius The Coder

使用WordPress自定义程序。要添加WordPress颜色选择器，只需使用Customizer Manager和每个Customizer对象的add\\uMethods。代码可用于函数中。php文件或单独的自定义程序特定文件中。

function diwp_customizer_add_colorPicker( $wp_customize){
    
    // Add New Section: Background Colors
    $wp_customize->add_section( \'diwp_color_section\', array(
        \'title\' => \'Background Color\',
        \'description\' => \'Set Color For Background\',
        \'priority\' => \'40\'
    ));
    
    // Add Settings
    $wp_customize->add_setting( \'diwp_background_color\', array(
        \'default\' => \'#370d07\',
    ));
    
    
    // Add Controls
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, \'diwp_background_color\', array(
        \'label\' => \'Choose Color\',
        \'section\' => \'diwp_color_section\',
        \'settings\' => \'diwp_background_color\'
    
    )));
    
    
}

add_action( \'customize_register\', \'diwp_customizer_add_colorPicker\' );

要显示更改的颜色，请在函数中添加此代码。php：

// displays custom background color
function diwp_generate_theme_option_css() {
    
    $backColor = get_theme_mod( \'diwp_background_color\' );
    
    if ( ! empty( $backColor ) ):
        
        ?>
        <style type="text/css" id="diwp-theme-option-css">
            
            .container {
                background: <?php echo esc_html($backColor); ?>
            }
        
        </style>
    
    <?php
    
    endif;
}

add_action( \'wp_head\', \'diwp_generate_theme_option_css\' );

Original code here

或者您可以在这个答案中看到如何使用jQuery更改颜色https://wordpress.stackexchange.com/a/360001/151351

SO网友:en0ndev

尝试将这些代码用于您的功能。php

我们添加了自定义设置的详细信息。

function theme_customize_register( $wp_customize ) {
      $wp_customize->add_setting( \'main_color\', array(
        \'default\'   => \'#ffffff\',
        \'transport\' => \'refresh\',
        \'sanitize_callback\' => \'sanitize_hex_color\',
      ) );
add_action( \'customize_register\', \'theme_customize_register\' );

然后，它将定制器和属性集成到CSS文件中。

function theme_get_customizer_css() {
    ob_start();
    $main_color = get_theme_mod( \'main_color\', \'\' );
    if ( ! empty( $main_color ) ) {
      ?>
      .contentDetails a {
      color: <?php echo $main_color; ?>;
      }
    <?php
  }
  $css = ob_get_clean();
  return $css;
}

以及CSS和自定义程序连接。

function theme_enqueue_styles() {
  wp_enqueue_style( \'theme-styles\', get_stylesheet_uri() );
  $custom_css = theme_get_customizer_css();
  wp_add_inline_style( \'theme-styles\', $custom_css );
}
add_action( \'wp_enqueue_scripts\', \'theme_enqueue_styles\' );

结束

小码农CODE

如何在主题选项中添加颜色选择器

相关推荐