从计算机上传图像文件并在Wordpress中设置为div背景图像

Question

我一直在寻找一种方法，该方法实质上允许用户在WordPress后端中上传图像，并允许这些图像在前端用作div的背景图像，因此允许支持以下CSS

background: url('');
background-repeat: no-repeat;
background-size: cover;

我找到了一个喜欢的答案的问题，但是我对PHP不太满意，并且不知道如何使用“工具集类型”实现它，因此它将背景url添加到样式表中并覆盖了它当客户想要添加一个 新图片。 How to upload image file from computer and set as div background image using jQuery?

我还可以将图像放在页面本身上，并允许用户以这种方式进行操作，但是我需要使用背景属性，以便图像覆盖div。如果有人知道没有背景样式就可以做到的任何样式，那就太好了。

Answer 1

我建议您看看Advanced Custom Fields。您可以添加功能，以将图像上传到帖子，页面，自定义帖子类型，术语等。

上传图片后，您可以检索网址。如果将其上传到帖子，则可以像这样获得它。

<?php
  $image_url = get_field('image', $post_id);
?>

并将背景图片网址设置为div。

<div class="bg__full" style="background-image: url('<?php echo $image_url ?>')></div>

然后可以使用内联的其他属性或诸如CSS之类的样式设置div的样式。

.bg__full {
  background-repeat: no-repeat;
  background-size: cover;
}

Answer 2

// WordPress

要求-

• Advanced Custom Fields

• Insert PHP Code Snippets

在安装完两个插件之后，导航至WordPress后端中的“自定义字段”并创建您的自定义图片字段（请务必保存您的字段）。 Custom Image Field Picture

然后导航至XYZ PHP代码，并使用以下代码创建代码段-

<?php
$image_url = get_field('Your_Custom_Field');
?>
<div class="Your_Image_Class" style="background-image: url('<?php echo $image_url ?>')"></div>

确保将'Your_Custom_Field'和class="Your_Image_Class"一起更改。

从这里，您可以保存并导航回到“ XYZ PHP代码”的主页，并获取其提供的简码。 Image Of Shortcodes

将简码放置在要显示图像的页面中，然后滚动到该页面的底部并添加图像。如果一切顺利，您的图片应开始显示为该div的背景。

感谢Gregor Ojstersek的帮助