web-dev-qa-db-ja.com

AjaxロードカテゴリクエリにInfinite Scrollを追加する

更新：これは解決されました。下記の更新を参照してください。

いくつかの異なるオンラインチュートリアルに従って、ドロップダウンメニューから選択したカテゴリに基づいて、Ajaxを介して投稿の表示を変更するための関数を作成することができました。

私は今、AjaxでロードされたコンテンツにInfinite Scrollを追加したいのですが、そのために何をすべきかわからないようです。

進め方についてのアイデアがあれば幸いです。前もって感謝します。

これが私のphp関数です。

function ajax_filter_posts_scripts() {
    // Register and enqueue script
    wp_register_script('afp_script', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', false, null, false);
    wp_enqueue_script('afp_script');

    // localize script
    wp_localize_script( 'afp_script', 'afp_vars', array(
        'afp_nonce' => wp_create_nonce( 'afp_nonce' ), 
        'afp_ajax_url' => admin_url( 'admin-ajax.php' ),
    ));
}

add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100);

function wp_infinitepaginate() {
    // Verify nonce
    $nonce = $_POST['afp_nonce'];   
    if ( !isset( $nonce ) || !wp_verify_nonce( $nonce, 'afp_nonce' ) )
        die ( 'Permission denied');

    if (is_front_page()) { 
        $paged = (get_query_var('page')) ? get_query_var('page') : 1;
    } else {
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    }
    $cat = $_POST['val'];
    $args = array(
        'category_name' => $cat,
        'post_status' => 'publish',
        'posts_per_page' => '4',
        'paged' => $paged,
    );

    query_posts($args);
    get_template_part('custom-loop');

    exit;
}

add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate');           // for logged in user
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate');    // if user not logged in

これが私が使っているJSです：

jQuery(document).ready(function($) {

    jQuery("#la-chooser").change(function() {
        loadArticlebyCat(this.value);
    });

    function loadArticlebyCat(cat){

        data = {
            action: 'infinite_scroll', 
            val: cat,
            afp_nonce: afp_vars.afp_nonce,
        };

        jQuery.ajax({
            url: afp_vars.afp_ajax_url,
            type:'post',
            data: data,
            success: function( data, textStatus, XMLHttpRequest ) {
                jQuery("#tb-ajax-content").html( data );
                console.log( textStatus );
                console.log( XMLHttpRequest );
            },
            error: function( MLHttpRequest, textStatus, errorThrown ) {
                console.log( MLHttpRequest );
                console.log( textStatus );
                console.log( errorThrown );
                jQuery("#tb-ajax-content").html( 'No posts found' );
            }
        });

        return false;
    }

});

カテゴリのドロップダウンフィルタは次のとおりです。

Filter by Category: <select id="la-chooser" style="padding:5px 10px;margin-left:5px;">
    <option value="">All Categories</option>
        <?php
            $categories =  get_categories();
            foreach ($categories as $category) {
                $option = '<option value="'.$category->category_nicename.'">';
                $option .= $category->cat_name;
                $option .= '</option>'."\n";
                echo $option;
            }
        ?>
</select>
loopjqueryajaxinfinite-scroll
2
mdp8593

更新...これが私のために働いた最後のコードです

これは完璧ではないかもしれませんが、間違いなく私のためにうまくいっているようです。もしあれば、改善のための提案を自由に追加してください。

JSコード 

jQuery(document).ready(function($) {

    var count = 2;

    jQuery("#la-chooser").change(function() {
        loadArticlebyCat(this.value);
    });

    function loadArticlebyCat(cat){

        data = {
            action: 'infinite_scroll', 
            val: cat,
            afp_nonce: afp_vars.afp_nonce,
        };

        jQuery.ajax({
            url: afp_vars.afp_ajax_url,
            type:'post',
            data: data,
            success: function( data, textStatus, XMLHttpRequest ) {
                jQuery("#tb-ajax-content").html( data );
                jQuery('#infinitBtn span').html('Load More Entries');
                console.log( textStatus );
                console.log( XMLHttpRequest );
                count = 2;
            },
            error: function( MLHttpRequest, textStatus, errorThrown ) {
                console.log( MLHttpRequest );
                console.log( textStatus );
                console.log( errorThrown );
                jQuery("#tb-ajax-content").html( 'No posts found' );
            }
        });

        return false;
    }

    jQuery('#infinitBtn').click(function(){
        loadArticle(count);
        count++;
        return false;
    });

    function loadArticle(pageNumber) {

        var cat = jQuery("#la-chooser").val();

        jQuery.ajax({
            url: afp_vars.afp_ajax_url,
            type:'POST',
            data: "action=infinite_scroll&page_no="+ pageNumber + "&loop_file=loop&val="+ cat +"&afp_nonce="+afp_vars.afp_nonce,
            success: function(html) {
                if(html=="") {
                    jQuery('#infinitBtn span').html('All Entries Loaded');
                } else {
                    jQuery('#infinitBtn span').html('Load More Entries');
                }
                jQuery("#tb-ajax-content").append(html);
            }
        });

        return false;
    }

});

ワードプレスの機能

私はこれを子テーマで使っているので、子テーマを使わないのであればget_stylesheet_directory_uriの代わりにget template directory uriを使うことをお勧めします。

function ajax_filter_posts_scripts() {

    // Register and enqueue script
    wp_register_script('afp_script', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', false, null, false);
    wp_enqueue_script('afp_script');

    // localize script
    wp_localize_script( 'afp_script', 'afp_vars', array(
        'afp_nonce' => wp_create_nonce( 'afp_nonce' ), 
        'afp_ajax_url' => admin_url( 'admin-ajax.php' ),
    ));

}

add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100);

function wp_infinitepaginate() {

    // Verify nonce
    $nonce = $_POST['afp_nonce'];   
    if ( !isset( $nonce ) || !wp_verify_nonce( $nonce, 'afp_nonce' ) )
        die ( 'Permission denied');

    $paged = $_POST['page_no'];
    $cat = $_POST['val'];
    $args = array(
        'category_name' => $cat,
        'post_status' => 'publish',
        'posts_per_page' => '6',
        'paged' => $paged,
    );

    query_posts($args);
    get_template_part('custom-loop');
    wp_reset_query();

    exit;
}

add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate');           // for logged in user
add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate');    // if user not logged in

ドロップダウンカテゴリセレクタ付きメインループコード 

<div class="latest-article-chooser clearfix">
    <h1>Latest Blog Posts</h1>
    <p>
        <span>Filter Posts by Category:</span> <select id="la-chooser">
            <option value="">All Categories</option>
                <?php
                    $categories =  get_categories();
                    foreach ($categories as $category) {
                        $option = '<option value="'.$category->category_nicename.'">';
                        $option .= $category->cat_name;
                        $option .= ' ('.$category->count.')';
                        $option .= '</option>'."\n";
                        echo $option;
                    }
                ?>
        </select>
    </p>
</div>

<div id="tb-ajax-content">

<?php
    if (is_front_page()) { 
        $paged = (get_query_var('page')) ? get_query_var('page') : 1;
    } else {
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    }
    $count = 1;
    query_posts(array(
        'post_status' => 'publish',
        'posts_per_page' => '6',
        'paged' => $paged,
    ));

    get_template_part('custom-loop');
?>

</div>

<div class="post-clear"></div>

<a class="button sc blue" href="#" id="infinitBtn"><span>Load More Entries</span></a>

カスタムループファイル（custom-loop.php）

ここにはテーマ固有の機能がいくつか含まれているので、それらをあなた自身の機能（またはネイティブのWordPress機能）と置き換えたいと思います。

<?php 
    $count = 1;
    if ( have_posts() ) : while ( have_posts() ) : the_post(); 
?>

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">

        <div class="entry-wrap">

            <div class="entry-media">
                <?php 
                    if ( tb_option('medium_thumb') ) { 
                        themebeagle_medium_thumbnail(); 
                    } else {
                        themebeagle_large_thumbnail(); 
                    }
                ?>
            </div>

            <div class="entry-container">

                <header class="entry-header">
                    <?php 
                        themebeagle_entry_title();
                        themebeagle_entry_meta(); 
                    ?>
                </header><!-- .entry-header -->

                <div class="entry-content" itemprop="text">
                    <?php themebeagle_excerpt(); ?>
                </div><!-- .entry-content -->

            </div> <!-- .entry-container -->

            <footer class="entry-footer">
                <?php themebeagle_entry_meta_bottom(); ?>
            </footer><!-- .entry-footer -->

        </div> <!-- .entry-wrap -->

    </article> <!-- article.post -->

<?php 
    $count = $count + 1; 
    endwhile; 
    endif; 
    wp_reset_query();
?>
3
mdp8593