質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

578閲覧

無限スクロールでパーマリンクも変更したい

musashidayo

総合スコア53

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

3クリップ

投稿2018/09/05 09:46

編集2022/01/12 10:55

wordpressで作っているサイトで無限スクロールを実装しようと試みています。
しかし元々ページネーションで表示しているページでページ遷移すると、http://hoge.com/page/2/のように切り替わるように無限スクロールでもやりたいのですが、パーマリンクが変わりません。
また、スクロールで1ページ目の位置まで戻るとパーマリンクも1ページ目を表すものにしたいです。

参考にしているサイトはこちらです(http://www.koikikukan.com/archives/2014/02/18-015555.php)
こちらのデモ例ですと、静的なhtmlを一部追加する構造になっているのですが、wordpressのページネーションだと動的にページそのもののリンクが生成されてしまうので、これをどう落とし込めば良いのかわかりません。

wordpressのプラグインも試してみたのですが、ただ単に無限スクロールができるようになるだけなので、理想の機能ではありませんでした。

現在のページネーションを出力しているコードは以下になります。

functions

1function responsive_pagination($pages = '', $range = 4) 2{ 3 $showitems = ($range * 2) + 1; 4 5 global $paged; 6 if (empty($paged)) $paged = 1; 7 8 //ページ情報の取得 9 if ($pages == '') { 10 global $wp_query; 11 $pages = $wp_query->max_num_pages; 12 if (!$pages) { 13 $pages = 1; 14 } 15 } 16 17 if (1 != $pages) { 18 echo '<ul class="pagination" role="menubar" aria-label="Pagination">'; 19 //先頭へ 20 if ($paged !== 1) { 21 echo '<li class="first"><a href="'.get_pagenum_link(1).'"><span>First</span></a></li>'; 22 } 23 //1つ戻る 24 if ($paged !== 1) { 25 echo '<li class="previous"><a href="'.get_pagenum_link($paged - 1).'"><span>Previous</span></a></li>'; 26 } 27 //番号つきページ送りボタン 28 for($i=1; $i <= $pages; $i++) { 29 if(1 != $pages &&(!($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems)) { 30 echo ($paged == $i)? '<li class="current"><a>'.$i.'</a></li>':'<li><a href="'.get_pagenum_link($i).'" class="inactive" >'.$i.'</a></li>'; 31 } 32 } 33 //1つ進む 34 if ($paged !== (int)$pages) { 35 echo '<li class="next"><a href="'.get_pagenum_link($paged + 1).'"><span>Next</span></a></li>'; 36 } 37 //最後尾へ 38 if ($paged !== (int)$pages) { 39 echo '<li class="last"><a href="'.get_pagenum_link($pages).'"><span>Last</span></a></li>'; 40 } 41 echo '</ul>'; 42 } 43}

html

1<?php 2 $paged = get_query_var('paged'); 3 $args = array( 4 'posts_per_page' => 10, 5 'paged' => $paged, 6 'orderby' => 'post_date', 7 'order' => 'DESC', 8 'post_type' => 'post', 9 'post_status' => 'publish' 10 ); 11 }; 12 //ここに絞り込みの結果を出力するphp 13 $wp_query_time = new WP_Query($args); 14 if ($wp_query_time !== false) { 15 if ( $wp_query_time->have_posts() ) : 16?> 17 <ul class="wpp-list"> 18<?php 19 while ( $wp_query_time->have_posts() ) : 20 $wp_query_time->the_post(); 21?> 22 <li class="wpp-post"> 23 <div class="post_list"> 24 <div class="post_list_left"> 25 <?php 26 if (has_post_thumbnail() ){ 27 ?> 28 <a href="<?php echo get_permalink(); ?>"> 29 <?php the_post_thumbnail(); ?> 30 </a> 31 <?php 32 } 33 ?> 34 </div> 35 <div class="post_list_right"> 36 <p> 37 <a href="<?php echo get_permalink(); ?>"> 38 <?php echo get_the_title(); ?> 39 </a> 40 </p> 41 <p> 42 <?php the_excerpt(); ?> 43 </p> 44 <p> 45 更新日:<?php echo get_the_date(); ?> 46 </p> 47 </div> 48 </div> 49 </li> 50<?php 51 endwhile; 52?> 53 <?php 54 if (function_exists('responsive_pagination')) { 55 $max_num_pages = $wp_query_time->max_num_pages; 56 responsive_pagination($max_num_pages); 57 } 58 ?> 59<?php 60 wp_reset_postdata(); 61?> 62 </ul>

※追記
色々探していたところ、こちらのテーマの動きを実装したいです。

※追記
こちらを参考に

js

1$(function (){ 2 //infinite scroll 3 var prev_data_selector = '.previous a'; //「前へ」リンクのaタグのセレクタ 4 var next_data_selector = '.next a'; //「次へ」リンクのaタグのセレクタ 5 var itemWrapperSelector = '.wpp-list_main'; //無限ローディングのwrapperとなるタグのセレクタ 6 var itemWrapper = $(itemWrapperSelector); 7 var itemInnerSelector = 'li.wpp-post'; //無限ローディングの本体(本文)となるタグのセレクタ 8 var itemPagerSelector = '.pagination'; //ページャーのセレクタ 9 var itemPager = $(itemPagerSelector); 10 var prev_data_url; 11 var next_data_url; 12 var next_data_cache; 13 var prev_data_cache; 14 var last_scroll = 0; 15 var is_loading = 0; 16 17 if(itemWrapper[0]) { 18 prev_data_url = $(prev_data_selector).attr('href'); 19 next_data_url = $(next_data_selector).attr('href'); 20 fadeInItem(true); 21 initPaginator(); 22 loadPrevious(); 23 // if we have enough room, load the next batch 24 if ($(window).height()>itemWrapper.height()) { 25 if (next_data_url!== '') { 26 loadFollowing(); 27 } 28 } 29 } 30 31 function initPaginator() { 32 $(document).off( 'scroll'); 33 $(document).on( 'scroll', function(){ 34 // handle scroll events to update content 35 var scroll_pos = $(window).scrollTop(); 36 if (scroll_pos >= 0.9*($(document).height() - $(window).height())) { 37 if (is_loading===0) { 38 loadFollowing(); 39 } 40 } 41 if (scroll_pos <= 0) { 42 if (is_loading===0) { 43 loadPrevious(); 44 } 45 } 46 // Adjust the URL based on the top item shown 47 // for reasonable amounts of items 48 if (Math.abs(scroll_pos - last_scroll)>$(window).height()*0.1) { 49 last_scroll = scroll_pos; 50 $(itemInnerSelector).each(function() { 51 if (mostlyVisible(this)) { 52 history.replaceState(null, null, $(this).attr('data-url')); 53 return(false); 54 } 55 }); 56 } 57 }); 58 } 59 60 61 function loadFollowing() { 62 if (next_data_url){ 63 is_loading = 1; // note: this will break when the server doesn't respond 64 itemPager.hide(); 65 if (next_data_cache) { 66 showFollowing(next_data_cache); 67 is_loading = 0; 68 } else { 69 $.ajax({ 70 url: next_data_url, 71 type: 'get', 72 dataType: 'html', 73 }).success(function(data){ 74 showFollowing(data); 75 is_loading = 0; 76 }); 77 } 78 } 79 } 80 function showFollowing(data) { 81 var out_html = $($.parseHTML(data)); 82 itemWrapper.append(out_html.find(itemWrapperSelector).filter(itemWrapperSelector)[0].innerHTML); 83 initPaginator(); 84 next_data_url = out_html.find(next_data_selector).filter(next_data_selector).attr('href'); 85 next_data_cache = false; 86 $.ajax({ 87 url: next_data_url, 88 type: 'get', 89 dataType: 'html', 90 }).success(function(preview_data){ 91 next_data_cache = preview_data; 92 }); 93 } 94 95 function loadPrevious() { 96 if (prev_data_url){ 97 is_loading = 1; // note: this will break when the server doesn't respond 98 itemPager.hide(); 99 if (prev_data_cache) { 100 showPrevious(prev_data_cache); 101 is_loading = 0; 102 } else { 103 $.ajax({ 104 url: prev_data_url, 105 type: 'get', 106 dataType: 'html', 107 }).success(function(data){ 108 showPrevious(data); 109 is_loading = 0; 110 }); 111 } 112 } 113 } 114 function showPrevious(data) { 115 var out_html = $($.parseHTML(data)); 116 itemWrapper.prepend(out_html.find(itemWrapperSelector).filter(itemWrapperSelector)[0].innerHTML); 117 initPaginator(); 118 var item_height = $(itemInnerSelector + ':first').height(); 119 window.scrollTo(0, $(window).scrollTop()+item_height); // adjust scroll 120 prev_data_url = out_html.find(prev_data_selector).filter(prev_data_selector).attr('href'); 121 prev_data_cache = false; 122 $.ajax({ 123 url: prev_data_url, 124 type: 'get', 125 dataType: 'html', 126 }).success(function(preview_data){ 127 prev_data_cache = preview_data; 128 }); 129 } 130 131 function mostlyVisible(element) { 132 var scroll_pos = $(window).scrollTop(); 133 var window_height = $(window).height(); 134 var el_top = $(element).offset().top; 135 var el_height = $(element).height(); 136 var el_bottom = el_top + el_height; 137 return ((el_bottom - el_height*0.25 > scroll_pos) && (el_top < (scroll_pos+0.5*window_height))); 138 } 139 140 141 });

上記のコードを追加してみたところ、fadeInItemが未定義とのエラーが出てしまいました

aaaaaaaa👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

reosablo

2018/09/17 15:27

`fadeInItem(true);`は機能上、無限スクロールとは無関係のように見えます。その行を削除するとどうなるでしょうか?
musashidayo

2018/09/21 05:06 編集

こちらの行を削除すると、そもそもページネーションが最初は表示されているのですが、スクロールで消えたきり表示されなくなりました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問