php - 如何在WordPress中动态背景图像？

Question

我正在尝试开发一个 WordPress 主题。为此，我正在为滑块开发一个简码。HTML 模板使用滑块的背景图像。我正在使用 get_template_directory_uri() 函数来动态图像。但是使用 get_template_directory_uri() 函数图像不会显示。请帮我解决这个问题。我的代码：-

        <!-- HERO -->
    <div id="home" class="flexslider fullheight color-white">
        <ul class="slides">

            <!-- SLIDE 1 -->
            <li class="bg-black-alfa-40" style="background-image:url(<?php echo get_template_directory_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(<?php echo get_template_directory_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(<?php echo get_template_directory_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 -->

}