如何从 Redux Framework color_rgba-type 设置 rgba 背景颜色?
How can I set an rgba background-color from Redux Framework color_rgba-type?
我正在尝试在我的主题设置中添加一个选项,以使用 Redux 框架设置我的移动菜单的背景颜色。
我使用了 color_rgba 类型,所以我可以选择不透明的颜色。
我看到菜单上的背景颜色设置为 class 'mobile-menu',但只有一个十六进制值。
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 颜色?
我没有使用输出来生成我的样式,因为我在单独的 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'
),
我希望这对您有所帮助。
基于此参考 link:
https://docsv3.redux.io/core/fields/color-rgba/index.html
假设您想输出一种颜色作为背景色,而不是颜色。以下 key/pair 格式的输出数组将完成此操作:
'output' => array('background-color' => '.site-header')
或者,可以为不同的选择器指定多个元素。
'output' => array(
'background-color' => '.site-header',
'color' => '.site-footer')
也支持多个选择器。用逗号分隔。
'output' => array('background-color' => '.site-header, .site-footer')
我正在尝试在我的主题设置中添加一个选项,以使用 Redux 框架设置我的移动菜单的背景颜色。 我使用了 color_rgba 类型,所以我可以选择不透明的颜色。
我看到菜单上的背景颜色设置为 class 'mobile-menu',但只有一个十六进制值。
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 颜色?
我没有使用输出来生成我的样式,因为我在单独的 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'
),
我希望这对您有所帮助。
基于此参考 link: https://docsv3.redux.io/core/fields/color-rgba/index.html
假设您想输出一种颜色作为背景色,而不是颜色。以下 key/pair 格式的输出数组将完成此操作:
'output' => array('background-color' => '.site-header')
或者,可以为不同的选择器指定多个元素。
'output' => array(
'background-color' => '.site-header',
'color' => '.site-footer')
也支持多个选择器。用逗号分隔。
'output' => array('background-color' => '.site-header, .site-footer')