トピック投稿者
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' );
トピック投稿者
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の記述が間違っているのでしょうか？
トピック投稿者
shu
(@shuichimiyazaki)
ご返信ありがとうございます。
<?php を追記しましたが変化がありません。
（管理画面を開くことはできました。）
http://www.garden0413.com/ のソースコード見たら
test.jsが表示されていました。
なので、WordPressの設定は済みですね。
後はJSの問題ですね。
トピック投稿者
shu
(@shuichimiyazaki)
ありがとうございます。
こちらが外部のＪＳファイルのコードです。
フォーラムで$は読み込まないとのことを知り
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 か…
トピック投稿者
shu
(@shuichimiyazaki)
Hinaloeさん
ありがとうございます。
ご指摘いただきました通り
１、ｊｓファイル
～省略～
$( '#spot4-3' ).css({
top: pos * 116 + 40 + 'px',
backgroundPosition: 0 - pos * 320 + 'px 0'
});
}
})
２、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”>
の前へ
