外部のjsを参照するwordpressカスタムテンプレート

私はWordPressサイトでカスタムテンプレートファイルを使用しようとしています。カスタムテンプレートはjsを見ることができないようです。これをどうやって解決するのですか？それはcodepenでうまく動作します。外部のjsを参照するwordpressカスタムテンプレート

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; 
}

出典

2016-09-16 Redtail

JSを読み込めないときにアクセスしているフォルダ構造とURLを表示できますか？ –

あなたは、その作業にこのコードを試すことができます：あなたは、ファイルcustomhome.js使用したい場合は

<?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(); ?>

は、あなたが

を使用する必要があります

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

jsファイルは、テーマフォルダのjsフォルダに置かれます。

出典

2016-09-16 04:56:56

ソースファイルを正しく参照する。これを行う最善の方法は、WordPressのエンキュー機能を使用することです。あなたはは、あなたがこのテクニックを避けたい何らかの理由場合

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); 
}

あなたのfunctions.phpファイルに次のコードを追加することができ、あなたの上記のコードでは、あなたは少し以下のようにスクリプトタグを変更することができます。

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

出典

2016-09-16 04:53:20

WordPressのテンプレートディレクトリのフルパスを指定する必要があります。

使用

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

または

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

有効テーマの内側にあなたのJSフォルダ内にファイルを置きます。

それはあなたのために働くでしょう。

ありがとうございました。

出典

2016-09-16 06:14:57

外部のjsを参照するwordpressカスタムテンプレート

答えて

関連する問題