如何在 wordpress 自定义背景中将 CSS 属性添加到背景大小支持

Posted 2023-02-24

【中文标题】如何在 wordpress 自定义背景中将 CSS 属性添加到背景大小支持

【英文标题】：How to add CSS attributes to background-size support in wordpress Custom Background

【发布时间】：2015-06-22 07:01:29

【问题描述】：

我正在尝试在自定义背景中添加对 CSS3 属性 background-size、background-clip 和 background-origin 的支持。为此，我修改了 full-background-manager 插件（一个非常简单的插件，可以为每页设置自定义背景）来设置这些属性。

它们似乎在管理界面中被正确设置和存储，但是在生成设置它们的样式标签时，新值被忽略；唯一受支持的属性似乎是 http://codex.wordpress.org/Custom_Backgrounds

中提到的属性

自定义背景由 Wordpress 本身生成，而不是主题。我知道主题必须通过声明自身兼容并设置默认值来启用它

add_theme_support( 'custom-background', $defaults );
and Wordpress will generate the custom-background css code

<style type="text/css" id="custom-background-css">
body.custom-background  background-color: #bdd96e; 
</style>

而且插件本身似乎使用

add_filter( 'theme_mod_background_image', array( $this, 'fbm_background_image' ), 25 );

设置/覆盖默认 css 属性，例如“theme_mod_background_image”，但它只打印支持/覆盖变量的 css。换句话说，Wordpress 不知道 theme_mod_background_size，所以它不能覆盖它来打印它。

有没有办法将这些属性添加到 Wordpress 本身？我已经阅读了 admin/custom-background.php 的代码，但是我没有看到对支持的属性列表的任何引用。它们是否在一些隐藏的包含中？在数据库本身？如果我要设置它们，wordpress 会生成 CSS 吗？

我希望我已经正确解释了。我没有找到任何关于它的信息。大多数插件使用 jQuery 在 javascript 中设置这些值，而不是使用正确的 CSS 属性。如果没有，关于最新版 wordpress 内部工作原理的教程可能会作为调查线索有用。

提前致谢

【参考方案1】：

我正在阅读here，它似乎就像引用您的自定义函数和其中的 css 一样简单，用于管理头回调的参数......

<?php
 add_theme_support( 'custom-background', array('wp-head-callback' => custom_function));

    function custom_function() 
        echo '<style>';
        //your custom css
        echo '</style>';
    

【讨论】：

感谢您的回答。让我详细说明我的问题。我正在使用 wordprss 插件完全后台管理器来设置页面/帖子的背景图像。但是图像没有正确对齐，所以我需要添加一个 css sn-p 才能正常工作。 CSS应该添加到标签body.custom-background。正如你所说，我添加了add_theme_support（'custom-background'，array（'wp-head-callback'=>'my_custom_background_cb'））；而不是 add_theme_support('custom-background');在插件 fbm.php 中并定义了函数。但是现在图像没有显示在页面中。请帮助我

这是我定义的函数：function my_custom_background_cb() ob_start(); _custom_background_cb(); $buffer = ob_get_clean(); $my_style = 'body.custom-background 背景附件：固定； -webkit-background-size：封面； -moz-background-size：封面； -o-background-size：封面；背景尺寸：封面； '; echo str_replace('', $my_style.'', $buffer);

谢谢。还有一个疑问如何在 echo '';你能告诉php里面css的语法吗

@JohnSimon 我认为您在评论这个答案时参考了我之前的答案的代码时感到有些困惑。这个答案的问题在于它删除了选择自定义背景的原生 Wordpress 功能（您完全用您的代码替换它），而我的维护它（您只需添加您的 css 规则）。

【参考方案2】：

将回调参数wp-head-callback与自定义函数一起使用：

add_theme_support( 'custom-background', array( 'wp-head-callback'=> 'my_custom_background_cb' ) );

你可以替换整个默认的_custom_background_cb回调函数复制和修改它，但如果没有必要我不喜欢复制代码，所以我会这样做：

function my_custom_background_cb() 
    ob_start();
    _custom_background_cb();
    $buffer = ob_get_clean();

    $my_style = "
        background-size: 80px 60px;
        background-clip: border-box;
        background-origin: content-box;
    ";

    echo str_replace('</', $my_style.'</', $buffer);

我从_custom_background_cb 获得原始代码，然后我可以在回显之前添加我的样式代码。

显然你需要输入$my_style你的属性数据。

【参考方案3】：

为什么不使用 admin head 回调函数来添加其他 CSS？

【讨论】：

请告诉我如何以及在何处使用管理员头回调添加 css？是否像添加 add_theme_support('custom-background',$style);并使用 $style 数组添加 css 样式作为参数？？

我不太确定我从来没有这样做过。我只为主题头做了它，但我认为它很安静......我通常用我的 css 添加一个自定义函数，如''，然后将该函数添加到 wp_head add_action( 'wp_head', 'custom_function' );