求助：在WordPress中调用Isotope出现jQuery/$不是函数错误

Hey there, let's tackle this Isotope "Not a Function" error you're hitting in WordPress—super common issue once you know the quirks of how WordPress handles jQuery and scripts. Let's break down the possible causes and fixes step by step:

• Double-check script loading order & dependencies
  WordPress loads jQuery in noConflict mode by default, but even using jQuery directly won't work if Isotope loads before jQuery. Isotope needs jQuery to attach itself to the jQuery object, so loading order is critical. Fix this by enqueuing scripts properly with WordPress's built-in function:

  function enqueue_isotope_scripts() {
      // Enqueue WordPress's native jQuery
      wp_enqueue_script('jquery');
      // Load Isotope, with jQuery as a required dependency
      wp_enqueue_script('isotope', get_template_directory_uri() . '/path/to/isotope.pkgd.min.js', array('jquery'), '3.0.6', true);
      // Load your custom initialization script, dependent on both jQuery and Isotope
      wp_enqueue_script('custom-isotope', get_template_directory_uri() . '/path/to/your-isotope-script.js', array('jquery', 'isotope'), '1.0', true);
  }
  add_action('wp_enqueue_scripts', 'enqueue_isotope_scripts');
  

  The true at the end loads scripts in the footer, ensuring the DOM is ready when your code runs.

• Wrap initialization in a DOM-ready handler
  Even with footer loading, sometimes DOM elements aren't fully rendered when your script fires. Wrap your code to ensure it runs only after the DOM is ready—plus, you can safely use $ inside the handler without conflicting with WordPress's noConflict mode:

  jQuery(document).ready(function($) {
      // Initialize Isotope
      var $grid = $('.grid').isotope({
          itemSelector: '.grid-item',
          layoutMode: 'fitRows'
      });
  
      // Filter button functionality
      $('.filter-button-group').on('click', 'button', function() {
          var filterValue = $(this).attr('data-filter');
          $grid.isotope({ filter: filterValue });
      });
  });
  

• Check for duplicate script loads
  Plugins or your theme might be loading jQuery multiple times, or an older version incompatible with Isotope. Open your browser's Network tab to look for duplicate jQuery/Isotope requests. If you find duplicates, you can deregister conflicting versions (use cautiously—some plugins rely on specific versions):

  function deregister_conflicting_jquery() {
      if (!is_admin()) {
          wp_deregister_script('jquery');
          wp_register_script('jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', array(), '3.6.0', true);
          wp_enqueue_script('jquery');
      }
  }
  add_action('wp_enqueue_scripts', 'deregister_conflicting_jquery');
  

  Ensure your jQuery version is compatible with Isotope (v3.x works with jQuery 1.12+).

• Verify Isotope is actually loading
  Open DevTools > Sources and search for "isotope" to confirm the script loads. If not, double-check the file path in your enqueue code—typos are a frequent culprit. Also watch for 404 errors in the Console tab, which mean the script path is incorrect.

• Disable jQuery Migrate temporarily
  Older WordPress versions use jQuery Migrate, which can conflict with newer Isotope builds. Try disabling it to test:

  function disable_jquery_migrate($scripts) {
      if (!is_admin() && isset($scripts->registered['jquery'])) {
          $script = $scripts->registered['jquery'];
          $script->deps = array_diff($script->deps, array('jquery-migrate'));
      }
  }
  add_action('wp_default_scripts', 'disable_jquery_migrate');
  

Most of the time, this error boils down to script loading order, missing dependencies, or not waiting for the DOM to be ready. Give these steps a shot—they should resolve the issue!

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