光滑的滑块拇指没有显示在 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 主题的代码片段中获得的 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 不会将数据缩略图 src 转换为 php。

尝试像这样在数据缩略图上添加 php 回显：

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 文件夹。

关于您对链接到此问题的评论，要使该脚本与您的 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 与

相同

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

Slick slider thumbs not showing in wordpress theme

html

php

wordpress

slick.js