如何在定制器中创建用于CSS不透明度的控件

我对WordPress内置的定制器非常陌生。我一整天都在读文章，收集资料。我看到，使用customizer，在创建add\\u控件组件时，我们可以创建各种类型。例如，我看到下面创建了一个日期输入字段。。。

$wp_customize->add_control( \'custom_theme_css\', array(
  \'type\' => \'date\',
  \'priority\' => 10, // Within the section.
  \'section\' => \'colors\', // Required, core or custom.
  \'label\' => __( \'Date\' ),
  \'description\' => __( \'This is a date control with a red border.\' ),
  \'input_attrs\' => array(
    \'class\' => \'my-custom-class-for-js\',
    \'style\' => \'border: 1px solid #900\',
    \'placeholder\' => __( \'mm/dd/yyyy\' ),
  ),
  \'active_callback\' => \'is_front_page\',
  \'section\' => \'custom_css\',
));

我还看到下面是一个textarea组件。。。

  $wp_customize->add_control( \'custom_theme_css\', array(
  \'label\' => __( \'Custom Theme CSS\' ),
  \'type\' => \'textarea\',
  \'section\' => \'custom_css\',
  ));

。。。但我们如何使其与css不透明度值相关？我想在自定义程序的“颜色”部分中执行类似的操作，允许页面背景进行不透明度调整。

  $wp_customize->add_control( \'custom_theme_css\', array(
  \'label\' => __( \'Change Opacity\' ),
  \'type\' => \'css\',
  \'opacity\' => \'\'//some variable that gets user input for opacity value
  \'section\' => \'color\',
   ));

我必须做些什么来学习如何正确构建它？

Update

下面是我调整背景不透明度演示的最终结果：

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

function lesson01b_options( $wp_customize ) {

    $wp_customize->add_section( \'lesson01b_msection\', array(
    \'title\' => __( \'Opacity Adjustments\' ),
    \'description\' => __( \'Adjust the opacity this way background images show through\' ),
    \'panel\' => \'\',
    \'priority\' => 39, //160 by default
    \'capability\' => \'edit_theme_options\',
    \'theme_supports\' => \'\',
    ));

    $wp_customize->add_setting( \'lesson01b_msetting\', array(
    \'type\' => \'theme_mod\', // or \'option\'
    \'capability\' => \'edit_theme_options\',
    \'theme_supports\' => \'\',
    \'default\' => \'\',
    \'transport\' => \'refresh\', // or postMessage
    \'sanitize_callback\' => \'\',
    \'sanitize_js_callback\' => \'\',
    ));

    $wp_customize->add_control( \'lesson01b_mcontrol\', array(
    \'label\' => __( \'Opacity Control\', \'lesson1b\' ),
    \'type\' => \'text\',
    \'section\' => \'lesson01b_msection\',
    \'settings\' => \'lesson01b_msetting\',
    ));
}

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

function lesson01b_get_setting() {
    ?>
    <style type=\'text/css\'>
    #page {
        opacity:<?php echo get_theme_mod(\'lesson01b_msetting\') ?> ;
    }
    </style>
    <?php
}

$wp_customize->add_control( \'my_control\', array( \'label\' => __( \'Opacity Control\', \'mytheme\' ), \'section\' => \'my_section\', \'settings\' => \'my_setting\', \'type\' => \'text\', ) );

Admin Theme customization

我遵循wordpress codex网站上关于通过插件创建管理主题的说明。我激活了插件，但我的样式表没有包含在<head>.. 这是我的代码：add_action( \'admin_init\', \'kd_plugin_admin_init\' ); add_action( \'admin_menu\', \'kd_plugin_admin_menu\' ); function kd_plugin_admin_init() { /* Register

相关推荐

Admin Theme customization