在WordPress中，获取样式表中的网站URL

In Wordpress, Getting The Site URL Inside a Stylesheet

本文关键字：网站 URL 获取 WordPress 样式      更新时间：2023-09-26

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

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

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

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

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

@media (max-width: 420px){
    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>

或者，我可以使用javascript，但我想尝试避免这种情况，因为这对我来说似乎很笨拙......

如何在我的样式中引用网站 URL.css以便我可以即时更改背景图像

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

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

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

在您的函数中.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 }
}

希望对您有所帮助！

您也可以将其添加到默认样式.css中。它会起作用。

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

如果它不添加!important

相关文章：