WordPress自定义ACF模块'testimonial_1'字段预览页不显示问题

我在VS Code环境中开发，通过npm run watch命令运行项目。已在functions.php中引用相关文件，WordPress后台可正常选择Testimonials模块，但其中的testimonial_1字段无法在预览页显示，需解决该问题。

相关代码 #

functions.php中的ACF字段定义 #

<?php
function module_testimonials_acf() {
    return array(
        'key' => 'testimonials_module',
        'name' => 'testimonials_module',
        'label' => 'Testimonials',
        'display' => 'block',
        'sub_fields' => array(
            array(
                'key' => 'testimonials_repeater_1',
                'name' => 'testimonials_repeater_1',
                'label' => 'First Testimonial',
                'type' => 'repeater',
                'min' => 1,
                'max' => 1,
                'layout' => 'block',
                'return_format' => 'array',
                'required' => 0,
                'sub_fields' => array(
                         array(
                            'key' => 'testimonials_paragraph_1',
                            'name' => 'testimonial_1',
                            'label' => 'Testimonial 1',
                            'type' => 'textarea',
                            'instructions' => 'The testimonial goes here.',
                            'required' => 1,
                            'wrapper' => array(
                            'width' => '40'
                                )
                            ),
                         array(
                            'key' => 'testimonials_product_description_1',
                            'name' => 'testimonials_product_description_1',
                            'label' => 'Product Description 1',
                            'type' => 'textarea',
                            'instructions' => 'The product description goes here. (Product info, color, location)',
                            'required' => 1,
                            'wrapper' => array(
                            'width' => '40'
                                )
                            ),
                        array(
                            'key' => 'testimonial_image_1',
                            'name' => 'testimonial_image_1',
                            'label' => 'Testimonial Image 1',
                            'type' => 'image',
                            'instructions' => 'Testimonial Background Image',
                            'required' => 1,
                            'return_format' => 'url',
                            'preview_size' => 'medium',
                            'min_width' => '100',
                            'wrapper' => array(
                            'width' => '20'
                            )
                            )
                    ) 
                ),
            array(
                'key' => 'testimonials_2',
                'name' => 'testimonials_2',
                'label' => 'Testimonials 2',
                'type' => 'repeater',
                'min' => 1,
                'max' => 1,
                'layout' => 'block',
                'return_format' => 'array',
                'required' => 0,
                'sub_fields' => array( 
                        array(
                            'key' => 'testimonials_paragraph_2',
                            'name' => 'testimonials_paragraph_2',
                            'label' => 'Testimonial 2',
                            'type' => 'textarea',
                            'instructions' => 'The testimonial goes here.',
                            'required' => 1,
                            'wrapper' => array(
                            'width' => '40'
                                            )
                            ),
                        array(
                            'key' => 'testimonials_product_description_2',
                            'name' => 'testimonials_product_description_2',
                            'label' => 'Product Description 2',
                            'type' => 'textarea',
                            'instructions' => 'The product description goes here. (Product info, color, location)',
                            'required' => 1,
                            'wrapper' => array(
                                'width' => '40'
                            )
                            ),
                        array(
                                'key' => 'testimonial_image_2',
                                'name' => 'testimonial_image_2',
                                'label' => 'Testimonial Image 2',
                                'type' => 'image',
                                'instructions' => 'Testimonial Background Image',
                                'required' => 1,
                                'return_format' => 'array',
                                'preview_size' => 'medium',
                                'min_width' => '1800',
                                'wrapper' => array(
                                'width' => '20'
                                )
                            )
                        )
                                ),
                array(
                    'key' => 'testimonials_3',
                    'name' => 'testimonials_3',
                    'label' => 'Testimonials 3',
                    'type' => 'repeater',
                    'min' => 1,
                    'max' => 1,
                    'layout' => 'block',
                    'return_format' => 'array',
                    'required' => 0,
                    'sub_fields' => array(
                         array(
                              'key' => 'testimonials_paragraph_3',
                             'name' => 'testimonials_paragraph_3',
                             'label' => 'Testimonial 3',
                              'type' => 'textarea',
                               'instructions' => 'The testimonial goes here.',
                               'required' => 1,
                              'wrapper' => array(
                                   'width' => '40'
                                            )
                            ),
                        array(
                            'key' => 'testimonials_product_description_3',
                            'name' => 'testimonials_product_description_3',
                            'label' => 'Product Description 3',
                            'type' => 'textarea',
                            'instructions' => 'The product description goes here. (Product info, color, location)',
                            'required' => 1,
                            'wrapper' => array(
                                'width' => '40'
                            )
                            ),
                        array(
                                'key' => 'testimonial_image_3',
                                'name' => 'testimonial_image_3',
                                'label' => 'Testimonial Image 3',
                                'type' => 'image',
                                'instructions' => 'Testimonial Background Image',
                                'required' => 1,
                                'return_format' => 'array',
                                'preview_size' => 'medium',
                                'min_width' => '1800',
                                'wrapper' => array(
                                'width' => '20'
                                )
                            )
                        )
                )
        )
    );
}
?>

前端模板文件代码 #

<div class="highlight-testimonials">
    <div class="parallax" id="behind-content"></div>
    <div class="testimonials">
        <div class="wrap">
            <div class="testing">
                <div class="test-intro">
                    <h3>Testimonials</h3>
                    <p>See what our customers have to say about their Metal roofs.</p>
                    <a class="primary-cta" href="#">Start your own project<div class="material-icons">east</div></a>
                </div>

<?php
    $testimonial_1 = mod_get_field('testimonial_1');

?>
                <div class="three-examples">
                    <div class="col individual-card">
                        <div class="display-img">
                            <img src="#" alt="  metals testimonial photo"/>
                        </div> <!-- .display-img -->

                        <div class="text-area">
                            <img class="quo" src="/images/quotes.svg"/>

                            <p class="p1"><?php echo $testimonial_1 ?></p>
                            <p>Product information goes here, product, color and location</p>
                        </div> <!-- .text-area -->
                    </div> <!-- .col -->
                </div> <!-- .three-examples .row -->
            </div> <!-- .testing -->
        </div> <!-- .wrap-->
    </div> <!-- .testimonials -->
</div> <!-- .highlight-testimonials -->

<tr>
    <td>

    </td>
</tr>

解决方案 #

问题核心是testimonial_1字段嵌套在testimonials_repeater_1这个ACF repeater字段中，不能直接通过mod_get_field('testimonial_1')获取值，需要先获取repeater的数组数据，再提取子字段内容。

修改模板中的PHP代码部分：

<?php
// 获取repeater字段数据，因min和max均为1，直接取数组第一个元素
$testimonial_repeater = mod_get_field('testimonials_repeater_1');
$testimonial_1 = !empty($testimonial_repeater[0]['testimonial_1']) ? $testimonial_repeater[0]['testimonial_1'] : '';
?>

页面输出部分保持不变：

<p class="p1"><?php echo $testimonial_1 ?></p>

说明 #

ACF repeater字段返回的是数组结构，每个元素对应一行repeater数据，子字段都包含在对应行的数组里。由于你设置了repeater的min和max都是1，数组只会有一个元素，直接取索引0即可正确获取testimonial_1的内容。

内容的提问来源于stack exchange，提问作者andrewhate