teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問wordpressで2つのjQueryのプラグインをfunctions.phpで読み込みたいのですが、２つ目が動きません。

編集履歴

質問編集履歴

2

誤字

2021/12/23 13:45

投稿

wyook
wyook

スコア17

test CHANGED
@@ -1 +1 @@
1
- wordpressで2つのjQueryのプラグインをfunction.phpで読み込みたいのですが、２つ目が動きません。
1
+ wordpressで2つのjQueryのプラグインをfunctions.phpで読み込みたいのですが、２つ目が動きません。
test CHANGED
@@ -4,8 +4,6 @@
4
4
 
5
5
  動いてくれません。どこの記述が間違っているか、ご教授お願いいたします。
6
6
 
7
- ご教授お願いいたします。
8
-
9
7
  ### header.php
10
8
 
11
9
 

1

functions.phpはご指摘いただいた所を修正したのですが、それでも動かないので、他のファイルでの記述に問題があると思い質問を修正致しました。

2021/12/23 13:44

投稿

wyook
wyook

スコア17

test CHANGED
File without changes
test CHANGED
@@ -1,14 +1,210 @@
1
1
  wordpressで2つのjQueryのプラグインをfunction.phpで読み込みたいのですが、
2
2
 
3
- ２つ目が動きません。
3
+ ２つ目が動きません。具体的には、slickを読み込ませたいのですが、どうしても
4
-
4
+
5
- function.phpの記述はこれであっていますでしょうか？
5
+ 動いてくれません。どこの記述が間違っているか、ご教授お願いいたします。
6
6
 
7
7
  ご教授お願いいたします。
8
8
 
9
-
10
-
11
- ### function.php
9
+ ### header.php
10
+
11
+
12
+
13
+ ```<meta charset="UTF-8">
14
+
15
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
16
+
17
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
18
+
19
+ <title>LittlePeople</title>
20
+
21
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
22
+
23
+ <link rel="stylesheet" href="http://littlepeople.local/wp-content/themes/LittlePeople/css/yuuki.css">
24
+
25
+
26
+
27
+ <div class="container">
28
+
29
+ <div class="row">
30
+
31
+ <div class="col-sm-6">
32
+
33
+ <a href="http://littlepeople.local/">
34
+
35
+ <img class="logo" src="http://littlepeople.local/wp-content/themes/LittlePeople/imges/ltpp-logo2.png" alt="logo">
36
+
37
+ </a>
38
+
39
+ </div>
40
+
41
+ <?php
42
+
43
+ //メニューIDを取得する
44
+
45
+ $menu_name = 'global_nav';
46
+
47
+ $locations = get_nav_menu_locations();
48
+
49
+ $menu = wp_get_nav_menu_object($locations[$menu_name]);
50
+
51
+
52
+
53
+ $menu_items = wp_get_nav_menu_items($menu->term_id);
54
+
55
+ ?>
56
+
57
+ <div class="col-sm-6">
58
+
59
+ <ul class="active">
60
+
61
+ <?php foreach ($menu_items as $item) : ?>
62
+
63
+ <li>
64
+
65
+ <a class="font-style" href="<?php echo esc_attr($item->url); ?>"><?php echo esc_html($item->title); ?></a>
66
+
67
+ </li>
68
+
69
+ <?php endforeach; ?>
70
+
71
+ </ul>
72
+
73
+ </div>
74
+
75
+ </div>
76
+
77
+ </div>
78
+
79
+
80
+
81
+ <?php wp_head(); ?>
82
+
83
+ <script>
84
+
85
+ jQuery(function($) {
86
+
87
+ $('.bxslider').bxSlider();
88
+
89
+ });
90
+
91
+ jQuery(function($) {
92
+
93
+ $('.fade').slick({
94
+
95
+ dots: true,
96
+
97
+ infinite: true,
98
+
99
+ speed: 500,
100
+
101
+ fade: true,
102
+
103
+ cssEase: 'linear'
104
+
105
+ });
106
+
107
+ });
108
+
109
+ </script>
110
+
111
+
112
+
113
+
114
+
115
+
116
+
117
+
118
+
119
+
120
+
121
+ ```
122
+
123
+
124
+
125
+
126
+
127
+ ### index.php
128
+
129
+
130
+
131
+ ```ここに言語名を入力
132
+
133
+ <!DOCTYPE html>
134
+
135
+ <html lang="ja">
136
+
137
+
138
+
139
+ <head>
140
+
141
+ <?php get_header(); ?>
142
+
143
+
144
+
145
+ </head>
146
+
147
+
148
+
149
+ <body>
150
+
151
+
152
+
153
+
154
+
155
+ <div class="container">
156
+
157
+ <p>LIttlePeople</p>
158
+
159
+ <?php wp_footer(); ?>
160
+
161
+ <div class="topimage">
162
+
163
+ <ul class="bxslider">
164
+
165
+ <li><img src="http://littlepeople.local/wp-content/themes/LittlePeople/imges/yone1.jpg" /></li>
166
+
167
+ <li><img src="http://littlepeople.local/wp-content/themes/LittlePeople/imges/yone2.jpg" /></li>
168
+
169
+ <li><img src="http://littlepeople.local/wp-content/themes/LittlePeople/imges/yone3.jpg" /></li>
170
+
171
+ <li><img src="http://littlepeople.local/wp-content/themes/LittlePeople/imges/yone4.jpg" /></li>
172
+
173
+ </ul>
174
+
175
+ </div>
176
+
177
+ <div class="fade">
178
+
179
+ <div><img src="http://littlepeople.local/wp-content/themes/LittlePeople/imges/yone1.jpg" /></div>
180
+
181
+ <div><img src="http://littlepeople.local/wp-content/themes/LittlePeople/imges/yone2.jpg" /></div>
182
+
183
+ <div><img src="http://littlepeople.local/wp-content/themes/LittlePeople/imges/yone3.jpg" /></div>
184
+
185
+ <div><img src="http://littlepeople.local/wp-content/themes/LittlePeople/imges/yone4.jpg" /></div>
186
+
187
+ </div>
188
+
189
+
190
+
191
+ </div>
192
+
193
+
194
+
195
+ <div class="back"> </div>
196
+
197
+ </body>
198
+
199
+
200
+
201
+ </html>
202
+
203
+ ```
204
+
205
+
206
+
207
+ ### functions.php
12
208
 
13
209
 
14
210
 
@@ -22,82 +218,100 @@
22
218
 
23
219
  wp_register_style('slick-theme', get_template_directory_uri().'/css/slick-theme.css');
24
220
 
221
+ wp_register_style('slick', get_template_directory_uri().'/css/slick.css');
222
+
223
+ }
224
+
225
+ /* 登録したCSSファイルを読み込む
226
+
227
+ ---------------------------------------------------------- */
228
+
229
+ function add_stylesheet() {
230
+
231
+ register_stylesheet();
232
+
233
+ wp_enqueue_style('bxslider', get_template_directory_uri().'/css/jquery.bxslider.css', array(), '1.0', false);
234
+
235
+ wp_enqueue_style('slick-theme', get_template_directory_uri().'/css/slick-theme.css', array(), '1.0', false);
236
+
237
+ wp_enqueue_style('slick', get_template_directory_uri().'/css/slick.css', array(), '1.0', false);
238
+
239
+ }
240
+
241
+ /* アクションフックで関数を呼び出す
242
+
243
+ ---------------------------------------------------------- */
244
+
245
+ add_action('wp_enqueue_scripts', 'add_stylesheet');
246
+
247
+
248
+
249
+ /* jQueryを読み込む場合
250
+
251
+ ---------------------------------------------------------- */
252
+
253
+ /*外部jsファイルを登録する*/
254
+
255
+ function register_script(){
256
+
257
+ wp_register_script('bxslider-1', get_stylesheet_directory_uri().'/js/jquery.bxslider.js');
258
+
259
+ wp_register_script('slick-1', get_stylesheet_directory_uri().'/js/slick.js');
260
+
261
+ }
262
+
263
+ /* 登録したjsファイルを読み込む
264
+
265
+ ---------------------------------------------------------- */
266
+
267
+ function add_script(){
268
+
269
+ register_script();
270
+
271
+ wp_enqueue_script('bxslider-1', get_stylesheet_directory_uri().'/js/jquery.bxslider.js', array('jquery'), '1.0', false);
272
+
273
+ wp_enqueue_script('slick-1', get_stylesheet_directory_uri().'/js/slick.js', array('jquery'), '1.0', false);
274
+
275
+ }
276
+
277
+ /* アクションフックで関数を呼び出す
278
+
279
+ ---------------------------------------------------------- */
280
+
281
+ add_action('wp_print_scripts','add_script');
282
+
283
+ ```
284
+
285
+ ### 試したことは、ご指摘頂いた、functions.php内の記述を修正いたしました。
286
+
287
+
288
+
289
+
290
+
291
+ <変更前>
292
+
293
+ /*外部cssファイルを登録する*/
294
+
295
+ function register_stylesheet() {
296
+
297
+ wp_register_style('bxslider', get_template_directory_uri().'/css/jquery.bxslider.css');
298
+
299
+ wp_register_style('slick-theme', get_template_directory_uri().'/css/slick-theme.css');
300
+
25
301
  wp_register_style('slick-theme', get_template_directory_uri().'/css/slick.css');
26
302
 
27
303
  }
28
304
 
305
+ <変更後>
306
+
29
- /* 登録したCSSファイルを読み込む
307
+ /*外部cssファイルを登録する*/
30
-
31
- ---------------------------------------------------------- */
308
+
32
-
33
- function add_stylesheet() {
309
+ function register_stylesheet() {
34
-
35
- register_stylesheet();
310
+
36
-
37
- wp_enqueue_style('bxslider', get_template_directory_uri().'/css/jquery.bxslider.css', array(), '1.0', false);
311
+ wp_register_style('bxslider', get_template_directory_uri().'/css/jquery.bxslider.css');
38
-
312
+
39
- wp_enqueue_style('slick-theme', get_template_directory_uri().'/css/slick-theme.css', array(), '1.0', false);
313
+ wp_register_style('slick-theme', get_template_directory_uri().'/css/slick-theme.css');
40
-
314
+
41
- wp_enqueue_style('slick-theme', get_template_directory_uri().'/css/slick.css', array(), '1.0', false);
315
+ wp_register_style('slick', get_template_directory_uri().'/css/slick.css');
42
-
316
+
43
- }
317
+ }
44
-
45
- /* アクションフックで関数を呼び出す
46
-
47
- ---------------------------------------------------------- */
48
-
49
- add_action('wp_enqueue_scripts', 'add_stylesheet');
50
-
51
-
52
-
53
- /* jQueryを読み込む場合
54
-
55
- ---------------------------------------------------------- */
56
-
57
- /*外部jsファイルを登録する*/
58
-
59
- function register_script(){
60
-
61
- wp_register_script('bxslider-1', get_stylesheet_directory_uri().'/js/jquery.bxslider.js');
62
-
63
- wp_register_script('slick-1', get_stylesheet_directory_uri().'/js/slick.js');
64
-
65
- }
66
-
67
- /* 登録したjsファイルを読み込む
68
-
69
- ---------------------------------------------------------- */
70
-
71
- function add_script(){
72
-
73
- register_script();
74
-
75
- wp_enqueue_script('bxslider-1', get_stylesheet_directory_uri().'/js/jquery.bxslider.js', array(), '1.0', false);
76
-
77
- wp_enqueue_script('slick-1', get_stylesheet_directory_uri().'/js/slick.js', array(), '1.0', false);
78
-
79
- }
80
-
81
- /* アクションフックで関数を呼び出す
82
-
83
- ---------------------------------------------------------- */
84
-
85
- add_action('wp_print_scripts','add_script');
86
-
87
- ```
88
-
89
-
90
-
91
- ### 試したこと
92
-
93
-
94
-
95
- ここに問題に対して試したことを記載してください。
96
-
97
-
98
-
99
- ### 補足情報（FW/ツールのバージョンなど）
100
-
101
-
102
-
103
- ここにより詳細な情報を記載してください。