首页 > 解决方案 > 如何从 Redux Framework color_rgba-type 设置 rgba 背景颜色?

问题描述

我正在尝试在我的主题设置中添加一个选项,以使用 Redux Framework 设置我的移动菜单的背景颜色。我使用了 color_rgba 类型,所以我可以选择不透明的颜色。

我在菜单上看到我的背景颜色设置为“mobile-menu”类,但只有一个 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 颜色?

标签: phpcssredux-framework

解决方案


我没有使用输出来生成我的样式,因为我在一个单独的 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'
            ),

我希望这会有所帮助。


推荐阅读