在wordpress中使背景图像动态化

Question

我正在尝试在 wordpress 中使我的背景图片动态化。我的目标是让用户能够通过 wordpress 仪表板更改背景图像。我正在使用高级自定义字段插件。

我已通读高级自定义字段网站，但在其背景图片上找不到任何内容。

示例代码会有所帮助。

谢谢

Answer 1

您可以使用 wp_head 挂钩在页面的 header 中输出动态样式。这是一个示例（将其添加到您的 functions.php 中）：

function my_inline_styles() {
    $body_bg_image="/wp-content/uploads/myimg.jpg"; //here you would get your value from ACF
    ?>
<!-- start my dynamic styles-->
<style type="text/css">
    body {background-image: url('<?= $body_bg_image ?>')};
</style>
<!-- end my dynamic styles-->
    <?php
}
add_action('wp_head', 'my_inline_styles');

我建议将它们粘贴到 header 而不是页脚中，以确保尽早加载这些样式。

Answer 2

ACF 不为背景图片提供单独的字段，但您可以使用简单的图片字段并使用它来设置背景图片。

为此，从 ACF 菜单定义图像字段。并将此代码粘贴到您要放置背景图片的页面中

<div style="background-image: url(<?php echo get_field('background'); ?>);"><div>

如您所见，您可以使用 css 属性 background-image 在这里设置背景图片，它将获取存储在 'background' 字段并将其作为背景图像。

PS:- 您必须将字段名 'background' 替换为您的字段名称。

在wordpress中使背景图像动态化

making a background image dynamic in wordpress

css

php

wordpress

background-image