WordPress主题中类谷歌图片网格jQuery代码优化与报错排查

Hey there! Let's tackle that frustrating Uncaught ReferenceError: google is not defined error and get your grid layout working like a charm in your WordPress theme.

First, Why That Error Happens #

The tutorial you referenced likely relies on a Google-hosted library (like an old Google Images API or a custom layout utility) that you aren't loading in your WordPress setup. Since the google object doesn't exist in your page's context, the browser throws that error. The good news is you don't need Google's libraries to build this grid—we can do it with pure jQuery or a lightweight, reliable grid plugin.

Solution 1: Pure jQuery Grid (No External Dependencies) #

WordPress ships with jQuery out of the box, but it uses noConflict mode (so you can't use the shorthand $ unless you wrap your code properly). Here's how to implement a responsive grid:

1. Enqueue Your Script Correctly
   Add this to your theme's functions.php to load your script with WordPress's jQuery dependency:

   function enqueue_custom_grid_script() {
       // Load our custom script, dependent on WordPress's jQuery
       wp_enqueue_script( 
           'custom-grid', 
           get_template_directory_uri() . '/js/script.js', 
           array( 'jquery' ), 
           '1.0', 
           true // Load in footer for better performance
       );
   }
   add_action( 'wp_enqueue_scripts', 'enqueue_custom_grid_script' );
   

2. Grid Logic in script.js
   Use jQuery's noConflict-safe syntax to build your responsive grid:

   jQuery(document).ready(function($) {
       // Function to calculate and apply grid layout
       function renderGrid() {
           const gridContainer = $('.image-grid');
           const gridItems = gridContainer.find('.grid-item');
           const containerWidth = gridContainer.width();
           const minItemWidth = 200; // Adjust based on your design
           const columnCount = Math.floor(containerWidth / minItemWidth);
           const columnWidth = containerWidth / columnCount;
   
           // Position each grid item
           gridItems.each(function(index) {
               const rowIndex = Math.floor(index / columnCount);
               const colIndex = index % columnCount;
   
               $(this).css({
                   width: `${columnWidth}px`,
                   position: 'absolute',
                   top: `${rowIndex * $(this).outerHeight()}px`,
                   left: `${colIndex * columnWidth}px`
               });
           });
   
           // Set container height to fit all rows
           const totalRows = Math.ceil(gridItems.length / columnCount);
           gridContainer.height(totalRows * gridItems.first().outerHeight());
       }
   
       // Initialize grid on page load
       renderGrid();
   
       // Re-render grid when window resizes
       $(window).on('resize', renderGrid);
   });
   

Solution 2: Use Masonry (More Stable, Professional Grid) #

For a more robust grid (with features like staggered heights, smooth animations), use Masonry—a popular, lightweight grid library. It's easier to maintain than custom jQuery code.

1. Enqueue Masonry & Your Script
   Update functions.php to load Masonry (via CDN) alongside your custom script:

   function enqueue_masonry_grid_script() {
       // Load Masonry library
       wp_enqueue_script( 
           'masonry', 
           'https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js', 
           array( 'jquery' ), 
           '4.2.2', 
           true 
       );
       // Load our custom script, dependent on jQuery and Masonry
       wp_enqueue_script( 
           'custom-grid', 
           get_template_directory_uri() . '/js/script.js', 
           array( 'jquery', 'masonry' ), 
           '1.0', 
           true 
       );
   }
   add_action( 'wp_enqueue_scripts', 'enqueue_masonry_grid_script' );
   

2. Masonry Grid Logic in script.js
   This is way simpler and handles edge cases (like variable height items) automatically:

   jQuery(document).ready(function($) {
       // Initialize Masonry grid
       const $grid = $('.image-grid').masonry({
           itemSelector: '.grid-item',
           columnWidth: 200, // Minimum item width
           fitWidth: true // Make grid fit container width
       });
   
       // Re-layout grid when window resizes
       $(window).on('resize', function() {
           $grid.masonry('layout');
       });
   });
   

Key Fixes to Avoid Future Errors #

• Never Hardcode jQuery: Always use WordPress's wp_enqueue_script to load scripts—this ensures jQuery is loaded correctly and avoids conflicts with other plugins.
• NoConflict Mode: Wrap your jQuery code in jQuery(document).ready(function($) { ... }) to use the $ shorthand safely.
• Remove Unused Dependencies: If your original code referenced google objects, delete those lines—you don't need them for a basic grid.

内容的提问来源于stack exchange，提问作者João