Php 光滑的滑块拇指未显示在wordpress主题中

我正在用pinegrow编辑器制作一个自定义WordPress主题，我正在使用slick slider制作幻灯片（不是WordPress插件！）。以下是带有自定义圆点拇指的“我的滑块”的一个项目的代码：

<div class="item" data-thumb="images/realmix/products/fresh-energy.png">
    <div class="row productz">
        <div class="col-md-7 col-lg-7 doesle col-sm-5 col-xs-12">
            <img src="images/realmix/products/energy-panel.png"> 
        </div>        
    </div>
</div>

这是我从导出wordpress主题的代码片段中得到的php代码：

<div class="item" data-thumb="images/realmix/products/fresh-energy.png">
    <div class="row productz">
        <div class="col-md-7 col-lg-7 doesle col-sm-5 col-xs-12">
            <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/realmix/products/energy-panel.png"> 
        </div>
    </div>
</div>

/images/realmix/products/energy panel.png“>

现在的问题是我的滑块点图像无法加载，因为pinegrow没有将data thumb src转换为php

尝试在数据拇指处添加php回显，如下所示：

data-thumb="<?php echo esc_url( get_template_directory_uri() ); ?>images/realmix/products/fresh-energy.png"

data thumb=“images/realmix/products/fresh energy.png”

当我上传到wordpress时不工作，仍然没有显示任何图像

---

我怎样才能自己解决这个问题呢？

我不确定我是否正确地遵循了你的建议。如果我偏离了轨道，我将进行更新

也许可以尝试使用

get\u bloginfo（'template\u url'）

函数代替

data-thumb="<?=get_bloginfo('template_url)?>/images/realmix/products/fresh-energy.png"

剧本是

// my slick slider options
const options = {
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  adaptiveHeight: true,
  autoplay: true
};

// my slick slider as const object
const mySlider = $('.slider').on('init', function(slick) {

  // set this slider as const for use in set time out
  const slider = this;
    
  // slight delay so init completes render
  setTimeout(function() {

    // dot buttons
    let dots = $('.slick-dots > LI > BUTTON', slider);

    // each dot button function
    $.each(dots, function(i,e) {

      // slide id
      let slide_id = $(this).attr('aria-controls');
      
      // custom dot image
      let dot_img = $('#'+slide_id).data('thumb');
      
      $(this).html('<img src="' + dot_img + '" alt="" />');

    });

  }, 100);


}).slick(options);

//我的滑动条选项
常量选项={
幻灯片放映：1，
幻灯片滚动：1，
点：是的，
箭头：错，
自适应高度：正确，
自动播放：对
};
//我的光滑滑块作为常量对象
常量mySlider=$（'.slider'）。在（'init'，函数（slick）上{
//将此滑块设置为常量，以便在设置超时时使用
常数滑块=此；
//稍微延迟，以便init完成渲染
setTimeout（函数（）{
//圆点按钮
让点=$（'.光滑点>LI>按钮'，滑块）；
//每个点按钮功能
$。每个（点、函数（即）{
//幻灯片id
幻灯片_id=$（this.attr（'aria-controls'）；
//自定义点图像
让dot_img=$（'#'+幻灯片id）.data（'thumb'）；
$（this.html（“”）；
});
}, 100);
}).slick（选项）；

而css将与从

---

谢谢你的快速回复！是的，我认为你的思路是正确的。我想将数据拇指图像显示为php代码。但是当我粘贴到你的代码

时，我明白了。这是有效的php，一定是错误的。你的文件扩展名是
.php
？你能发布完整文件的秘密要点吗？是的，我有一个php文件。我的要点是：我如果你不能用
速记，那就改用
吧，看看它用过的omg指南
非常感谢你！非常感谢兄弟：）
// my slick slider options
const options = {
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  adaptiveHeight: true,
  autoplay: true
};

// my slick slider as const object
const mySlider = $('.slider').on('init', function(slick) {

  // set this slider as const for use in set time out
  const slider = this;
    
  // slight delay so init completes render
  setTimeout(function() {

    // dot buttons
    let dots = $('.slick-dots > LI > BUTTON', slider);

    // each dot button function
    $.each(dots, function(i,e) {

      // slide id
      let slide_id = $(this).attr('aria-controls');
      
      // custom dot image
      let dot_img = $('#'+slide_id).data('thumb');
      
      $(this).html('<img src="' + dot_img + '" alt="" />');

    });

  }, 100);


}).slick(options);