光滑的滑块拇指未显示在 wordpress 主题中 [英] Slick slider thumbs not showing in wordpress theme

问题描述

我正在使用 pinegrow 编辑器制作自定义 WordPress 主题，并且我正在为我的幻灯片使用光滑的滑块(不是 WordPress 插件！).这是我的带有自定义圆点拇指滑块的一项的代码:

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

images/realmix/products/fresh-energy.png"

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

解决方案

不确定我是否正确地遵循了您的要求.如果我偏离轨道，我会更新.

也许尝试使用 get_bloginfo('template_url') 函数代替?

data-thumb="/images/realmix/products/fresh-energy.png";

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

---

关于您对 问题/64405779 链接到这个问题，该脚本与您的 php 一起工作，将如下...

<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 dole col-sm-5 col-xs-12"><img src="<?=get_bloginfo('template_url')?>/images/realmix/products/energy-panel.png";alt="/>

<!-- 下一张幻灯片-->

脚本将是...

//我光滑的滑块选项常量选项 = {幻灯片显示:1，幻灯片滚动:1，点:对，箭头:假，自适应高度:真，自动播放:真实};//我光滑的滑块作为常量对象const mySlider = $('.slider').on('init', function(slick) {//将此滑块设置为 const 以用于设置超时const 滑块 = 这个；//稍微延迟，因此 init 完成渲染设置超时(函数(){//点按钮let dots = $('.slick-dots > LI > BUTTON', 滑块);//每个圆点按钮函数$.each(dots, function(i,e) {//幻灯片 ID让 slide_id = $(this).attr('aria-controls');//自定义点图像让 dot_img = $('#'+slide_id).data('thumb');$(this).html('<img src="' + dot_img + '" alt=""/>');});}, 100);}).slick(选项);

和 问题/64405779

I'm making a custom WordPress theme with pinegrow editor and I'm using slick slider for my slides (not the WordPress plugin!). Here is the code of one item of my slider with custom dot thumb:

<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>

and this is the php code i get from that code snippet from exporting the wordpress theme:

<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>

now the problem is my slider dot images won't get loaded because pinegrow does not convert the data-thumb src into php.

Trying to add the php echo at the data-thumb like this:

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

does not work when i upload to wordpress, still shows no images How can i fix that by myself?

解决方案

Not sure i'm following your correctly. I'll update if I am off track.

Maybe try using get_bloginfo('template_url') function instead?

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

This will go to the immediate child images folder in your current theme folder.

---

In relation to your comment on questions/64405779 linking to this question, for that script to work with your php, would be as follows...

<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>

And the script would be...

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

and the css would be the same from questions/64405779

这篇关于光滑的滑块拇指未显示在 wordpress 主题中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！