所以我从字面上复制粘贴了 https://codepen.io/hellokatili/pen/rVvMZb 中的代码(模板中的 HTML，styles.css 中的 CSS 和使用此插件的 JS 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 脚本，它工作得很好。有什么我想念的吗？
最佳答案
您也可以通过在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);
希望这会奏效。
关于Javascript 脚本未在 Wordpress 网站上加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49646601/