如何在 wordpress 中实现 codepen jquery 脚本？

Question

我正在尝试在 wordpress 中使用 codepen 实现一个精美的滑块。我已经使用 enqueue 脚本方法正确添加了脚本。我知道我做得很好，因为它适用于我尝试过的一个非常小的实验。现在笔是：http://codepen.io/suez/pen/wMMgXp .

    (function() {

var $$ = function(selector, context) {
var context = context || document;
var elements = context.querySelectorAll(selector);
return [].slice.call(elements);
};

function _fncSliderInit($slider, options) {
var prefix = ".fnc-";

var $slider = $slider;
var $slidesCont = $slider.querySelector(prefix + "slider__slides");
var $slides = $$(prefix + "slide", $slider);
var $controls = $$(prefix + "nav__control", $slider);
var $controlsBgs = $$(prefix + "nav__bg", $slider);
var $progressAS = $$(prefix + "nav__control-progress", $slider);

var numOfSlides = $slides.length;
var curSlide = 1;
var sliding = false;
var slidingAT = +parseFloat(getComputedStyle($slidesCont)["transition-duration"]) * 1000;
var slidingDelay = +parseFloat(getComputedStyle($slidesCont)["transition-delay"]) * 1000;

var autoSlidingActive = false;
var autoSlidingTO;
var autoSlidingDelay = 5000; // default autosliding delay value
var autoSlidingBlocked = false;

var $activeSlide;
var $activeControlsBg;
var $prevControl;

function setIDs() {
  $slides.forEach(function($slide, index) {
    $slide.classList.add("fnc-slide-" + (index + 1));
  });

  $controls.forEach(function($control, index) {
    $control.setAttribute("data-slide", index + 1);
    $control.classList.add("fnc-nav__control-" + (index + 1));
  });

  $controlsBgs.forEach(function($bg, index) {
    $bg.classList.add("fnc-nav__bg-" + (index + 1));
  });
 };

 setIDs();

  function afterSlidingHandler() {
  $slider.querySelector(".m--previous-slide").classList.remove("m--active-slide", "m--previous-slide");
  $slider.querySelector(".m--previous-nav-bg").classList.remove("m--active-nav-bg", "m--previous-nav-bg");

  $activeSlide.classList.remove("m--before-sliding");
  $activeControlsBg.classList.remove("m--nav-bg-before");
  $prevControl.classList.remove("m--prev-control");
  $prevControl.classList.add("m--reset-progress");
  var triggerLayout = $prevControl.offsetTop;
  $prevControl.classList.remove("m--reset-progress");

  sliding = false;
  var layoutTrigger = $slider.offsetTop;

  if (autoSlidingActive && !autoSlidingBlocked) {
    setAutoslidingTO();
  }
  };

  function performSliding(slideID) {
  if (sliding) return;
  sliding = true;
  window.clearTimeout(autoSlidingTO);
  curSlide = slideID;

  $prevControl = $slider.querySelector(".m--active-control");
  $prevControl.classList.remove("m--active-control");
  $prevControl.classList.add("m--prev-control");
  $slider.querySelector(prefix + "nav__control-" + slideID).classList.add("m--active-control");

  $activeSlide = $slider.querySelector(prefix + "slide-" + slideID);
  $activeControlsBg = $slider.querySelector(prefix + "nav__bg-" + slideID);

  $slider.querySelector(".m--active-slide").classList.add("m--previous-slide");
  $slider.querySelector(".m--active-nav-bg").classList.add("m--previous-nav-bg");

  $activeSlide.classList.add("m--before-sliding");
  $activeControlsBg.classList.add("m--nav-bg-before");

  var layoutTrigger = $activeSlide.offsetTop;

  $activeSlide.classList.add("m--active-slide");
  $activeControlsBg.classList.add("m--active-nav-bg");

  setTimeout(afterSlidingHandler, slidingAT + slidingDelay);
  };



function controlClickHandler() {
  if (sliding) return;
  if (this.classList.contains("m--active-control")) return;
  if (options.blockASafterClick) {
    autoSlidingBlocked = true;
    $slider.classList.add("m--autosliding-blocked");
  }

  var slideID = +this.getAttribute("data-slide");

  performSliding(slideID);
 };

 $controls.forEach(function($control) {
  $control.addEventListener("click", controlClickHandler);
 });

 function setAutoslidingTO() {
  window.clearTimeout(autoSlidingTO);
  var delay = +options.autoSlidingDelay || autoSlidingDelay;
  curSlide++;
  if (curSlide > numOfSlides) curSlide = 1;

  autoSlidingTO = setTimeout(function() {
    performSliding(curSlide);
  }, delay);
 };

 if (options.autoSliding || +options.autoSlidingDelay > 0) {
  if (options.autoSliding === false) return;

  autoSlidingActive = true;
  setAutoslidingTO();

  $slider.classList.add("m--with-autosliding");
  var triggerLayout = $slider.offsetTop;

  var delay = +options.autoSlidingDelay || autoSlidingDelay;
  delay += slidingDelay + slidingAT;

  $progressAS.forEach(function($progress) {
    $progress.style.transition = "transform " + (delay / 1000) + "s";
  });
 }

 $slider.querySelector(".fnc-nav__control:first-child").classList.add("m--active-control");

};

var fncSlider = function(sliderSelector, options) {
var $sliders = $$(sliderSelector);

$sliders.forEach(function($slider) {
  _fncSliderInit($slider, options);
});
};

 window.fncSlider = fncSlider;
 }());

 /* not part of the slider scripts */

 /* Slider initialization
  options:
  autoSliding - boolean
  autoSlidingDelay - delay in ms. If audoSliding is on and no value provided, default value is 5000
  blockASafterClick - boolean. If user clicked any sliding control, autosliding won't start again
 */
fncSlider(".example-slider", {autoSlidingDelay: 4000});

var $demoCont = document.querySelector(".demo-cont");

 [].slice.call(document.querySelectorAll(".fnc-slide__action-btn")).forEach(function($btn) {
$btn.addEventListener("click", function() {
$demoCont.classList.toggle("credits-active");
});
});

document.querySelector(".demo-cont__credits-close").addEventListener("click", function() {
 $demoCont.classList.remove("credits-active");
});

document.querySelector(".js-activate-global-blending").addEventListener("click", function() {
document.querySelector(".example-slider").classList.toggle("m--global-blending-active");
});

javascript 代码可以在上面和提到的 link.I 中找到，知道在 wordpress 中我们必须使用 jQuery 代替 $ 但我似乎仍然无法弄清楚在这种情况下该怎么做。还有一件事，css 是 scass 形式，但我采用了编译后的 css 形式，但我认为这不会引起任何问题（正确吗？）到目前为止我尝试过的一切都有失败的。任何帮助将不胜感激

Answer 1

您可以在 WordPress 中使用 $ 而不是 jQuery，只要您将所有代码包装在以下内容中即可：

(function($) {

    // Your code goes here

})( jQuery );

如果代码在 header 中（在文档准备好之前），则改为使用：

jQuery(document).ready(function( $ ) {

    // Your code goes here

});

如果您的代码仍有问题，请在您的主题中包含入队代码和错误消息

如何在 wordpress 中实现 codepen jquery 脚本？

How to implement codepen jquery script in wordpress?

javascript

wordpress

jquery