如何从Redux颜色_ rgba类型设置rgba背景色？

Question

我试图添加一个选项在我的主题设置，以设置我的手机菜单的背景颜色使用Redux框架。我使用color_rgba类型，这样就可以选择不透明的颜色。

我看到我的背景颜色设置在我的菜单上与类‘移动菜单’，但只有一个HEX值。

Redux::setSection( $opt_name, array(
    'title'      => __( 'Mobile menu', 'redux-framework-demo' ),
    'id'         => 'header-mobile-menu',
    'subsection' => true,
    'fields'     => array(
            'id'       => 'header-mobile-menu-background',
            'type'     => 'color_rgba',
            'title'    => __('Mobile menu background Color', 'redux-framework-demo'), 
            'subtitle' => __('Background color for mobile menu overlay', 'redux-framework-demo'),
            'default'  => array(
                'color'     => '#E2E2E2',
                'alpha'     => 1
            ),
            'transparent' => false,
            'output'   => array(
                'background-color' => '.mobile-menu',
            ),
        ),

) );

如何确保我得到的是rgba颜色而不是HEX颜色？

Answer 1

我不使用输出来生成我的样式，因为我是在一个单独的PHP文件中处理我的样式。但我会向你们展示我是如何做到的，希望它能帮助你们。

我认为这也可能是因为您在设置中没有使用默认的RGBA值。

这是我的场阵列：

array(
            'id' => 'the-id-of-my-field-is-here',
            'type' => 'color_rgba',
            'title' => 'my title of my field setting', 
            'subtitle' => esc_html__('My subtitle of my field setting', 'redux-framework-demo'),
            'transparent' => false,
            'default'  => array(
                'color'     => '#E2E2E2',
                'alpha'     => 1
            ),

        ),

在单独的php文件中，我调用选项名如下所示：

//This sets my redux settings in a variable called options    
$options = get_my_theme_options();

然后我正在检查我的选项中是否有价值，如果有，在我的风格中使用它，如下所示：

if(!empty($options['the-id-of-my-field-is-here'])) {
    echo'.mobile-menu {
        background-color: '.$options["the-id-of-my-field-is-here"]['rgba'].';
    }';
}

如您所见，我在末尾调用另一个数组，如rgba

我的猜测可能是尝试使用我的方法，或者在默认数组中添加一个RGBA值，如下所示：

'default'  => array(
                'color'     => '#E2E2E2',
                'alpha'     => 1,
                'rgba'      => 'RGBA VALUE HERE'
            ),

我希望这在任何方面都有帮助。

Answer 2

基于此参考链接：https://docsv3.redux.io/core/fields/color-rgba/index.html

假设您想要输出一个颜色作为背景色，而不是颜色。以下键/对格式的输出数组将完成这一任务：

'output' => array('background-color' => '.site-header')

或者，可以为不同的选择器指定多个元素。

'output' => array(
'background-color' => '.site-header',
'color'            => '.site-footer')

还支持多个选择器。用逗号隔开它们。

'output' => array('background-color' => '.site-header, .site-footer')