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

Question

我正试图在移动设备上加载一个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

Answer 1

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

使用wp_enqueue_style函数的最后一个参数来设置wp_enqueue_style函数创建的<link>标记上的media属性。MDN对media属性表示如下：

您还可以在媒体属性内提供媒体类型或查询；只有当媒体条件为true时，才会加载此资源。

和

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

源

这意味着您可以在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)">