求助：无需插件实现WordPress无限滚动遇旧方案失效等问题

Hey there! I’ve been in your shoes before—trying to implement infinite scroll in a WordPress theme with limited JS skills, only to hit roadblocks with outdated tutorials. Let’s break down a working, modern solution that addresses your selector confusion and Metafizzy V2 bugs.

第一步：先理清楚主题的HTML结构（解决选择器定位问题） #

Old tutorials rely on generic selectors that rarely match custom themes. Grab your browser’s dev tools (F12) and pinpoint these three key elements first:

• 文章容器: The parent element wrapping all your posts (e.g., <div class="post-grid"> or <ul id="blog-posts">)
• 单篇文章: The element that wraps each individual post (e.g., <article class="blog-post">)
• 下一页链接: The anchor tag pointing to the next page of posts—look for rel="next" or a class like .next-page

For example, if your theme’s structure looks like this:

<div class="post-container">
  <article class="single-post">...</article>
  <article class="single-post">...</article>
</div>
<div class="site-pagination">
  <a href="/page/2/" rel="next">Next →</a>
</div>

Your target selectors will be:

• Container: .post-container
• Post item: .single-post
• Next link: .site-pagination a[rel="next"]

第二步：用最新版Infinite Scroll初始化（解决V2版本bug） #

The V2 API has changed significantly from the old tutorial. Here’s a clean, bug-resistant implementation you can drop into your theme’s custom JS file:

document.addEventListener('DOMContentLoaded', function() {
  // Guard clause: Exit if required elements don't exist
  const postContainer = document.querySelector('.post-container');
  const nextPageLink = document.querySelector('.site-pagination a[rel="next"]');
  
  if (!postContainer || !nextPageLink) return;

  // Initialize Infinite Scroll
  const infScroll = new InfiniteScroll(postContainer, {
    path: function() {
      // Dynamically get the next page URL (avoids hardcoding)
      return nextPageLink.getAttribute('href');
    },
    append: '.single-post', // What to add to the container
    hideNav: '.site-pagination', // Hide pagination once scrolling starts
    history: 'push', // Optional: Update browser URL as users scroll
    status: '.scroll-status' // Optional: Add a loading status element
  });

  // Fix common post-load issues (e.g., uninitialized scripts on new posts)
  infScroll.on('append', function(response, path, items) {
    // Re-run any scripts that need to apply to new content (e.g., image lazy load)
    // Example: If you use lazyload, call its update method here
    // lazyLoadInstance?.update();
  });
});

第三步：Fix V2’s Most Common Bugs #

1. Duplicate content loading:

   • Double-check that your WordPress pagination works standalone (visit /page/2/ directly—does it show unique posts?).
   • Ensure your theme’s custom queries include the paged parameter:

     $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
     $args = array(
       'post_type' => 'post',
       'paged' => $paged
     );
     $custom_query = new WP_Query($args);
     

2. New posts don’t inherit styles:

   • Make sure your CSS uses global selectors (e.g., .single-post instead of targeting only initial page posts).
   • If you have JS-dependent styles (like masonry layouts), re-initialize that script in the append callback above.

3. Selector not triggering:

   • Verify your selectors in dev tools—avoid overly specific nested selectors (e.g., body.home .post-container might break on archive pages).
   • Ensure no other scripts are modifying the pagination links before Infinite Scroll loads.

第四步：WordPress Best Practices #

• Load the Infinite Scroll library properly via functions.php instead of hardcoding a CDN:

  function enqueue_infinite_scroll() {
    wp_enqueue_script(
      'infinite-scroll',
      get_template_directory_uri() . '/js/infinite-scroll.pkgd.min.js',
      array(),
      '4.0.1', // Use the latest version number
      true
    );
    wp_enqueue_script(
      'custom-infinite-scroll',
      get_template_directory_uri() . '/js/custom-infinite-scroll.js',
      array('infinite-scroll'),
      '1.0',
      true
    );
  }
  add_action('wp_enqueue_scripts', 'enqueue_infinite_scroll');
  

This setup should resolve the outdated tutorial issues and get your infinite scroll working smoothly. If you hit a specific error (like a console log message), feel free to share it and we can troubleshoot further!

内容的提问来源于stack exchange，提问作者WordCent