スクリプトの読み込み
-
オリジナルでテーマ作成中で
スクリプトを読み込みません。
教えて頂けますでしょうか?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>
-
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>のようにしないとマズイですね。
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ですが、そこは大丈夫でしょうか?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
という一行が書かれているでしょうか?
http://www.garden0413.com/ のソースコード見たら
test.jsが表示されていました。なので、WordPressの設定は済みですね。
後はJSの問題ですね。ありがとうございます。
こちらが外部の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
なんてないよ!といったエラーになってます。
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); }
追記:
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>
- 頭に
- トピック「スクリプトの読み込み」には新たに返信することはできません。