对于Elementor页面生成器函数,$Query媒体查询数组应该具有什么形式?

时间:2020-07-13 作者:ralphjsmit

我正在用Elementor页面生成器构建一个主题,我想向某些元素添加一些CSS输出。我连接到parse\\u css函数。

我想使用样式表::add\\u rules()函数(code reference). 此函数采用三个参数:

Stylesheet::add_rules( string $selector, array|string $style_rules = null, array $query = null )
第一个参数$selector 以及$style_rules 没有那么难:

     $post_css->get_stylesheet()->add_rules( $element->get_unique_selector(), [
    \'width\' => \'300px\',
   ] );
这是一个示例函数,其中元素的宽度为300px。最困难的是媒体的质疑,$query. 我知道该参数需要一个数组作为输入,但它不能告诉数组的类型或形式。

我尝试了很多东西。以下是我认为合乎逻辑的几点:

    $query = [\'(min-width: 600px)\'];
    $query = [\'@media (min-width: 600px)\'];
    $query = [
    \'min-width\' => \'600px\',
   ]; 
最后一个与$style_rules 参数,但它不起作用。

我搜索了示例、文档、Github等,但都没有结果。

如何更改$query 输入参数,以便使用媒体查询呈现代码?

如果你能给我举个例子,我将不胜感激!

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

前言There\'s no WordPress-specific stuff in this answer, 但我只是想帮忙,因为官方文件(就写作而言)没有太大帮助。。

但正如我在评论中所说,我不使用Elementor,这意味着我对Elementor的技术知识了解不多。(实际上,即使是非技术性的……))

$query 需要一个min/max 和a“;“设备”

因此add_rules() Elementor中的方法stylesheet class 正在使用add_query_hash()hash_to_query() 方法,然后我检查了源代码并注意到:

$query 数组(第三个参数add_rules() 方法)应具有minmax 项目,例如。\'min\' => 600\'max\' => 799, 或者两者兼而有之。

需要有一个;“设备”;名称与min/max 中的值$query 大堆以及注册海关;“设备”;,您可以使用add_device() 该类中的方法。

此外max 中的值$query 阵列必须在设备大小的范围内。例如,在下面的示例中max799, 因此,最大设备大小必须为800 或更多。

用于测试add_rules():测试正常,但没有使用实际的Elementor插件进行尝试

$css = new Stylesheet;

$css->add_device( \'600\', 600 );
$css->add_device( \'800\', 800 );

// Outputs @media(min-width:600px){#foo{width:300px;}}
$css->add_rules( \'#foo\', [
  \'width\' => \'300px\',
], [
  \'min\' => 600,
] );

// Outputs @media(max-width:799px){#foo{height:400px;}}
$css->add_rules( \'#foo\', [
  \'height\' => \'400px\', // this is merely a test
], [
  \'max\' => 799,
] );

echo $css; // echoes the CSS media queries above
// It works because the class has a __toString() method.
快乐的编码!