使用分页进行Wordpress延迟加载 [英] Wordpress Lazy Loading using Pagination

问题描述

im用WP_Query分页进行延迟加载它工作正常，但是内容到达终点时会自我复制当我搜索特定结果时，它会正确显示结果但是之后，它仍然想要进行延迟加载，因此它会加载随机数据

im doing a lazy loading with WP_Query Pagination it's working fine but the content duplicate itself when it reaches it's end and when i search for a specific result it shows the result correctly but after that it still want to do lazy load so it load random data

这是我的代码

lazy-load.php

lazy-load.php

    <?php 

add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');

function load_posts_by_ajax_callback(){
    // check_ajax_referer( 'load_more_posts', 'security' );
    $paged = $_POST['page'];
    $args = array(
        'post_type' => 'unit',
        'post_status' => 'publish',
        'posts_per_page' => 4,
        'paged' => $paged
    );
    if ( !empty($_POST['taxonomy']) &&  !empty($_POST['term_id']) ){
        $args['tax_query'] = array (
            array(
                'taxonomy' => $_POST['taxonomy'],
                'terms'    => $_POST['term_id'],
            ),
        );
    }
    if ( ! is_null($_POST['offer']) ) {
        $args['meta_query'][] = array(
            'key'    => 'WAKEB_hot',
            'value'  => '1',
            'compare' => '=',
        );
    }
    if ( ! is_null($_POST['purpose']) ) {
        $args['meta_query'][] = array(
            'key'    => 'WAKEB_vacation',
            'value'  => '1',
            'compare' => '=',
        );
    }
    if (!empty($_POST['project'])){
        $args['meta_query'] = array (
            array(
                'key' => 'WAKEB_project',
                'value' => $_POST['project'],
                'compare' => '='
            ),
        );
    }
    // start buffer 
    ob_start();
    $query = new WP_Query( $args );
    if ( $query->have_posts() ) : 
        while($query->have_posts()){ $query->the_post(); 
            get_template_part("template-parts/units"); 
        } 
    endif; wp_reset_postdata();
    // start buffered data in data variable
    $data = ob_get_clean();
    wp_send_json_success( $data );
    wp_die();
}

add_action('wp_ajax_nopriv_load_projects_by_ajax', 'load_projects_by_ajax_callback');
add_action('wp_ajax_load_projects_by_ajax', 'load_projects_by_ajax_callback');

function load_projects_by_ajax_callback(){
    // check_ajax_referer( 'load_more_posts', 'security' );
    $paged = $_POST['page'];
    $args = array(
        'post_type' => 'project',
        'post_status' => 'publish',
        'posts_per_page' => 4,
        'paged' => $paged
    );
    if ( ! is_null($_POST['ptype']) ) {
        $args['tax_query'] = array (
            array(
                'taxonomy' => 'pptypes',
                'field'    => 'slug',
                'terms'    => $_POST['ptype'],
            ),
        );
    }
    if ( !empty($_POST['taxonomy']) &&  !empty($_POST['term_id']) ){
        $args['tax_query'] = array (
            array(
                'taxonomy' => $_POST['taxonomy'],
                'terms'    => $_POST['term_id'],
            ),
        );
    }
    // start buffer 
    ob_start();
    $query = new WP_Query( $args );
    if ( $query->have_posts() ) :
        while($query->have_posts()){ $query->the_post();
            get_template_part("template-parts/projects");
        }
    endif; wp_reset_postdata();
    // start buffered data in data variable
    $data = ob_get_clean();
    wp_send_json_success( $data );
    wp_die();
}

lazy-load.js

lazy-load.js

    $('.unit-terms li a').each( function() {
    if ( this.href == window.location.href ) {
        $(this).parent().addClass('current');
    }
});

main.js

    (function($){
  $('.isotope a').on('click', function(){
    $('.isotope .active').removeClass('active');
    $(this).addClass('active');
    var filter = $(this).data('filter');
    if(filter=='*'){
    $('.property').show();
  }else{
    $('.property').not(filter).hide();
    $('.property'+filter).show();
  }
  return false;
  });
})(jQuery);

那我怎么使它工作呢?我不知道我在这里做什么错

so how can i make it work? i don't know what im doing wrong here

这是整个项目的回购链接 https://github.com/Ov3rControl/hoomerz

Here is the repo link for the full project https://github.com/Ov3rControl/hoomerz

推荐答案

好，现在我明白您的意思了；)在惰性加载期间，您仅发送给后端页号，而没有过滤器和/或搜索字符串的当前状态.因此，它仅基于页码发送所有posttype项目.您还应该发送过滤器的当前状态

ok, now I understand what you meant ;) During lazy load you send to backend only page number without current state of filters and / or search string. So it sends all posttype items based on page number only. You should send also current state of filters

main.js:将其添加到页面加载后功能中:

main.js: add this to your after-page-load function:

var currentUrl =新的URL(window.location.href);var searchQuery = urlObj.searchParams.get("k");

var currentUrl = new URL(window.location.href); var searchQuery = urlObj.searchParams.get("k");

lazy-load.js:将搜索参数添加到发布到后端的数据中

lazy-load.js: add search param to data posted to backend

var data = {
    'action': 'load_posts_by_ajax',
    'page': page,
    'search: searchQuery // new field
};

lazy-load.php:将搜索参数添加到WP_Query

lazy-load.php: add search param to WP_Query

if ( isset($_POST['search']) && !empty($_POST['search']) ){ // new section
    $args['s'] = sanitize_text_field($_POST['search']);
}

这是文本搜索过滤器的示例.对于所有过滤器，您必须

That's example for text search filter. For all filters you must

1. match every filter from front (URL get param) (main.js)
2. than put it in data object sent to backend (lazy-load.js)
3. address this variable in lazy-load.php in if(isset($_POST['param-name'])) section ( new or existing one as there are some )

这篇关于使用分页进行Wordpress延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！