WordPress部署评价轮播模板报错feedbackSlider.owlCarousel is not a function

问题解决步骤 #

你部署的这套轮播模板基于Owl Carousel组件实现，报错的核心原因是WordPress默认没有内置该组件依赖的资源，且资源加载顺序不对。非开发人员可按照以下步骤操作即可修复：

第一步：安装资源插入插件 #

登录WordPress后台，进入「插件-安装插件」页面，搜索安装并激活Insert Headers and Footers插件，该插件可帮你快速在站点全局插入静态资源，无需修改主题代码。

第二步：插入头部资源 #

进入插件设置页面（设置->Insert Headers and Footers），将以下代码粘贴到「Scripts in Header」输入框中，保存设置：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/owl.carousel@2.3.4/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">

第三步：插入底部脚本 #

将以下代码粘贴到「Scripts in Footer」输入框中，保存设置：

<script src="https://cdn.jsdelivr.net/npm/owl.carousel@2.3.4/dist/owl.carousel.min.js"></script>
<script>
jQuery(document).ready(function ($) {
  var feedbackSlider = $(".feedback-slider");
  feedbackSlider.owlCarousel({
    items: 1,
    nav: true,
    dots: true,
    autoplay: true,
    loop: true,
    mouseDrag: true,
    touchDrag: true,
    navText: [
      "<i class='fa fa-long-arrow-left'></i>",
      "<i class='fa fa-long-arrow-right'></i>"
    ],
    responsive: {
      767: {
        nav: true,
        dots: false
      }
    }
  });

  feedbackSlider.on("translate.owl.carousel", function () {
    $(".feedback-slider-item h3")
      .removeClass("animated fadeIn")
      .css("opacity", "0");
    $(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating")
      .removeClass("animated zoomIn")
      .css("opacity", "0");
  });

  feedbackSlider.on("translated.owl.carousel", function () {
    $(".feedback-slider-item h3").addClass("animated fadeIn").css("opacity", "1");
    $(".feedback-slider-item img, .feedback-slider-thumb img, .customer-rating")
      .addClass("animated zoomIn")
      .css("opacity", "1");
  });
  feedbackSlider.on("changed.owl.carousel", function (property) {
    var current = property.item.index;
    var prevThumb = $(property.target)
      .find(".owl-item")
      .eq(current)
      .prev()
      .find("img")
      .attr("src");
    var nextThumb = $(property.target)
      .find(".owl-item")
      .eq(current)
      .next()
      .find("img")
      .attr("src");
    var prevRating = $(property.target)
      .find(".owl-item")
      .eq(current)
      .prev()
      .find("span")
      .attr("data-rating");
    var nextRating = $(property.target)
      .find(".owl-item")
      .eq(current)
      .next()
      .find("span")
      .attr("data-rating");
    $(".thumb-prev").find("img").attr("src", prevThumb);
    $(".thumb-next").find("img").attr("src", nextThumb);
    $(".thumb-prev")
      .find("span")
      .next()
      .html(prevRating + '<i class="fa fa-star"></i>');
    $(".thumb-next")
      .find("span")
      .next()
      .html(nextRating + '<i class="fa fa-star"></i>');
  });
  $(".thumb-next").on("click", function () {
    feedbackSlider.trigger("next.owl.carousel", [300]);
    return false;
  });
  $(".thumb-prev").on("click", function () {
    feedbackSlider.trigger("prev.owl.carousel", [300]);
    return false;
  });
});
</script>

第四步：部署HTML代码 #

打开你要放置轮播的页面/文章，添加「自定义HTML」区块，将你现有的轮播HTML代码粘贴进去，发布页面即可生效。

常见异常排查 #

• 若仍报函数不存在错误，可检查主题设置中是否禁用了默认jQuery，开启该选项即可
• 若样式错位，可在页面构建器的自定义CSS面板中添加对应样式覆盖主题默认样式即可

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