質問編集履歴

1

一部のjQueryが読み込まれないに変更

2021/07/05 16:04

投稿

chinsuke
chinsuke

スコア2

test CHANGED
@@ -1 +1 @@
1
- WordpressにJavascriptとjQuery読み込ませた
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
- JavascriptとjQueryを読み込ませたいです。
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
- ネット事を参考いくつかやってみたすが、JavascriptとjQuery読み込ま気配がありせん
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
+ よろしければ解決方法をご教示いただければと思います。