Javascript 在Wordpress中，在样式表中获取站点URL

我正在为一个网站做一个响应主题。当窗口大小小于420px时，我需要能够更改div的背景图像

我需要能够引用站点url，以便首先设置背景图像，因此最初我使用了PHP标记和内联样式，如下所示：

<div style="background-image: url('<?php echo bloginfo('template_url') . '/images/home.jpg'; ?>');"></div>

这是我的计划。我可以使用.php页面上的样式标记来使用相同的php代码段来获取url，从而获得图像。但是，这个样式标签似乎没有任何影响

<style>
  @media (max-width: 420px){
    .home-background {
      background-image: url('<?php echo bloginfo('template_url') . '/images/home_page/bg-mobile.jpg'; ?>');
    }
  }
</style>

@介质（最大宽度：420px）{
.家庭背景{
背景图像：url（“”）；
}
}

或者，我可以使用javascript，但我想尽量避免，因为它对我来说似乎有点黑

---

我如何在my style.css中引用站点URL以便动态更改背景图像

您是否尝试删除前面的斜杠

<style>
  @media (max-width: 420px){
    .home-background {
      background-image: url('images/home_page/bg-mobile.jpg');
    }
  }
</style>

@介质（最大宽度：420px）{
.家庭背景{
背景图片：url（'images/home_page/bg mobile.jpg'）；
}
}

您可以使用动作挂钩在

标记中呼应您的风格。您应该设置规则

！重要信息

，因为您需要覆盖默认值。 使用这个钩子可以有条件地设置是否在标记中打印规则

在functions.php中

add_action( 'wp_head', 'so18685496_print_my_style' );
function so18685496_print_my_style(){
    //we are on homepage? this is an example you can strip the if statement
    if( is_home() ){ ?>
    <style>
        @media (max-width: 420px){
          .home-background {
            background-image: url("<?php echo get_stylesheet_directory_uri(); ?>/images/home_page/bg-mobile.jpg")!important;
          }
        }
    </style>

    <?php }
}

add_action（'wp_head'，'so18685496_print_my_style'）；
函数so18685496_print_my_style（）{
//我们在首页？这是一个例子，你可以去掉if语句
如果（is_home（））{？>
@介质（最大宽度：420px）{
.家庭背景{
背景图片：url（“/images/home_page/bg mobile.jpg”）！重要；
}
}
您也可以将其添加到default style.css中。它会起作用

@media (max-width: 420px){
.home-background {
      background-image: url('images/home_page/bg-mobile.jpg');
    }
}

如果它没有添加
！important
，您可以复制PHP输出的URL并将其粘贴到CSS文件中？您不能使用URL的相对路径吗？使用/作为根路径
@media (max-width: 420px){
.home-background {
      background-image: url('images/home_page/bg-mobile.jpg');
    }
}