如何在WordPress中用get_template_directory_uri动态设置滑块背景图

问题原因 #

• 核心问题：你当前是把PHP代码<?php echo get_template_directory_uri(); ?>直接作为字符串写入了短代码的返回HTML内容里，短代码执行时不会解析嵌套在字符串中的PHP标签，输出到前端后浏览器会把这段PHP代码当做路径的一部分，自然找不到对应图片。
• 其他可能诱因：
  • 若你使用的是WordPress子主题，get_template_directory_uri()返回的是父主题路径，不会读取子主题下的资源文件
  • Linux服务器对文件名大小写敏感，图片文件名、目录名的大小写和代码中写的不一致也会导致加载失败
  • 图片文件确实没有上传到主题目录/assets/images/对应路径下

修复方案 #

短代码的回调函数本身就是PHP环境，你需要直接在PHP中拼接路径变量到HTML字符串中，参考正确写法如下：

// 注册滑块短代码
add_shortcode('custom_slider', 'custom_slider_shortcode');
function custom_slider_shortcode($atts) {
    // 先获取主题目录URI，后续直接拼接使用
    $theme_uri = get_template_directory_uri();
    // 拼接HTML内容，直接插入变量即可
    $html = <<<HTML
    <!-- HERO -->
    <div id="home" class="flexslider fullheight color-white">
        <ul class="slides">
            <!-- SLIDE 1 -->
            <li class="bg-black-alfa-40" style="background-image:url({$theme_uri}/assets/images/module-13.jpg)">
                <!-- HERO TEXT -->
                <div class="hero-caption">
                    <div class="hero-text">
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-12 text-center">
                                    <h1 class="montserrat text-uppercase text-super-xl m-b-50 m-t-70">Welcome to<br>Neomax</h1>
                                    <p>Donec pede justo fringilla vel aliquet nec vulputate eget<br>arcu. In enim justo rhoncus ut imperdiet.</p>
                                    <div class="btn-list m-t-45">
                                        <a href="#" class="btn btn-circle btn-white btn-lg">Purchase theme</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END HERO TEXT -->
            </li>
            <!-- END SLIDE 1 -->
            <!-- SLIDE 2  -->
            <li class="bg-black-alfa-70" style="background-image:url({$theme_uri}/assets/images/module-2.jpg)">
                <!-- HERO TEXT -->
                <div class="hero-caption">
                    <div class="hero-text">
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-12 text-center">
                                    <h1 class="montserrat text-super-xl m-b-70">A Creative<br>Design Studio</h1>
                                    <p>Donec pede justo fringilla vel aliquet nec vulputate eget<br>arcu. In enim justo rhoncus ut imperdiet.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END HERO TEXT -->
            </li>
            <!-- END SLIDE 2 -->
            <!-- SLIDE 3 -->
            <li class="bg-black-alfa-30" style="background-image:url({$theme_uri}/assets/images/module-3.jpg)">
                <!-- HERO TEXT -->
                <div class="hero-caption">
                    <div class="hero-text">
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-12 text-center">
                                    <h1 class="montserrat text-super-xl m-b-70">Discover<br>True Power</h1>
                                    <p>Donec pede justo fringilla vel aliquet nec vulputate eget<br>arcu. In enim justo rhoncus ut imperdiet.</p>
                                    <div class="btn-list m-t-45">
                                        <a href="#" class="btn btn-circle btn-outline btn-white btn-lg">Purchase theme</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END HERO TEXT -->
            </li>
            <!-- END SLIDE 3 -->
        </ul>
    </div>
    <!-- END HERO -->
HTML;
    // 短代码必须return返回内容，不能直接echo输出
    return $html;
}

补充注意事项 #

• 如果你使用子主题，把上面的$theme_uri = get_template_directory_uri();替换为$theme_uri = get_stylesheet_directory_uri();即可读取子主题下的资源。
• 修复后可以右键前端页面查看网页源代码，检查背景图的URL是否正确生成，直接访问该URL看是否能正常打开图片，排查文件是否存在、大小写是否匹配。

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