在 wordpress 中制作动态背景图像

Question

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

我已经阅读了 Advanced Custom Field 网站，但在其背景图片上找不到任何内容。

示例代码会有所帮助。

谢谢

Answer 1

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

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

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

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

PS：-您必须用您的字段名称替换字段名称“背景”。

Answer 2

您可以使用 wp_head 挂钩在页面标题中输出动态样式。 这是一个例子（在你的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');

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