【问题标题】：Solution to set background-image using [shortcode]?使用 [短代码] 设置背景图像的解决方案？
【发布时间】：2017-10-28 00:43:43
【问题描述】：

我想将随机背景图像设置为<div>Container</div>
- 为了简单起见，我使用 [shortcode] 安装了一个插件来显示随机图像。这很好用。
- 如何获得简码[wp-image-refresh] 与background-image:url(...) 一起使用
- 我尝试了内联样式，但没有结果。

这就是我所拥有的：

HTML

<div class="header_random-image">
   <div id="hero"></div>
</div>

CSS

#hero {
  background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
  background-size: cover;
  background-position: 50% 30%;
  height:70vh;
  width: 100%;
  margin-top: -65px;
}

又一次没有结果的尝试：内联样式

<div class="header_random-image">
        <div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>

有人可以帮忙吗？或者有没有人有一个简单的解决方案来放置 div-random-background-images？

柏林最佳

【问题讨论】：

当你说没有结果时，你的意思是它不输出任何东西吗？您调用简码的方式可能有错误。你试过url("<?php echo do_shortcode('[wp-image-refresh]'); ?>");
它应该适用于内联样式。您确定短代码输出您期望的内容吗？你确定结果是有效的 CSS 吗？（正确的路径等......）。此外，请确保将其放置在模板或由 WordPress 解析的帖子/页面内容中。默认情况下，任何地方都不允许使用简码。例如，如果您尝试在文本小部件中添加短代码，则需要先启用它们：add_filter( 'widget_text', 'do_shortcode' );
是<style>标签中<head>标签中header.php中的CSS部分，如果不是，这只是一个问题，这可能是你的答案
否则在post 中添加[wp-image-refresh] 作为纯简码，并告诉使用它在前端输出的内容:)
您面临的问题是因为 sortcode 实际上在 img 标签中打印图像，例如因为您将图像设置为背景，所以这不起作用，因为在这里您只需要图像源而不是整个图像块。

标签： php css wordpress background-image shortcode

【解决方案1】：

在大多数情况下，您的 CSS 代码将在静态文件中提供，因此 php 代码不会执行。

由于内联示例也不起作用，我猜短代码不会返回图像 url，而是返回完整的图像标签。插件说明证实了这个假设。 WP-IMAGE-REFRESH

你可以试试这个：

PHP

<div class="header_random-image">
   <?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>

CSS

.header_random-image {
  overflow: hidden;
}
.hero_class {
  height: 100%;
  width: auto;
  margin-top: 0;
}

这应该显示图像。如果需要，您仍然必须将其居中（使用 flex-box）并根据上传图像的边比检查不同屏幕尺寸引起的问题，并使用一些 Javascript 解决它们。

另类

使用 ACF Pro 并将gallery field 添加到您的帖子/页面或option page，如果您希望在所有视图中使用相同的图像。

PHP

<?php 
    $images = get_field('name-of-your-gallery-field');
    shuffle($images);
    $imageUrl = images[0]['url'];
<div class="header_random-image">
    <div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>

【讨论】：

非常感谢 marcelgro 我按照您的建议解决了我的问题。我进行了一些更改以使我可以正常工作，例如所需的背景图像。 Random-Plugin 工作正常，诀窍是嵌入式 .hero_class PHP <div class="header_random-image"> <?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?> </div> CSS .header_random-image { height:65vh; } .hero_class { height: 100%; width: 100%; object-fit: cover; object-position: 50% 30%; }