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

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

ただいまの
回答率

88.77%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 3
  • VIEW 1,015

musashidayo

score 38

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

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

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

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

function responsive_pagination($pages = '', $range = 4)
{
    $showitems = ($range * 2) + 1;

    global $paged;
    if (empty($paged)) $paged = 1;

    //ページ情報の取得
    if ($pages == '') {
        global $wp_query;
        $pages = $wp_query->max_num_pages;
        if (!$pages) {
            $pages = 1;
        }
    }

      if (1 != $pages) {
        echo '<ul class="pagination" role="menubar" aria-label="Pagination">';
        //先頭へ
        if ($paged !== 1) {
            echo '<li class="first"><a href="'.get_pagenum_link(1).'"><span>First</span></a></li>';
        }
        //1つ戻る
        if ($paged !== 1) {
            echo '<li class="previous"><a href="'.get_pagenum_link($paged - 1).'"><span>Previous</span></a></li>';
        }
        //番号つきページ送りボタン
        for($i=1; $i <= $pages; $i++) {
              if(1 != $pages &&(!($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems)) {
                echo ($paged == $i)? '<li class="current"><a>'.$i.'</a></li>':'<li><a href="'.get_pagenum_link($i).'" class="inactive" >'.$i.'</a></li>';
              }
        }
        //1つ進む
        if ($paged !== (int)$pages) {
            echo '<li class="next"><a href="'.get_pagenum_link($paged + 1).'"><span>Next</span></a></li>';
        }
        //最後尾へ
        if ($paged !== (int)$pages) {
            echo '<li class="last"><a href="'.get_pagenum_link($pages).'"><span>Last</span></a></li>';
        }
        echo '</ul>';
      }
}
<?php
    $paged = get_query_var('paged');
    $args = array(
      'posts_per_page' => 10,
      'paged' => $paged,
      'orderby' => 'post_date',
      'order' => 'DESC',
      'post_type' => 'post',
      'post_status' => 'publish'
    );
  };
  //ここに絞り込みの結果を出力するphp
  $wp_query_time = new WP_Query($args);
  if ($wp_query_time !== false) {
    if ( $wp_query_time->have_posts() ) :
?>
      <ul class="wpp-list">
<?php
      while ( $wp_query_time->have_posts() ) :
        $wp_query_time->the_post();
?>
        <li class="wpp-post">
          <div class="post_list">
            <div class="post_list_left">
              <?php
                if (has_post_thumbnail() ){
              ?>
                <a href="<?php echo get_permalink(); ?>">
                  <?php the_post_thumbnail(); ?>
                </a>
              <?php
                }
              ?>
            </div>
            <div class="post_list_right">
              <p>
                <a href="<?php echo get_permalink(); ?>">
                  <?php echo get_the_title(); ?>
                </a>
              </p>
              <p>
                <?php the_excerpt(); ?>
              </p>
              <p>
                更新日:<?php echo get_the_date(); ?>
              </p>
            </div>
          </div>
        </li>
<?php
      endwhile;
?>
      <?php
      if (function_exists('responsive_pagination')) {
          $max_num_pages = $wp_query_time->max_num_pages;
          responsive_pagination($max_num_pages);
      }
      ?>
<?php
      wp_reset_postdata();
?>
    </ul>

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

※追記
こちらを参考に

$(function (){
    //infinite scroll
    var prev_data_selector = '.previous a'; //「前へ」リンクのaタグのセレクタ
    var next_data_selector = '.next a'; //「次へ」リンクのaタグのセレクタ
    var itemWrapperSelector = '.wpp-list_main'; //無限ローディングのwrapperとなるタグのセレクタ
    var itemWrapper = $(itemWrapperSelector);
    var itemInnerSelector = 'li.wpp-post'; //無限ローディングの本体(本文)となるタグのセレクタ
    var itemPagerSelector = '.pagination'; //ページャーのセレクタ
    var itemPager = $(itemPagerSelector);
    var prev_data_url;
    var next_data_url;
    var next_data_cache;
    var prev_data_cache;
    var last_scroll = 0;
    var is_loading = 0;

    if(itemWrapper[0]) {
        prev_data_url = $(prev_data_selector).attr('href');
        next_data_url = $(next_data_selector).attr('href');
        fadeInItem(true);
        initPaginator();
        loadPrevious();
        // if we have enough room, load the next batch
        if ($(window).height()>itemWrapper.height()) {
          if (next_data_url!== '') {
            loadFollowing();
          }
        }
    }

    function initPaginator() {
        $(document).off( 'scroll');
      $(document).on( 'scroll', function(){
        // handle scroll events to update content
        var scroll_pos = $(window).scrollTop();
        if (scroll_pos >= 0.9*($(document).height() - $(window).height())) {
          if (is_loading===0) {
              loadFollowing();
          }
        }
        if (scroll_pos <= 0) {
          if (is_loading===0) {
              loadPrevious();
          }
        }
        // Adjust the URL based on the top item shown
        // for reasonable amounts of items
        if (Math.abs(scroll_pos - last_scroll)>$(window).height()*0.1) {
          last_scroll = scroll_pos;
          $(itemInnerSelector).each(function() {
            if (mostlyVisible(this)) {
              history.replaceState(null, null, $(this).attr('data-url'));
              return(false);
            }
          });
        }
      });
    }


    function loadFollowing() {
      if (next_data_url){
        is_loading = 1; // note: this will break when the server doesn't respond
        itemPager.hide();
        if (next_data_cache) {
          showFollowing(next_data_cache);
          is_loading = 0;
        } else {
            $.ajax({
                url: next_data_url,
                type: 'get',
                dataType: 'html',
            }).success(function(data){
                showFollowing(data);
                    is_loading = 0;
            });
        }
      }
    }
        function showFollowing(data) {
        var out_html = $($.parseHTML(data));
          itemWrapper.append(out_html.find(itemWrapperSelector).filter(itemWrapperSelector)[0].innerHTML);
          initPaginator();
          next_data_url = out_html.find(next_data_selector).filter(next_data_selector).attr('href');
          next_data_cache = false;
            $.ajax({
                url: next_data_url,
                type: 'get',
                dataType: 'html',
            }).success(function(preview_data){
                next_data_cache = preview_data;
            });
        }

    function loadPrevious() {
      if (prev_data_url){
        is_loading = 1; // note: this will break when the server doesn't respond
        itemPager.hide();
        if (prev_data_cache) {
          showPrevious(prev_data_cache);
          is_loading = 0;
        } else {
            $.ajax({
                url: prev_data_url,
                type: 'get',
                dataType: 'html',
            }).success(function(data){
                showPrevious(data);
                    is_loading = 0;
            });
        }
      }
    }
        function showPrevious(data) {
        var out_html = $($.parseHTML(data));
          itemWrapper.prepend(out_html.find(itemWrapperSelector).filter(itemWrapperSelector)[0].innerHTML);
          initPaginator();
          var item_height = $(itemInnerSelector + ':first').height();
          window.scrollTo(0, $(window).scrollTop()+item_height); // adjust scroll
          prev_data_url = out_html.find(prev_data_selector).filter(prev_data_selector).attr('href');
          prev_data_cache = false;
            $.ajax({
                url: prev_data_url,
                type: 'get',
                dataType: 'html',
            }).success(function(preview_data){
                prev_data_cache = preview_data;
            });
        }

    function mostlyVisible(element) {
      var scroll_pos = $(window).scrollTop();
      var window_height = $(window).height();
      var el_top = $(element).offset().top;
      var el_height = $(element).height();
      var el_bottom = el_top + el_height;
      return ((el_bottom - el_height*0.25 > scroll_pos) && (el_top < (scroll_pos+0.5*window_height)));
    }


    });


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • reosablo

    2018/09/18 00:27

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

    キャンセル

  • musashidayo

    2018/09/21 14:01 編集

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

    キャンセル

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

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

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る