如何将图像和文本添加到 PHP 中？答案

【问题标题】：How to add image and text into PHP?如何将图像和文本添加到 PHP 中？
【发布时间】：2019-12-14 08:18:16
【问题描述】：

我正在尝试为我的新 WordPress 网站创建一个大图像 CTA。我创建了一个新的字段组并在 ACF 上创建了“组”类型。我已将函数放入 phpstorm，但没有显示我的图像、文本或链接。我假设我在函数中犯了一个错误，它是从 ACF 网站复制的

尝试使用 have_rows() 函数添加循环函数以及将 ACF 类型更改为中继器。没有任何工作，我不知道如何解决这个问题。请帮忙

 <?php if( have_rows('large_cta') ):

     while( have_rows('large_cta') ): the_row();

         // vars
         $image = get_sub_field('large_image');
         $link = get_sub_field('large_link');

         ?>
         <div id="hero">
             <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
             <div class="content">
                 <?php the_sub_field('large_title'); ?>
                 <a href="<?php echo $link['url']; ?>"><?php echo $link['title']; ?></a>
             </div>
         </div>
         <style type="text/css">
             #hero {
                 background: <?php the_sub_field('color'); ?>;
             }
         </style>
     <?php endwhile; ?>

 <?php endif; ?>

不显示任何结果。我附上了一张最终设计应该是什么样子的图片。 final design img

【问题讨论】：

您的字段在后端的命名方式是否相同？
是的。我不确定这是否是像最终设计一样创建组/块的正确功能！

标签： javascript php css wordpress advanced-custom-fields

【解决方案1】：

我已经尝试了您的代码，并对 ACF 字段和代码进行了一些更改。

您可以在模板中尝试以下代码

if (have_rows('large_cta')):
    while (have_rows('large_cta')): the_row();

        // vars
        $image = get_sub_field('large_image');
        $link = get_sub_field('large_link');
        $color = get_sub_field('color');
        ?>
        <div id="hero" style="<?php if ($image) { ?> background:url('<?php echo $image; ?>') center center no-repeat;<?php } else { ?>background: <?php echo $color; ?>;<?php } ?>">
            <div class="content">
                <h2><?php the_sub_field('large_heading'); ?></h2>
                <p><?php the_sub_field('large_title'); ?></p>
                <a href="<?php echo $link['url']; ?>"><?php echo $link['title']; ?></a>
            </div>
        </div>
        <style type="text/css">
            #hero {
                width: 100%;
                height:500px;
                display: block;
                position: relative;
            }
            .content {
                text-align: center;
                position: absolute;
                top: 50%;
                color: #fff;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .content h2 {
                text-transform: uppercase;
            }
            .content p {
                padding-bottom: 20px;
            }
            .content a {
                background: #00BCD4;
                padding: 10px 30px;
                border-radius: 3px;
                text-decoration: none;
                text-transform: capitalize;
                color: #fff;
                font-weight: bold;
            }
        </style>
        <?php
    endwhile; 
 endif;

【讨论】：