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

Question

我正在使用 pinegrow 编辑器制作自定义 WordPress 主题，并且我正在为我的幻灯片使用光滑的滑块（不是 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主题的sn-p代码中得到的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>

现在的问题是我的滑块点图像不会被加载，因为 pinegrow 不会将 data-thumb src 转换为 php。

尝试像这样在 data-thumb 中添加 php echo：

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

当我上传到 wordpress 时不起作用，仍然不显示图像 我怎样才能自己解决这个问题？

Answer 1

不确定我是否正确地关注了你。如果我偏离轨道，我会更新。

也许尝试改用get_bloginfo('template_url') 函数？

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

这将转到您当前主题文件夹中的直接子 images 文件夹。

---

关于您对链接到此问题的questions/64405779 的评论，要使该脚本与您的 php 一起使用，如下所示...

<div class="slider">
    <div class="item" data-thumb="<?=get_bloginfo('template_url')?>/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="<?=get_bloginfo('template_url')?>/images/realmix/products/energy-panel.png" alt="" /> 
            </div>
        </div>
    </div>
    <!-- next slides here -->
</div>

脚本是……

// 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);

questions/64405779 中的 css 将是相同的