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

Posted 2023-03-25

【中文标题】如何将图像和文本添加到 PHP 中？

【英文标题】：How to add image and text into 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']; ?>"  />
             <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

【问题讨论】：

您的字段在后端的命名方式是否相同？

是的。我不确定这是否是像最终设计一样创建组/块的正确功能！

【参考方案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;