如何在PHP中添加图像和文本？

Question

我正在尝试为新的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; ?>

没有显示结果。 我已附上最终设计的外观图像。 最终设计img

Answer 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;