Question

我正在尝试在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;
}

Answer 1

您可以尝试使用此代码：

<?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文件夹中。

Answer 2

您需要正确引用源文件。最好的方法是使用WordPress入队函数。您可以在functions.php文件中添加以下代码

add_action( 'wp_enqueue_scripts', 'wpso39523464_enqueue_scripts' );

function wpso39523464_enqueue_scripts() {

    // You can also load the below js file on selected pages conditionally
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/customhome.js', '', '', true );
}

如果出于任何原因想要避免使用此技术，那么在上面的代码中，您可以稍微修改脚本标记，如下所示：

 <script src="<?php echo get_template_directory_uri() ?>/js/customhome.js"></script>

Answer 3

您需要在WordPress中提供模板目录的完整路径。

使用

?php bloginfo('template_url'); ?&gt;/js_foldername/filename.js

或

?php echo get_template_directory_uri(); ?&gt;/js_foldername/filename.js

将您的文件放入激活主题内的JS文件夹中。

它适用于你。

感谢。

wordpress自定义模板引用外部js

3 个答案: