サポート » 使い方全般 » スクリプトの読み込み

  • 解決済 shu

    (@shuichimiyazaki)


    オリジナルでテーマ作成中で
    スクリプトを読み込みません。
    教えて頂けますでしょうか?

    function.php

    //スクリプト
    function my_scripts() {
    {wp_enqueue_script(
    ‘my-test-script’,
    get_template_directory_uri() . ‘/test.js’
    );
    }
    wp_enqueue_script( ‘jquery’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘my_scripts’ );

    index.php (上部省略)

    <div id=”spot1″ class=”spots”>
    <!– 画像を入れるdiv要素 –>
    <div id=”spot1-1″ class=”prlx”></div>
    <div id=”spot1-2″ class=”prlx”></div>
    <div id=”spot1-3″ class=”prlx”></div>
    <div id=”spot1-4″ class=”prlx”></div>
    <!– 観光スポットのタイトルと説明文章を入れるdiv要素 –>
    <div id=”desc1″ class=”content-box”>
    <h2>Great Panorama View</h2>
    <p>Lorem ipum</p>
    </div>
    </div>

    <!– div#scroll-endはdiv#contentの外へ –>
    <div id=”scroll-end”>
    </div>

    <?php wp_head(); ?>
    </head>

    </html>

15件の返信を表示中 - 1 - 15件目 (全17件中)
  • スレッド開始 shu

    (@shuichimiyazaki)

    追記:
    jsファイル内の$をjQueryとしましたが、読み込みできませんでした。

    functions.phpで、括弧が余分なところがあるようですね。
    (他にもあるかもしれないですが、今のところ気づいたのはここです。)

    //スクリプト
    function my_scripts() {
    {wp_enqueue_script( // 頭の { が余分
    'my-test-script',
    get_template_directory_uri() . '/test.js'
    );
    } // } が余分
    wp_enqueue_script( 'jquery' );
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts' );

    index.phpのほうは、

    <?php wp_head(); ?>
    </head>
    <body>
    (画像やタイトルなどを表示)

    <?php wp_footer(); ?>
    </body>
    </html>

    のようにしないとマズイですね。

    スレッド開始 shu

    (@shuichimiyazaki)

    Fumito MIZUNOさん

    ありがとうございます。
    ご指摘いただきましたように

    index.php

    //スクリプト
    function my_scripts() {
    wp_enqueue_script(
    ‘my-test-script’,
    get_template_directory_uri() . ‘/test.js’
    );

    wp_enqueue_script( ‘jquery’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘my_scripts’ );

    index.php

    <div id=”spot1″ class=”spots”>
    <!– 画像を入れるdiv要素 –>
    <div id=”spot1-1″ class=”prlx”></div>
    <div id=”spot1-2″ class=”prlx”></div>
    <div id=”spot1-3″ class=”prlx”></div>
    <div id=”spot1-4″ class=”prlx”></div>
    <!– 観光スポットのタイトルと説明文章を入れるdiv要素 –>
    <div id=”desc1″ class=”content-box”>
    <h2>Great Panorama View</h2>
    <p>Lorem ipum</p>
    </div>
    </div>

    <!– div#scroll-endはdiv#contentの外へ –>
    <div id=”scroll-end”>
    </div>
    <?php wp_head(); ?>
    </head>

    <body>
    <h1><?php the_title(); ?></h1>
    <?php wp_footer(); ?>
    </body>
    </html>

    としましたが変化が見られませんでした。

    こちらが私のサイトになります。
    →http://www.garden0413.com/

    shuさんへ。
    ファイル名はfunctions.phpですが、そこは大丈夫でしょうか?

    スレッド開始 shu

    (@shuichimiyazaki)

    Fumito MIZUNOさん

    間違えておりました。
    functions.phpへ修正し
    管理画面を開こうとすると

    //繧ケ繧ッ繝ェ繝励ヨ function my_scripts() { wp_enqueue_script( ‘test’, get_template_directory_uri() . ‘/test.js’ ); } add_action( ‘wp_enqueue_scripts’, ‘my_scripts’ );

    このような表示が・・・
    functions.phpの記述が間違っているのでしょうか?

    functions.phpの先頭に、

    <?php

    という一行が書かれているでしょうか?

    スレッド開始 shu

    (@shuichimiyazaki)

    ご返信ありがとうございます。

    <?php を追記しましたが変化がありません。
    (管理画面を開くことはできました。)

    http://www.garden0413.com/ のソースコード見たら
    test.jsが表示されていました。

    なので、WordPressの設定は済みですね。
    後はJSの問題ですね。

    スレッド開始 shu

    (@shuichimiyazaki)

    ありがとうございます。

    こちらが外部のJSファイルのコードです。
    フォーラムで$は読み込まないとのことを知り
    jQuery(function( $ ) {
    を頭につけました。
    が読み込みません。

    また現在は、テーマ直下にファイルを作りその中にtest.jsを入れています。
    テーマ直下がいいのか、ファイルの中に入れる方がいいのか?
    どちらが適切なのでしょうか?

    宜しくお願い致します。

    jQuery(function( $ ) {

    $( window ).scroll( function() {
    var scrolled = $( this ).scrollTop();

    $( ‘body’ ).css({
    backgroundPosition: ‘0 ‘ + scrolled * 0.9 + ‘px’
    });
    });
    var windowHgt = window.innerHeight;
    var spot1S = $( ‘#spot1’ ).offset().top;
    var spot1H = $( ‘#spot1’ ).height();
    var spot1D = spot1S – ( windowHgt – spot1H );
    var spot2S = $( ‘#spot2’ ).offset().top;
    var spot2H = $( ‘#spot2’ ).height();
    var spot2D = spot2S – ( windowHgt – spot2H );
    var spot3S = $( ‘#spot3’ ).offset().top;
    var spot3H = $( ‘#spot3’ ).height();
    var spot3D = spot3S – ( windowHgt – spot3H );
    var spot4S = $( ‘#spot4’ ).offset().top;
    var spot4H = $( ‘#spot4’ ).height();
    var spot4D = spot4S – ( windowHgt – spot4H );
    if( spot1S > scrolled ) {
    $( ‘#spot1’ ).css({ top: spot1S – scrolled });
    } else {
    $( ‘#spot1’ ).css({ top: 0 });
    }

    if( spot1D < scrolled && spot1S > scrolled ) {
    var pos = ( scrolled – spot1D ) / ( windowHgt – spot1H );
    $( ‘#spot1-1’ ).css({
    backgroundPosition: 0 – pos * 20 + ‘px 0’
    });
    $( ‘#spot1-2’ ).css({
    top: pos * 20 + ‘px’,
    backgroundPosition: 0 – pos * 80 + ‘px 0’
    });
    $( ‘#spot1-3’ ).css({
    top: pos * 60 + 40 + ‘px’,
    backgroundPosition: 0 – pos * 140 + ‘px 0’
    });
    $( ‘#spot1-4’ ).css({
    top: pos * 136 + 60 + ‘px’,
    backgroundPosition: 0 – pos * 320 + ‘px 0’
    });
    }
    if( spot2D < scrolled && spot2S > scrolled ) {
    var pos = ( scrolled – spot2D ) / ( windowHgt – spot2H );
    $( ‘#spot2-2’ ).css({ left: pos * 168 + 20 + ‘px’ });
    $( ‘#spot2-3’ ).css({ left: pos * 312 + 199 + ‘px’ });
    } else if( spot2S < scrolled ) {
    $( ‘#spot2-3’).css({ left: ‘512px’ });
    }

    if( spot3S > scrolled ) {
    $( ‘#spot3’ ).css({ top: spot3S – scrolled });
    } else {$( ‘#spot3’ ).css({ top: 0 });
    }
    if( spot3D < scrolled && spot3S > scrolled ) {
    var pos = ( scrolled – spot3D ) / ( windowHgt – spot3H );
    $( ‘#spot3-2’ ).css({ top: pos * 100 + 210 + ‘px’ });
    }

    if( spot4S > scrolled ) {
    $( ‘#spot4’ ).css({ top: spot4S – scrolled });
    } else {
    $( ‘#spot4’ ).css({ top: 0 });
    }
    if( spot4D < scrolled && spot4S > scrolled ) {
    var pos = ( scrolled – spot4D ) / ( windowHgt – spot4H );
    $( ‘#spot4-1’ ).css({
    backgroundPosition: 0 – pos * 40 + ‘px 0’
    });
    $( ‘#spot4-2’ ).css({
    top: pos * 56 + 20 + ‘px’,
    backgroundPosition: 0 – pos * 140 + ‘px 0’
    });
    $( ‘#spot4-3’ ).css({
    top: pos * 116 + 40 + ‘px’,
    backgroundPosition: 0 – pos * 320 + ‘px 0’
    });
    }

    保守上はサブディレクトリを作ってそこにいれた方がいいでしょうね。

    ファイル→ディレクトリ、フォルダのことですよね?基本的にファイルとはこの場合test.jsを指す言葉になってしまうので一応。

    コードを貼る際はバッククオート使ってくださいね。b-quoteは引用です。(整形済テキストは崩れます)

    ところで http://www.garden0413.com にアクセスしてみたところtest.jsが404になってましたが…あっ http://www.garden0413.com/wp-content/themes/theme3/test/test.js か…

    加えて幾つか気になった点。

    test.jsですが…

    • 頭にjQuery(function($){を付けるだけでなく最後に閉じ括弧(}))もつけてください。(エラー1:Uncaught SyntaxError: Unexpected end of input)
    • wp_head、headの後に<div id="contents">を置いてください。ブラウザは正しく強引に解決してくれますがとてもおかしいマークアップです。
    • #spot2が存在しないためjQuery("#spot2").offset()の返り値がundefinedになってい、その子topなんてないよ!といったエラーになってます。
    スレッド開始 shu

    (@shuichimiyazaki)

    Hinaloeさん
     
    ありがとうございます。
    ご指摘いただきました通り

    1、jsファイル

    ~省略~

    $( '#spot4-3' ).css({
    top: pos * 116 + 40 + 'px',
    backgroundPosition: 0 - pos * 320 + 'px 0'
    });
    }
    })

    2、index.php

    <?php wp_head(); ?>
    <div id="contents">
    </div>
    </head>
    
    <body>
    <h1><?php the_title(); ?></h1>
    <?php wp_footer(); ?>
    </body>
    </html>

    としましたが、反応がないですね。

    spot2はこのようにスタイリングしました。

    #spot2 {
    	top: 2000px;
    }
    
    #desc2 {
    	bottom: 2em;
    	left: 2em;
    }
    
    #spot2-1 {
    	left: 0;
    	width: 472px;
    	height: 540px;
    	background-image: url(http://www.garden0413.com/wp-content/uploads/2014/11/hydrangea1.jpg);
    }
    
    #spot2-2 {
    	left: 20px;
    	width: 623px;
    	height: 540px;
    	background-image: url(../img/hydrangea2.png);
    }
    
    #spot2-3 {
    	left: 200px;
    	width: 448px;
    	height: 540px;
    	background-image: url(http://www.garden0413.com/wp-content/uploads/2014/11/hydrangea3.png);
    }
    スレッド開始 shu

    (@shuichimiyazaki)

    追記:

    index.phpはこのように記述しています。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="<?php bloginfo ('charset'); ?>" />
    <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
    <link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" />
    
      <!-- head要素内 -->
    
    <div id="contents">
     <div id="scroll-start" class="content-box">
     <h1>Tercel Trading Co.,Ltd.</h1>
     <p>Taiwan Brand</P>
     <p id="scrl-down">Scroll Down.</p>
    </div>
    
     <div id="spot1" class="spots">
       <!-- 画像を入れるdiv要素 -->
       <div id="spot1-1" class="prlx"></div>
       <div id="spot1-2" class="prlx"></div>
       <div id="spot1-3" class="prlx"></div>
       <div id="spot1-4" class="prlx"></div>
       <!-- 観光スポットのタイトルと説明文章を入れるdiv要素 -->
       <div id="desc1" class="content-box">
         <h2>Great Panorama View</h2>
         <p>Lorem ipum</p>
       </div>
    </div>
    
    <!-- div#scroll-endはdiv#contentの外へ -->
    <div id="scroll-end">
    </div>
    <?php wp_head(); ?>
    <div id="contents">
    </div>
    </head>
    
    <body>
    <h1><?php the_title(); ?></h1>
    <?php wp_footer(); ?>
    </body>
    </html>

    指摘の点がなおりきってません。

    – function.phpの修正

    get_template_directory_uri() . '/test/test.js'
    </head>
    
    <body>


    <div id=”contents”>
    の前へ

15件の返信を表示中 - 1 - 15件目 (全17件中)
  • トピック「スクリプトの読み込み」には新たに返信することはできません。