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

Question

我正在用pinegrowt编辑器制作一个自定义的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主题的代码片段中得到的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>

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

尝试在数据拇指处添加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文件夹。

---

关于你对问题的评论/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);

css与问题/64405779 相同