Javascript脚本无法在Wordpress网站上加载

时间：2018-04-04 08:48:17

标签： javascript html css wordpress

所以我从https://codepen.io/hellokatili/pen/rVvMZb复制粘贴代码（模板中的HTML，styles.css和JS中的CSS使用此插件https://wordpress.org/plugins/header-and-footer-scripts/）

我在标签中添加了JS脚本。

以下是codepen的代码（从HAML转换为HTML，SCSS转换为CSS）。

HTML：

  > <div class="content">   
          <script type="text/javascript"> </script>
              <div class="slider single-item">
    >     <div class="quote-container">
    >       <div class="portrait octogon">
    >         <img src="http://www.tuacahntech.com/uploads/6/1/7/9/6179841/6166205_orig.jpg"/>
    >       </div>
    >       <div class="quote">
    >         <blockquote>
    >           <p>Meditation shabby chic master cleanse banh mi Godard. Asymmetrical Wes Anderson Intelligentsia you probably haven't heard of
    > them.</p>
    >           <cite>
    >             <span>Kristi McSweeney</span>
    >             <br/>
    >             Thundercats twee
    >             <br/>
    >             Austin selvage beard
    >           </cite>
    >         </blockquote>
    >       </div>
    >     </div>
    >     <div class="quote-container">
    >       <div class="portrait octogon">
    >         <img src="http://static1.squarespace.com/static/51579fb2e4b0fc0d9469ff97/56cc83dfe707ebc39cf3269f/56d0b59e27d4bde4665fded3/1457365822199/"/>
    >       </div>
    >       <div class="quote">
    >         <blockquote>
    >           <p>Bespoke occupy cred seitan. Austin street art freegan Truffaut leggings aesthetic, salvia chia Brooklyn flexitarian.
    > Single-origin coffee before they sold out health goth, cornhole irony
    > keffiyeh Austin taxidermy mlkshk blog trust fund banh mi you probably
    > haven't heard of them.</p>
    >           <cite>
    >             <span>Dina Anderson</span>
    >             <br/>
    >             Blue Bottle keffiyeh
    >             <br/>
    >             Sartorial locavore Schlitz ennui
    >           </cite>
    >         </blockquote>
    >       </div>
    >     </div>   </div> </div> <svg>   <defs>
    >     <clipPath clipPathUnits="objectBoundingBox" id="octogon">
    >       <polygon points="0.50001 0.00000, 0.61887 0.06700, 0.75011 0.06721, 0.81942 0.18444, 0.93300 0.25001, 0.93441 0.38641, 1.00000 0.49999, 0.93300 0.61887, 0.93300 0.75002, 0.81556 0.81944, 0.74999 0.93302, 0.61357 0.93444, 0.50001 1.00000, 0.38118 0.93302, 0.24998 0.93302, 0.18056 0.81556, 0.06700 0.74899, 0.06559 0.61359, 0.00000 0.49999, 0.06700 0.38111, 0.06700 0.25001, 0.18440 0.18058, 0.25043 0.06700, 0.38641 0.06559, 0.50001 0.00000"></polygon>
    >     </clipPath>   </defs> </svg>

CSS：

html {
  height: 100%;
}
body {
  background: linear-gradient(130deg, #1abc9c, #d1f2eb);
  background-size: 400% 400%;
  -webkit-animation: gradient 16s ease infinite;
  -moz-animation: gradient 16s ease infinite;
  animation: gradient 16s ease infinite;
}
.content {
  margin: auto;
  padding: 20px;
  width: 80%;
  max-width: 1200px;
  min-width: 300px;
}
.slick-slider {
  margin: 30px auto 50px;
}
.slick-prev, .slick-next {
  color: white;
  opacity: 1;
  height: 40px;
  width: 40px;
  margin-top: -20px;
}
.slick-prev path, .slick-next path {
  fill: rgba(255, 255, 255, 0.4);
}
.slick-prev:hover path, .slick-next:hover path {
  fill: #fff;
}
.slick-prev {
  left: -35px;
}
.slick-next {
  right: -35px;
}
.slick-prev:before, .slick-next:before {
  content: none;
}
.slick-dots li button:before {
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
  font-size: 8px;
}
.slick-dots li.slick-active button:before {
  color: #fff;
}
.quote-container {
  min-height: 200px;
  color: #666;
  font-size: 36px;
  margin: 0 20px;
  position: relative;
}
.quote-container:hover {
  cursor: grab;
}
.quote-container .portrait {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 140px;
  width: 140px;
  overflow: hidden;
}
.quote-container .portrait img {
  display: block;
  height: auto;
  width: 100%;
}
.quote-container .quote {
  position: relative;
  z-index: 600;
  padding: 40px 0 40px 180px;
  margin: 0;
  font-size: 20px;
  font-style: italic;
  line-height: 1.4 !important;
  font-family: Calibri;
  color: white;
}
.quote-container .quote p {
  position: relative;
  margin-bottom: 20px;
}
.quote-container .quote p:first-child:before {
  content: '\201C';
  color: rgba(255, 255, 255, 0.44);
  font-size: 7.5em;
  font-weight: 700;
  opacity: 1;
  position: absolute;
  top: -0.4em;
  left: -0.2em;
  text-shadow: none;
  z-index: -10;
}
.quote-container .quote cite {
  display: block;
  font-size: 14px;
}
.quote-container .quote cite span {
  font-size: 16px;
  font-style: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.dragging .quote-container {
  cursor: grabbing;
}
.octogon {
  -webkit-clip-path: polygon(50% 0%, 38.11% 6.7%, 24.99% 6.72%, 18.06% 18.44%, 6.7% 25%, 6.56% 38.64%, 0% 50%, 6.7% 61.89%, 6.7% 75%, 18.44% 81.94%, 25% 93.3%, 38.64% 93.44%, 50% 100%, 61.88% 93.3%, 75% 93.3%, 81.94% 81.56%, 93.3% 74.9%, 93.44% 61.36%, 100% 50%, 93.3% 38.11%, 93.3% 25%, 81.56% 18.06%, 74.96% 6.7%, 61.36% 6.56%, 50% 0%);
  clip-path: url(#octogon);
  height: 140px;
  width: 140px;
}
@-webkit-keyframes gradient {
  0% {
    background-position: 5% 0%;
  }
  50% {
    background-position: 96% 100%;
  }
  100% {
    background-position: 5% 0%;
  }
}
@-moz-keyframes gradient {
  0% {
    background-position: 5% 0%;
  }
  50% {
    background-position: 96% 100%;
  }
  100% {
    background-position: 5% 0%;
  }
}
@keyframes gradient {
  0% {
    background-position: 5% 0%;
  }
  50% {
    background-position: 96% 100%;
  }
  100% {
    background-position: 5% 0%;
  }
}

JS：

var prevButton = '<button type="button" data-role="none" class="slick-prev" aria-label="prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1"><path fill="#FFFFFF" d="M 16,16.46 11.415,11.875 16,7.29 14.585,5.875 l -6,6 6,6 z" /></svg></button>',
    nextButton = '<button type="button" data-role="none" class="slick-next" aria-label="next"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#FFFFFF" d="M8.585 16.46l4.585-4.585-4.585-4.585 1.415-1.415 6 6-6 6z"></path></svg></button>';

$('.single-item').slick({
  infinite: true,
  dots: true,
  autoplay: true,
  autoplaySpeed: 4000,
  speed: 1000,
  cssEase: 'ease-in-out',
  prevArrow: prevButton,
  nextArrow: nextButton
});

$('.quote-container').mousedown(function(){
  $('.single-item').addClass('dragging');
});
$('.quote-container').mouseup(function(){
  $('.single-item').removeClass('dragging');
});

HTML和CSS部分工作正常，但JS无法运行。我在同一个WP站点上使用了不同的JS脚本，它运行得很好。有什么我想念的吗？

2 个答案:

答案 0 :(得分：1)

你也可以在 jquery ready

中写一下代码 
(function($){
  'use strict';

    var prevButton = '<button type="button" data-role="none" class="slick-prev" aria-label="prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1"><path fill="#FFFFFF" d="M 16,16.46 11.415,11.875 16,7.29 14.585,5.875 l -6,6 6,6 z" /></svg></button>',
        nextButton = '<button type="button" data-role="none" class="slick-next" aria-label="next"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#FFFFFF" d="M8.585 16.46l4.585-4.585-4.585-4.585 1.415-1.415 6 6-6 6z"></path></svg></button>';

    $('.single-item').slick({
      infinite: true,
      dots: true,
      autoplay: true,
      autoplaySpeed: 4000,
      speed: 1000,
      cssEase: 'ease-in-out',
      prevArrow: prevButton,
      nextArrow: nextButton
    });

    $('.quote-container').mousedown(function(){
      $('.single-item').addClass('dragging');
    });
    $('.quote-container').mouseup(function(){
      $('.single-item').removeClass('dragging');
    });

})(jQuery);

希望这会奏效。

答案 1 :(得分：0)

您是否可以尝试在主题的footer.php中添加此jquery脚本以用于测试目的，例如：

var prevButton =''，     nextButton =''; 

jQuery('.single-item').slick({
  infinite: true,
  dots: true,
  autoplay: true,
  autoplaySpeed: 4000,
  speed: 1000,
  cssEase: 'ease-in-out',
  prevArrow: prevButton,
  nextArrow: nextButton
});

jQuery('.quote-container').mousedown(function(){
  jQuery('.single-item').addClass('dragging');
});
jQuery('.quote-container').mouseup(function(){
  jQuery('.single-item').removeClass('dragging');
});

并打开检查控制台检查是否有任何错误。

相关问题
最新问题