WordPress 在 Functions.php 中使用 JavaScript 对 CSS 文件进行排队

如何解决WordPress 在 Functions.php 中使用 JavaScript 对 CSS 文件进行排队

我正在尝试仅在移动设备上加载 CSS 文件。

我做了一些研究，发现最好的方法是使用 JS 所以这是我找到的代码：

$( document ).ready(function() {      
var isMobile = window.matchMedia("only screen and (max-width: 760px)");

if (isMobile.matches) {
    //Add your script that should run on mobile here
}
});

现在如何将下面的代码放入该代码中？

wp_enqueue_style( 'custom-css',get_template_directory_uri() . '/responsive.css'    );

还有我如何将它包含在 Functions.PHP 文件中。

我尝试了以下方法，但没有成功

?>
<script>
$( document ).ready(function() {      
var isMobile = window.matchMedia("only screen and (max-width: 760px)");

if (isMobile.matches) {

wp_enqueue_style( 'custom-css',get_template_directory_uri() . '/responsive.css'    );
    
}
});
</script>
<?PHP

解决方法

结合 PHP 和 JavaScript 是不可能的。 PHP 只在服务器上运行，而 JavaScript 只在客户端上运行（有一些例外）。

使用 wp_enqueue_style 函数的最后一个参数设置 media 函数创建的 <link> 标签上的 wp_enqueue_style 属性。 MDN 关于 media 属性的说明如下：

您还可以在媒体属性中提供媒体类型或查询；仅当媒体条件为真时才会加载此资源。

和

该属性指定链接资源适用的媒体。它的值必须是媒体类型/媒体查询。此属性主要在链接到外部样式表时很有用 - 它允许用户代理为其运行的设备选择最适合的样式表。

Source

这意味着您可以在 media 属性中进行媒体查询。如果该媒体查询匹配，则将加载样式表。

<?php
add_action( 'wp_enqueue_scripts','add_responsive_style' );
function add_responsive_style() {
  wp_enqueue_style( 
    'responsive',// Handle.
    get_template_directory_uri() . '/responsive.css',// Path to file.
    [],// Dependencies.
    false,// Version number.
    'screen and (max-width: 760px)' // <-- Media.
  );
}
?>

这将输出：

<link href="yourtheme/responsive.css" rel="stylesheet" media="screen and (max-width: 760px)">