WordPress中如何为Slick Slider添加有效的data-slick属性？

方法1：直接通过JavaScript初始化Slick（推荐） #

绕开data属性的转义问题，直接在主题的自定义JS文件中传入配置参数：

// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 替换为你的滑块元素选择器（比如.slider-wrap）
  const targetSlider = document.querySelector('.slider-wrap');
  
  if (targetSlider) {
    // WordPress中jQuery默认处于noConflict模式，用jQuery代替$
    jQuery(targetSlider).slick({
      slidesToShow: 4,
      slidesToScroll: 4,
      // 添加其他需要的配置项
      autoplay: true,
      dots: true
    });
  }
});

将这段代码添加到主题的functions.php中注册的自定义JS文件，或者通过主题自定义面板的“自定义代码”功能添加（如果主题支持）。

方法2：使用自定义HTML区块编写滑块代码 #

放弃用Gutenberg原生区块+属性插件的方式，直接插入「自定义HTML」区块，手动编写包含正确data-slick属性的滑块结构：

<div class="custom-slider" data-slick='{"slidesToShow":4,"slidesToScroll":4}'>
  <div>滑块内容1</div>
  <div>滑块内容2</div>
  <div>滑块内容3</div>
  <div>滑块内容4</div>
</div>

WordPress不会转义自定义HTML区块内的引号格式，前端能正确输出符合要求的data-slick属性。

方法3：通过PHP过滤器修正转义后的属性 #

如果必须使用原有的Gutenberg区块+属性插件，可在主题的functions.php中添加过滤器，将转义过度的引号还原：

add_filter('render_block', function($blockContent, $block) {
  // 替换为你使用的区块名称（比如core/group）
  if ($block['blockName'] === 'core/group') {
    // 把双重转义的"还原为正常双引号
    $blockContent = str_replace('"', '"', $blockContent);
  }
  return $blockContent;
}, 10, 2);

注意：需要根据实际使用的区块名称调整判断条件，测试确认滑块元素的data-slick属性是否被正确修正。

内容的提问来源于stack exchange，提问作者Nick