我正在尝试在 WordPress 网站中使用自定义模板文件。自定义模板好像看不到js。我该如何解决？它在 codepen 上运行良好。
http://codepen.io/redtailmedia/pen/BLzymO 这是自定义模板:
<?php
/*
Template Name: customhome
*/
get_header(); ?>
<html >
<head>
<meta charset="UTF-8">
<title>GSAP SVG feDisplacementMap & feTurbulence element</title>
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div id="box">
<svg class="mysvg" width="538" height="190" viewBox="0 0 600 200">
<defs>
<filter id="turb">
<feTurbulence id="turbwave" type="fractalNoise" baseFrequency="0.03" numOctaves="2"
result="turbulence_3" data-filterId="3" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turbulence_3" scale="40" />
</filter>
</defs>
<image id="img" x="0" y="0" width="100%" height="100%" xlink:href="http://www.redtailmediapei.com/wp-content/uploads/2016/09/redtailbanner.jpg" filter="url(#turb)" />
</svg>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js'></script>
<script src="js/customhome.js"></script>
</body>
</html>
<?php get_footer(); ?>
这是 JavaScript:
TweenMax.to("#turbwave", 8, {
attr:{"baseFrequency":0.01},
repeat:-1,
yoyo:true
});
为了彻底，这是 css:
body{
overflow:hidden;
text-align:center;
background:black;
color:#FFF;
}
a{
color:#88CE02;
}
#box{
position:relative;
margin-top:40px;
}
svg #img{
position:abosolute;
left:0;
top:0;
width:538px;
height:190px;
}
最佳答案
您可以尝试此代码的工作原理:
<?php
/*
Template Name: customhome
*/
get_header();
?>
<div id="box">
<svg class="mysvg" width="538" height="190" viewBox="0 0 600 200">
<defs>
<filter id="turb">
<feTurbulence id="turbwave" type="fractalNoise" baseFrequency="0.03" numOctaves="2"
result="turbulence_3" data-filterId="3" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turbulence_3" scale="40" />
</filter>
</defs>
<image id="img" x="0" y="0" width="100%" height="100%" xlink:href="http://www.redtailmediapei.com/wp-content/uploads/2016/09/redtailbanner.jpg" filter="url(#turb)" />
</svg>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js'></script>
<script>
TweenMax.to("#turbwave", 8, {
attr: {"baseFrequency": 0.01},
repeat: -1,
yoyo: true
});
</script>
<?php get_footer(); ?>
如果你想使用customhome.js文件那么你必须使用
<script src="<?php echo get_template_directory(); ?>
/js/customhome.js"></script>
js文件放在主题文件夹的js文件夹中。
关于javascript - wordpress自定义模板引用外部js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39523464/