web-dev-qa-db-ja.com

Wordpressプラグインを使用しない無限スクロール

背景情報はスキップできます。

Wordpress=テーマで無限スクロールオプションを使用したかったのですが、JavaScriptのトレーニングが不十分なので、次の解決策を試しました。

https://wptheming.com/2012/03/infinite-scroll-to-wordpress-theme/

function custom_infinite_scroll_js() {
    //Code as given in the link above
}
add_action( 'wp_footer', 'custom_infinite_scroll_js', 100 );

私は上記の記事で数日を無駄にして、後ですべてが時代遅れであり、メタフィジーによるJSさえ更新されていることに気付きました。

直面した課題は：

img: The path to the ajax loader image
nextSelector: Selector for the “previous posts” link.
navSelector: Containing selector for the previous/next navigation links.
itemSelector: Selector for posts. This might be .hentry, .post, .etc
contentSelector: Containing div for your posts.
  1. 私のテーマでこれらのセレクターを見つける方法を理解できませんでした。
  2. v2のいくつかのバグ

V3を使用して、無限スクロールの最新バージョンに移動することを決定しました

V2がV3に更新されました。詳細はこちらをご覧ください。

https://infinite-scroll.com/extras.html#v2-upgrade-example

このような関数を作成しました→

function custom_infinite_scroll_js() {
if ( ! is_singular() ) { ?>
<script>
    var $container = $('.container').infiniteScroll({
    append: '.post',
    path: '.pagination__next',
    status: '.page-load-status',
    });

    // use event for v2 callback
    $container.on( 'append.infiniteScroll', function( event, response, path, items ) {
    $( items ).tooltip();
    });
</script>
<?php
}
}
add_action( 'wp_footer', 'custom_infinite_scroll_js', 100 );

しかし、実際には無限のスクロールは作成されません。誰かが私に進む方法を案内してくれますか？.

phpfunctionsjavascriptinfinite-scroll
3
The WP Intermediate

単一の記事の場合、以下の無限スクロールが解決策です

single.php

<div class="blog-article-section"> 
<?php while( have_posts() ): ?>   
<div class="blog-article">
  <?php if( have_posts() ): the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <p><?php the_content(); ?></p>
  <?php endif;  ?>
  <div class="pagination-single" >
    <div class="next_post_link"><?php previous_post_link( '%link','Previous Post' ) ?></div>
    <div class="previous_post_link"><?php next_post_link( '%link','Next Post' ) ?></div>
  </div>
</div>
<?php endwhile; ?>
</div>
<div class="blog-article1"></div>
<a href="#" class="loadArticle">Load more</a>

script.js

(function($) {
$(document).ready(function(){
    var next_count = 1;
    $('.next_post_link a').attr("id", "next"+next_count);
    var prev_count = 1;
    $('.prev_post_link a').attr("id", "prev"+prev_count);
    $(".loadArticle").click(function(e) {
        e.preventDefault();
        loadNextArticle();
    });
    $(window).scroll(function(){
        loadNextArticle();
        console.log('scroll')
    });
    function loadNextArticle(){
        var next_link = $("#next"+next_count).attr("href");
        var prev_link = $("#prev"+prev_count).attr("href");
         if(typeof(next_link) != "undefined"){
            $.ajax({
              type: "GET",
              url: next_link,
              data: {},
              async: false,
              success: function(data){
                next_count = ++next_count;
                var result = $(data);
                $('.next_post_link a', result).attr("id","next"+next_count);
                result.find('.blog-article').appendTo('.blog-article1').fadeIn('slow');
              }
            });
        } 
    }
});
}(jQuery));
1
Varsha Dhadge