WordPress 模板中显示 ACF 字段的问题

Question

好的，我遇到了有史以来最奇怪的问题。我有一个我正在开发的 WordPress 网站的自定义主页模板。

您可以在后端 here 上看到我的 ACF 字段设置的截图。

我遇到的问题是当我尝试显示该字段时

<img src="<?php the_field('slide_1_thumb'); ?>" alt="" />

图像根本不显示。我将返回值设置为“图像 URL”，奇怪的是它显示的图像

<?php the_field('slide_1'); ?>

完全没有问题。

我不确定我在这里做错了什么，但根本没有拼写错误，出于某种原因，那些 slide_1_thumb 图像不会显示。我想这是奥卡姆剃刀式的情况之一，我错过了一些如此简单的事情，但我已经过了一百万次了，没有运气。

您将在下面找到我的 home-page.php 模板的 PHP 代码副本。

<?php
/**
 * Template Name: Home Page
 *
 * A custom template for the home page.
 *
 * The "Template Name:" bit above allows this to be selectable
 * from a dropdown menu on the edit page screen.
 */

 get_header(); ?>

 <div id="slideshow-container">
<div id="slideshow" class="slideshow pcfcu-theme">
    <div class="slideshow-img" style="background-image: url(<?php      the_field('slide_1'); ?>);">
        <div class="slideshow-img-inner">
            <div class="slideshow-img-text">
                <h1><?php the_field('slide_1_title'); ?></h1>
                <p><?php the_field('slide_1_description'); ?></p>
            </div>
        </div>
    </div>
    <div class="slideshow-img" style="background-image: url(<?php the_field('slide_2'); ?>);">
        <div class="slideshow-img-inner">
            <div class="slideshow-img-text">
                <h1><?php the_field('slide_2_title'); ?></h1>
                <p><?php the_field('slide_2_description'); ?></p>
            </div>
        </div>
    </div>
    <div class="slideshow-img" style="background-image: url(<?php the_field('slide_3'); ?>);">
        <div class="slideshow-img-inner">
            <div class="slideshow-img-text">
                <h1><?php the_field('slide_3_title'); ?></h1>
                <p><?php the_field('slide_3_description'); ?></p>
            </div>
        </div>
    </div>
</div>
 </div>

 <div id="content-container">
<div id="content-container-inner">
    <div id="recent-blog-entries-container">
        <div id="recent-blog-entries">
            <header><h1>Recent Blog Entries</h1></header>
            <?php $postslist = get_posts('numberposts=2&order=DESC&orderby=date'); 
                foreach ($postslist as $post) : setup_postdata($post);
            ?> 
                <h2 class="rbe-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="rbe-posted-on">Posted on: <?php the_time(get_option('date_format')) ?></p>
                <div class="rbe-excerpt"><?php the_excerpt(); ?></div>
            <?php endforeach; ?>
        </div>
    </div>

    <div id="features">
        <header><h1>Features</h1></header>
        <a class="goTo1"><div class="feature-thumb"><img src="<?php the_field('slide_1_thumb'); ?>" alt="" /></div></a>
        <a class="goTo2"><div class="feature-thumb"><img src="<?php the_field('slide_2_thumb'); ?>" alt="" /></div></a>
        <a class="goTo3"><div class="feature-thumb"><img src="<?php the_field('slide_3_thumb'); ?>" alt="" /></div></a>
    </div>
</div>
 </div>

<?php get_footer(); ?>

另一件奇怪的事情是，如果你拍摄一张正在工作的 ACF 图像，例如

<?php the_field('slide_1'); ?>

它可以完美运行并输出图像，但是当您将其移至代码的“功能”部分以查看它是否可以代替这些小功能缩略图之一时，它在该部分中不起作用的代码。就好像页面底部的“功能”部分有某种错误，但我的代码中根本看不到任何错误。

换句话说，所有代码都可以完美运行，直到最后一部分带有“特征”缩略图。你可以在here 网站上看到这个直播。

Answer 1

当使用 get_posts() 创建一个新循环时，您应该使用 wp_reset_postdata() 函数结束它，以将循环的数据重置为 get_posts() 之前的数据。所以试试这个：

<div id="recent-blog-entries">
    <header><h1>Recent Blog Entries</h1></header>
    <?php $postslist = get_posts('numberposts=2&order=DESC&orderby=date'); 
    foreach ($postslist as $post) : setup_postdata($post); ?> 
        <h2 class="rbe-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <p class="rbe-posted-on">Posted on: <?php the_time(get_option('date_format')) ?></p>
        <div class="rbe-excerpt"><?php the_excerpt(); ?></div>
    <?php endforeach; ?>
    <?php wp_reset_postdata(); ?>
</div>

在你的循环之后添加 wp_reset_postdata() 应该会为你解决这个问题。

Answer 2

好的，我不知道发生了什么，但我所要做的就是删除后端的 ACF 字段，然后使用与以前完全相同的名称重新创建它们。果然修好了。

所以，虽然我对为什么会发生这种情况没有确切的答案，但我只能说这一定是某种奇怪的故障。