質問編集履歴
1
一部のjQueryが読み込まれないに変更
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
Wordpressに
|
1
|
+
WordpressにjQueryが読み込まれない
|
test
CHANGED
@@ -4,7 +4,55 @@
|
|
4
4
|
|
5
5
|
Wordpressのオリジナルテーマを初めて作成しています。ローカル環境です。
|
6
6
|
|
7
|
+
スクロール途中の画像をフェードインさせて表示させたいです。ネット記事を参考に、
|
8
|
+
|
9
|
+
フェードインさせたいものを.animationでくくりました。
|
10
|
+
|
11
|
+
```ここに言語を入力
|
12
|
+
|
13
|
+
(jsファイル)
|
14
|
+
|
15
|
+
|
16
|
+
|
17
|
+
jQuery(function ($) {
|
18
|
+
|
19
|
+
$(function(){
|
20
|
+
|
21
|
+
$(window).on('load scroll',function (){
|
22
|
+
|
23
|
+
$('.animation').each(function(){
|
24
|
+
|
25
|
+
//ターゲットの位置を取得
|
26
|
+
|
27
|
+
var target = $(this).offset().top;
|
28
|
+
|
29
|
+
//スクロール量を取得
|
30
|
+
|
31
|
+
var scroll = $(window).scrollTop();
|
32
|
+
|
33
|
+
//ウィンドウの高さを取得
|
34
|
+
|
35
|
+
var height = $(window).height();
|
36
|
+
|
37
|
+
//ターゲットまでスクロールするとフェードインする
|
38
|
+
|
7
|
-
|
39
|
+
if (scroll > target - height){
|
40
|
+
|
41
|
+
//クラスを付与
|
42
|
+
|
43
|
+
$(this).addClass('active');
|
44
|
+
|
45
|
+
}
|
46
|
+
|
47
|
+
});
|
48
|
+
|
49
|
+
});
|
50
|
+
|
51
|
+
});
|
52
|
+
|
53
|
+
});
|
54
|
+
|
55
|
+
```
|
8
56
|
|
9
57
|
|
10
58
|
|
@@ -14,82 +62,8 @@
|
|
14
62
|
|
15
63
|
|
16
64
|
|
17
|
-
|
65
|
+
読み込まれませんでした。尚、同じjsファイル内にスライドショーの記述もしましたが、そちらは問題なく読み込まれます。console.logも試しにやってみるとこちらも問題なく表示されます。また、コードエディタで同じ記載をして(jQuery(function ($) {は除いて)、ブラウザで読み込ませると問題なく動作します。
|
18
66
|
|
19
67
|
|
20
68
|
|
21
|
-
|
22
|
-
|
23
|
-
### 試したこと
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
①テーマファイル内のheader.phpなどと同じ階層にjsファイルを作成し、そのファイル内にscript.jsと、jquery-3.6.0.min.js(jQueryは記載の必要がない...?)を入れ、
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
②header.phpとfront-page.phpのheadの最下部に
|
32
|
-
|
33
|
-
<?php wp_head(); ?>
|
34
|
-
|
35
|
-
と記載し、そのひとつ上に
|
36
|
-
|
37
|
-
<script type='text/javascript' src='http://wp/wp-content/themes/(テーマファイル名)/js/script.js'></script>
|
38
|
-
|
39
|
-
と記載し、
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
③functions.phpに
|
44
|
-
|
45
|
-
<?php
|
46
|
-
|
47
|
-
function my_script_init()
|
48
|
-
|
49
|
-
{
|
50
|
-
|
51
|
-
wp_deregister_script('jquery');
|
52
|
-
|
53
|
-
wp_enqueue_script( 'jquery', '//code.jquery.com/jquery-3.6.0.min.js', "", "1.0.1");
|
54
|
-
|
55
|
-
wp_enqueue_script( 'script-js', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0.1', true );
|
56
|
-
|
57
|
-
}
|
58
|
-
|
59
|
-
add_action('wp_enqueue_scripts', 'my_script_init');
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
または
|
64
|
-
|
65
|
-
<?php
|
66
|
-
|
67
|
-
add_theme_support( 'post-thumbnails' );
|
68
|
-
|
69
|
-
function my_script(){
|
70
|
-
|
71
|
-
wp_enqueue_script(
|
72
|
-
|
73
|
-
'my-script',
|
74
|
-
|
75
|
-
get_template_directory_uri() '/js/script.js',
|
76
|
-
|
77
|
-
array(),
|
78
|
-
|
79
|
-
false,
|
80
|
-
|
81
|
-
true,
|
82
|
-
|
83
|
-
);
|
84
|
-
|
85
|
-
}
|
86
|
-
|
87
|
-
と記載しました。
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
ネット記事からほとんどコピペで編集しましたが、動きません。
|
94
|
-
|
95
|
-
よろしければご教示いただければと思います。
|
69
|
+
よろしければ解決方法をご教示いただければと思います。
|