質問編集履歴

4

タグの追加

2018/09/11 02:11

投稿

musashidayo
musashidayo

スコア53

test CHANGED
File without changes
test CHANGED
File without changes

3

誤字

2018/09/11 02:11

投稿

musashidayo
musashidayo

スコア53

test CHANGED
File without changes
test CHANGED
@@ -540,4 +540,4 @@
540
540
 
541
541
  ```
542
542
 
543
- 上記のコードを追加してみたところ、パーマリンク変更はうまくいくのですが、無限スクロル(前ページのPOSTの下に追加される形)できせんでした
543
+ 上記のコードを追加してみたところ、fadeInItemが未定義とエラーが出てしいました

2

追加のコード

2018/09/10 06:28

投稿

musashidayo
musashidayo

スコア53

test CHANGED
File without changes
test CHANGED
@@ -247,3 +247,297 @@
247
247
  ※追記
248
248
 
249
249
  色々探していたところ、[こちら](https://ja.wordpress.org/themes/minnow/)のテーマの動きを実装したいです。
250
+
251
+
252
+
253
+ ※追記
254
+
255
+ [こちら](http://shinnoji.main.jp/jimen75th/blog/171)を参考に
256
+
257
+ ```js
258
+
259
+ $(function (){
260
+
261
+ //infinite scroll
262
+
263
+ var prev_data_selector = '.previous a'; //「前へ」リンクのaタグのセレクタ
264
+
265
+ var next_data_selector = '.next a'; //「次へ」リンクのaタグのセレクタ
266
+
267
+ var itemWrapperSelector = '.wpp-list_main'; //無限ローディングのwrapperとなるタグのセレクタ
268
+
269
+ var itemWrapper = $(itemWrapperSelector);
270
+
271
+ var itemInnerSelector = 'li.wpp-post'; //無限ローディングの本体(本文)となるタグのセレクタ
272
+
273
+ var itemPagerSelector = '.pagination'; //ページャーのセレクタ
274
+
275
+ var itemPager = $(itemPagerSelector);
276
+
277
+ var prev_data_url;
278
+
279
+ var next_data_url;
280
+
281
+ var next_data_cache;
282
+
283
+ var prev_data_cache;
284
+
285
+ var last_scroll = 0;
286
+
287
+ var is_loading = 0;
288
+
289
+
290
+
291
+ if(itemWrapper[0]) {
292
+
293
+ prev_data_url = $(prev_data_selector).attr('href');
294
+
295
+ next_data_url = $(next_data_selector).attr('href');
296
+
297
+ fadeInItem(true);
298
+
299
+ initPaginator();
300
+
301
+ loadPrevious();
302
+
303
+ // if we have enough room, load the next batch
304
+
305
+ if ($(window).height()>itemWrapper.height()) {
306
+
307
+ if (next_data_url!== '') {
308
+
309
+ loadFollowing();
310
+
311
+ }
312
+
313
+ }
314
+
315
+ }
316
+
317
+
318
+
319
+ function initPaginator() {
320
+
321
+ $(document).off( 'scroll');
322
+
323
+ $(document).on( 'scroll', function(){
324
+
325
+ // handle scroll events to update content
326
+
327
+ var scroll_pos = $(window).scrollTop();
328
+
329
+ if (scroll_pos >= 0.9*($(document).height() - $(window).height())) {
330
+
331
+ if (is_loading===0) {
332
+
333
+ loadFollowing();
334
+
335
+ }
336
+
337
+ }
338
+
339
+ if (scroll_pos <= 0) {
340
+
341
+ if (is_loading===0) {
342
+
343
+ loadPrevious();
344
+
345
+ }
346
+
347
+ }
348
+
349
+ // Adjust the URL based on the top item shown
350
+
351
+ // for reasonable amounts of items
352
+
353
+ if (Math.abs(scroll_pos - last_scroll)>$(window).height()*0.1) {
354
+
355
+ last_scroll = scroll_pos;
356
+
357
+ $(itemInnerSelector).each(function() {
358
+
359
+ if (mostlyVisible(this)) {
360
+
361
+ history.replaceState(null, null, $(this).attr('data-url'));
362
+
363
+ return(false);
364
+
365
+ }
366
+
367
+ });
368
+
369
+ }
370
+
371
+ });
372
+
373
+ }
374
+
375
+
376
+
377
+
378
+
379
+ function loadFollowing() {
380
+
381
+ if (next_data_url){
382
+
383
+ is_loading = 1; // note: this will break when the server doesn't respond
384
+
385
+ itemPager.hide();
386
+
387
+ if (next_data_cache) {
388
+
389
+ showFollowing(next_data_cache);
390
+
391
+ is_loading = 0;
392
+
393
+ } else {
394
+
395
+ $.ajax({
396
+
397
+ url: next_data_url,
398
+
399
+ type: 'get',
400
+
401
+ dataType: 'html',
402
+
403
+ }).success(function(data){
404
+
405
+ showFollowing(data);
406
+
407
+ is_loading = 0;
408
+
409
+ });
410
+
411
+ }
412
+
413
+ }
414
+
415
+ }
416
+
417
+ function showFollowing(data) {
418
+
419
+ var out_html = $($.parseHTML(data));
420
+
421
+ itemWrapper.append(out_html.find(itemWrapperSelector).filter(itemWrapperSelector)[0].innerHTML);
422
+
423
+ initPaginator();
424
+
425
+ next_data_url = out_html.find(next_data_selector).filter(next_data_selector).attr('href');
426
+
427
+ next_data_cache = false;
428
+
429
+ $.ajax({
430
+
431
+ url: next_data_url,
432
+
433
+ type: 'get',
434
+
435
+ dataType: 'html',
436
+
437
+ }).success(function(preview_data){
438
+
439
+ next_data_cache = preview_data;
440
+
441
+ });
442
+
443
+ }
444
+
445
+
446
+
447
+ function loadPrevious() {
448
+
449
+ if (prev_data_url){
450
+
451
+ is_loading = 1; // note: this will break when the server doesn't respond
452
+
453
+ itemPager.hide();
454
+
455
+ if (prev_data_cache) {
456
+
457
+ showPrevious(prev_data_cache);
458
+
459
+ is_loading = 0;
460
+
461
+ } else {
462
+
463
+ $.ajax({
464
+
465
+ url: prev_data_url,
466
+
467
+ type: 'get',
468
+
469
+ dataType: 'html',
470
+
471
+ }).success(function(data){
472
+
473
+ showPrevious(data);
474
+
475
+ is_loading = 0;
476
+
477
+ });
478
+
479
+ }
480
+
481
+ }
482
+
483
+ }
484
+
485
+ function showPrevious(data) {
486
+
487
+ var out_html = $($.parseHTML(data));
488
+
489
+ itemWrapper.prepend(out_html.find(itemWrapperSelector).filter(itemWrapperSelector)[0].innerHTML);
490
+
491
+ initPaginator();
492
+
493
+ var item_height = $(itemInnerSelector + ':first').height();
494
+
495
+ window.scrollTo(0, $(window).scrollTop()+item_height); // adjust scroll
496
+
497
+ prev_data_url = out_html.find(prev_data_selector).filter(prev_data_selector).attr('href');
498
+
499
+ prev_data_cache = false;
500
+
501
+ $.ajax({
502
+
503
+ url: prev_data_url,
504
+
505
+ type: 'get',
506
+
507
+ dataType: 'html',
508
+
509
+ }).success(function(preview_data){
510
+
511
+ prev_data_cache = preview_data;
512
+
513
+ });
514
+
515
+ }
516
+
517
+
518
+
519
+ function mostlyVisible(element) {
520
+
521
+ var scroll_pos = $(window).scrollTop();
522
+
523
+ var window_height = $(window).height();
524
+
525
+ var el_top = $(element).offset().top;
526
+
527
+ var el_height = $(element).height();
528
+
529
+ var el_bottom = el_top + el_height;
530
+
531
+ return ((el_bottom - el_height*0.25 > scroll_pos) && (el_top < (scroll_pos+0.5*window_height)));
532
+
533
+ }
534
+
535
+
536
+
537
+
538
+
539
+ });
540
+
541
+ ```
542
+
543
+ 上記のコードを追加してみたところ、パーマリンクの変更はうまくいくのですが、無限スクロール(前ページのPOSTの下に追加される形)ができませんでした

1

参考サイトの追加

2018/09/10 06:12

投稿

musashidayo
musashidayo

スコア53

test CHANGED
File without changes
test CHANGED
@@ -239,3 +239,11 @@
239
239
  </ul>
240
240
 
241
241
  ```
242
+
243
+
244
+
245
+
246
+
247
+ ※追記
248
+
249
+ 色々探していたところ、[こちら](https://ja.wordpress.org/themes/minnow/)のテーマの動きを実装したいです。