質問編集履歴

4

解決しました、お騒がせしました。

2021/02/27 07:42

投稿

osarusam
osarusam

スコア18

test CHANGED
File without changes
test CHANGED
@@ -293,3 +293,73 @@
293
293
  何が悪いのか分かりますでしょうか?
294
294
 
295
295
  よろしくお願い致します。
296
+
297
+
298
+
299
+ ---------------------------------
300
+
301
+ 【※2月27日 解決しました。追記です。】
302
+
303
+ jQueryのバージョンに問題はなく、読み込みの順番で動作していなかったのが原因でした。今後の参考までに記載致します。
304
+
305
+
306
+
307
+ functions.phpに下記コードを追記して、head直前に表示されるように追記していました。
308
+
309
+ ```PHP
310
+
311
+ <?php
312
+
313
+ //追加CSS JSファイル読み込み
314
+
315
+ function theme_scripts() {
316
+
317
+ wp_enqueue_style( 'add-style', get_stylesheet_directory_uri().'/css/add.css' );
318
+
319
+ wp_enqueue_style( 'style', get_stylesheet_uri());
320
+
321
+ wp_enqueue_script( 'style-js', get_template_directory_uri().'/js/style.js');
322
+
323
+ }
324
+
325
+ add_action( 'wp_enqueue_scripts', 'theme_scripts' );
326
+
327
+ ?>
328
+
329
+ ```
330
+
331
+
332
+
333
+ 実際のHTMLの表示では、なぜかWordPress本体のjQueryが一番後に読み込まれていました。
334
+
335
+ 同じ書き方をしている、同じWordPressバージョンの他のサイトでは先に読み込まれるので、謎です。
336
+
337
+ ```HTML
338
+
339
+ <head>
340
+
341
+ <script type='text/javascript' src='https://URL/wp-content/themes/テーマ名/js/style.js?ver=5.6.2' id='style-js-js'></script>
342
+
343
+ <script type='text/javascript' src='https://URL/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script>
344
+
345
+ </head>
346
+
347
+ ```
348
+
349
+
350
+
351
+ 取り急ぎ、</head>直前に同じjQuery3系をダウンロードして直書きすることで解決しました。
352
+
353
+ これでしばらく様子を見てみます。
354
+
355
+ ```HTML
356
+
357
+ <head>
358
+
359
+ <script src="https://URL/wp-content/themes/テーマ名/js/jquery-3.5.1.min.js" type="text/javaScript" charset="utf-8"></script>
360
+
361
+ <script type='text/javascript' src='https://URL/wp-content/themes/テーマ名/js/style.js?ver=5.6.2' id='style-js-js'></script>
362
+
363
+ </head>
364
+
365
+ ```

3

CSSを追記

2021/02/27 07:42

投稿

osarusam
osarusam

スコア18

test CHANGED
File without changes
test CHANGED
@@ -154,6 +154,138 @@
154
154
 
155
155
 
156
156
 
157
+ ```CSS
158
+
159
+ /* ドロップダウンメニュー
160
+
161
+ -------------------------------------*/
162
+
163
+ #navi ul ul {
164
+
165
+ display: none;
166
+
167
+ position: absolute;
168
+
169
+ width: 250px;
170
+
171
+ z-index: 100;
172
+
173
+ background-color: #006ec8;
174
+
175
+ }
176
+
177
+ #navi ul ul a {
178
+
179
+ color: #fff;
180
+
181
+ }
182
+
183
+
184
+
185
+ @media screen and (max-width: 768px){
186
+
187
+ .header {
188
+
189
+ flex-direction: column;
190
+
191
+ margin-bottom: 0;
192
+
193
+ }
194
+
195
+ .logo {
196
+
197
+ margin-right: auto;
198
+
199
+ }
200
+
201
+
202
+
203
+ nav ul {
204
+
205
+ flex-flow: row wrap;
206
+
207
+ justify-content: space-between;
208
+
209
+ }
210
+
211
+ nav li {
212
+
213
+ flex: 0 0 50%;
214
+
215
+ }
216
+
217
+
218
+
219
+ .header li {
220
+
221
+ padding-top: 0;
222
+
223
+ }
224
+
225
+ }
226
+
227
+
228
+
229
+ /*トップへ戻るボタン
230
+
231
+ -------------------------------------*/
232
+
233
+ .pagetop {
234
+
235
+ display: none;
236
+
237
+ position: fixed;
238
+
239
+ bottom: 10px;
240
+
241
+ right: 25px;
242
+
243
+ }
244
+
245
+ .pagetop a {
246
+
247
+ display: block;
248
+
249
+ background-color: #001965;
250
+
251
+ text-align: center;
252
+
253
+ color: #fff;
254
+
255
+ font-size: 12px;
256
+
257
+ text-decoration: none;
258
+
259
+ padding: 10px 15px;
260
+
261
+ }
262
+
263
+ .pagetop a:hover {
264
+
265
+ display: block;
266
+
267
+ background-color: #001965;
268
+
269
+ text-align: center;
270
+
271
+ color: #fff;
272
+
273
+ font-size: 12px;
274
+
275
+ text-decoration: none;
276
+
277
+ padding:10px 15px;
278
+
279
+ -moz-opacity: 0.8;
280
+
281
+ opacity: 0.8;
282
+
283
+ }
284
+
285
+ ```
286
+
287
+
288
+
157
289
  何かがjQuery3に対応していないのかと思いますが、どこがいけないのかが分かりません。
158
290
 
159
291
 

2

ドロップダウンメニューとページトップへ戻るHTMLを追記。

2021/02/26 08:09

投稿

osarusam
osarusam

スコア18

test CHANGED
File without changes
test CHANGED
@@ -114,6 +114,46 @@
114
114
 
115
115
 
116
116
 
117
+ ドロップダウンメニューとページトップへ戻るHTML。
118
+
119
+ ```HTML
120
+
121
+ <body>
122
+
123
+ <nav>
124
+
125
+ <div id="navi">
126
+
127
+ <?php
128
+
129
+ $args = array(
130
+
131
+ 'menu' => 'gnav',//メニュー名
132
+
133
+ 'container' => false,//タグ削除
134
+
135
+ );
136
+
137
+ wp_nav_menu($args);
138
+
139
+ ?>
140
+
141
+ </div>
142
+
143
+ </nav>
144
+
145
+
146
+
147
+ <p class="pagetop"><a href="body">▲TOP</a></p>
148
+
149
+
150
+
151
+ </body>
152
+
153
+ ```
154
+
155
+
156
+
117
157
  何かがjQuery3に対応していないのかと思いますが、どこがいけないのかが分かりません。
118
158
 
119
159
 

1

jQuery3系の読み込み位置を追記しました。

2021/02/26 08:05

投稿

osarusam
osarusam

スコア18

test CHANGED
File without changes
test CHANGED
@@ -100,6 +100,20 @@
100
100
 
101
101
  ```
102
102
 
103
+ </head>タグの前にjquery-2.1.4.min.jsを読み込んだあと、jQuery3系が読み込まれています。
104
+
105
+ ```HTML
106
+
107
+ <script type='text/javascript' src='https://URL/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script>
108
+
109
+ <script type='text/javascript' src='https://URL/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>
110
+
111
+ </head>
112
+
113
+ ```
114
+
115
+
116
+
103
117
  何かがjQuery3に対応していないのかと思いますが、どこがいけないのかが分かりません。
104
118
 
105
119