【问题标题】:How to set background image for one specific page on Theme based Wordpress page?如何在基于主题的 Wordpress 页面上为特定页面设置背景图片?
【发布时间】:2018-03-27 01:40:57
【问题描述】:

我正在为我的 wordpress 网站使用 BeTheme。现在我想通过设置背景图像(仅适用于该页面)来更改可能页面的主体背景之一。

我尝试通过添加它来更改我的 style.css,因为我了解到这可以为我完成这项工作。

body.page-id-269 { 
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg")!important; 
background-position: center center!important;  
background-repeat: repeat!important; 
}

如何设置特定页面主体的背景图像?(我使用的是 BeTheme 主题)

更新

正如下面的答案提到的,我尝试了这些更改,在我的 functions.php 中添加了

add_filter('body_class', 'change_body_classes');

function change_body_classes($classes) {
    if( is_page( 'page-id-269' ) ) {
        $classes[] = 'my-background-class';
        return $classes;
    }
}

在我的风格中,我添加了这个 .css,

 .my-background-class{ 
    background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg")!important; 
    background-position: center center!important;  
    background-repeat: repeat!important; 
    }

【问题讨论】:

  • 您可以在所述页面中创建一个 JS 变量,然后编写一个 if 语句来查找该变量并在返回 true 时更改 background-image 属性
  • 更改 style.css 时发生了什么?身体有适当的等级吗?你确定你的浏览器缓存没有给你旧的 CSS 吗?
  • @janh:什么也没发生。是的,我删除了缓存,我添加的 css 部分在我的 style.css 中。
  • body-tag 怎么样,添加了哪些类?

标签: css wordpress wordpress-theming background-image


【解决方案1】:

使用 body_class 过滤器通过您的 CSS 将类添加到该特定页面。

add_filter('body_class', 'change_body_classes');

function change_body_classes($classes) {
    if( is_page( 'my-page' ) ) {
        $classes[] = 'my-background-class';
        return $classes;
    }
}

【讨论】:

  • 再一次,我怎样才能添加你的 css 部分?
  • 使用您编写的 CSS 在您的 style.css 中创建一个类。
  • 我在您的代码中放置了我的页面 ID 而不是“我的页面”。并创建了 css 部分,仍然无法正常工作,它改变了我所有的 apge 样式。谢谢。
  • 首先我将您的代码添加到我的functions.php。而不是“我的页面”,我把我的页面ID放在那里,“page-id-220”。然后在我的 css 中,我创建了一个名为 my-background-class 的类并添加了我的 bg 属性。就是这样..
  • 您需要在问题中发布所有代码,以便我可以看到您为自己做了什么。除非 'page-id-220' 是页面的 slug,否则这是错误的做法,因为页面 id 是数字而不是字符串。
猜你喜欢
  • 2017-12-05
  • 1970-01-01
  • 2021-04-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-04-10
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多