如何通过PHP条件语句结合WordPress ACF动态渲染HTML元素？

需求与问题 #

需求：针对每个WordPress职位文章，根据ACF插件的relocation布尔字段值控制标签显示：

• 字段为false时，不生成<p class="applied-grid-filter">标签
• 字段为true时，生成包含文本“Relocation”的对应标签

当前代码问题：

• 字段为false时，会生成空的<p class="applied-grid-filter">标签
• 字段为true时，标签内会显示数字1而非目标文本

错误原因 #

ACF的the_field()函数会直接输出字段值，而非返回值。用它做条件判断时，不管值是什么都会先输出，导致true时显示数字1；同时原代码的标签结构错误，不管条件是否满足都会生成p标签，因此false时出现空标签。

正确做法是使用get_field()函数，它返回字段值但不直接输出，再通过条件判断包裹整个p标签，确保只有条件满足时才生成标签。

修正后的核心代码片段 #

将原来的relocation判断代码：

<?php
if (the_field('relocation', $job->ID) === 1) { ?>
    <p class="applied-grid-filter">Relocation</p>
<?php } ?>

替换为：

<?php
// get_field返回字段值，不会直接输出
if (get_field('relocation', $job->ID)) { ?>
    <p class="applied-grid-filter">Relocation</p>
<?php } ?>

同时，travel字段的判断存在同样问题，建议一并修正：

<?php
if (!get_field('travel', $job->ID)) { ?>
    <p class="applied-grid-filter">No Travel</p>
<?php } ?>

完整修正后的代码 #

<section class="job-search-grid">
<?php if (count($jobs)) { ?>
    <div class="job-search-grid-container">
        <?php foreach ($jobs as $job) { ?>
            <div class="job-search-grid-item">
                <h2 class="job-search-grid-title"><?= esc_html($job->post_title) ?></h2>
                <div class="salary-location-container">
                    <h2 class="job-search-grid-salary"><?php the_field('minimum_salary', $job->ID) ?>K
                        - <?php the_field('maximum_salary', $job->ID) ?>K</h2>
                    <div class="job-search-location-icon-container">
                        <img
                                class="job-search-location-icon"
                                src="<?= get_template_directory_uri() ?>/assets/location-icon.png"
                        />
                        <p class="job-search-grid-location">Louisville, KY</p>
                    </div>
                </div>
                <p class="job-search-grid-description">
                    <?php the_field('short_description', $job->ID) ?>
                </p>
                <div class="applied-grid-filters">
                    <?php foreach (get_terms('industry', ['object_id' => $job->ID]) as $term) { ?>
                        <p class="applied-grid-filter"><?= esc_html($term->name) ?></p>
                    <?php } ?>
                    <?php foreach (get_terms('job_type', ['object_id' => $job->ID]) as $term) { ?>
                        <p class="applied-grid-filter"><?= esc_html($term->name) ?></p>
                    <?php } ?>

                    <?php
                    // 使用get_field获取值，条件满足时才生成标签
                    if (get_field('relocation', $job->ID)) { ?>
                        <p class="applied-grid-filter">Relocation</p>
                    <?php } ?>

                    <?php
                    // 修正travel字段的判断逻辑
                    if (!get_field('travel', $job->ID)) { ?>
                        <p class="applied-grid-filter">No Travel</p>
                    <?php } ?>

                </div>
                <a class="job-view-more" href="<?php the_permalink($job->ID) ?>">View More</a>
            </div>
        <?php } ?>
    </div>
<?php } else { ?>
    <p class="no-results">No results found! Try another search.</p>
<?php } ?></section>

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