在 HTML style="" CSS 中使用 PHP 简码

Question

我不确定这是否可行，但无论如何我都会问...

我正在尝试在高级自定义字段中使用 PHP 简码

<?php the_field('charitynumber'); ?>

让我们的客户在后端输入 1-100 之间的数字。这将影响 div showing/hiding 图像的高度，该图像基于慈善机构的总体目标数。我正在考虑将其设置为

<div style="<?php the_field('charitynumber'); ?>"><img src="/img_here.jpg"></div>

但想不出怎么做或其他方法。

Answer 1

您需要将短代码放入有效的样式属性中。这意味着输出样式名称并附加适当的单位。另外，如果 the_field() returns 一个字符串，你需要回显它。

<div style="height: <?php echo the_field('charitynumber'); ?>%;"><img src="/img_here.jpg"></div>

Answer 2

试一试 - 你可以

<div class="progress">
   <div class="fillBar" style="height:calc(100% - <?php the_field('charitynumber'); ?>);"></div>
   <img src="/img_here.jpg">
</div>

然后，您只需为栏设置样式。我下面的示例将进度条锁定在底部，当您登陆页面时，进度条将从上到下动画，直到它停在当前百分比处。

.progress{
   position: relative;
   width: 50px;
   height: 200px;
}
.progress img{
   width: 50px;
   height: 200px;
   position: absolute;
   z-index: 1;
}
.progress .fillBar{
  width: 50px;
  bottom: 0;
  height: 200px;
  transition: height 0.3s ease-out;
}

在 HTML style="" CSS 中使用 PHP 简码

Using PHP shortcode in HTML style="" CSS

html

css

php

wordpress

advanced-custom-fields