在 Wordpress 中，获取样式表中的站点 URL答案

【问题标题】：In Wordpress, Getting The Site URL Inside a Stylesheet在 Wordpress 中，获取样式表中的站点 URL
【发布时间】：2013-09-09 00:42:53
【问题描述】：

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

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

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

但是当窗口变小时，我需要更改背景图像。

所有其他响应式 css 都在这个媒体查询中，在 style.css 中：

@media (max-width: 420px){
    div {

    }
}

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

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

或者，我可以使用 javascript，但我想尽量避免这种情况，因为这对我来说似乎很 hacky...

如何在 style.css 中引用网站 URL，以便即时更改背景图片

【问题讨论】：

您可以直接复制 PHP 输出的 URL 并将其粘贴到 CSS 文件中吗？
你不能为你的 URL 使用相对路径吗？以 / 作为根路径

标签： javascript wordpress background-image media-queries

【解决方案1】：

您可以使用wp_head 动作挂钩在<head> 标记中呼应您的风格。您应该设置规则!important，因为您需要覆盖默认规则。使用这个钩子可以让你有条件地设置你的规则是否会打印在你的标签中

在你的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 }
}

希望对你有帮助！

【讨论】：

【解决方案2】：

你试过去掉前面的斜线吗

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

【讨论】：

【解决方案3】：

您也可以在默认 style.css 中添加它。它会起作用的。

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

如果不加!important

【讨论】：