Particle.js在WordPress无对应选择器页面报错问题求助

I’ve run into this exact issue before—particles.js tries to automatically grab the #particle-js element as soon as it loads, and if that element doesn’t exist on the page, it throws that annoying null error. Here are three solid solutions to fix it:

1. Only load particles.js on pages that need it #

The cleanest approach is to avoid loading the script entirely on pages where you don’t want the particle background. In WordPress, you can add conditional logic to your theme’s functions.php file to control this:

function enqueue_particles_scripts() {
    // Replace 'home' or 5 with your target page's slug, ID, or title
    if (is_page('home') || is_page(5)) {
        // Enqueue the particles.js library
        wp_enqueue_script(
            'particles-js',
            get_template_directory_uri() . '/js/particles.js', // Update this path to your file
            array(),
            '1.0',
            true
        );
        // Enqueue your custom particles configuration (if you have one)
        wp_enqueue_script(
            'particles-config',
            get_template_directory_uri() . '/js/particles-config.js',
            array('particles-js'),
            '1.0',
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'enqueue_particles_scripts');

This way, the script only loads on pages where you actually have the #particle-js element, so no null errors pop up elsewhere.

2. Add a existence check directly in particles.js #

If you prefer to keep the script loaded everywhere but prevent the error, modify the particles.js source code. Find the line around 1495 where it fetches the element:

pJS_tag = document.getElementById('particles-js');

Right after that line, add a check to exit early if the element doesn’t exist:

if (!pJS_tag) return;

This stops the script from running further when it can’t find the target element, eliminating the error entirely.

3. Manually initialize particles.js only when the element exists #

Take control by ditching the auto-initialize behavior of particles.js. First, use a non-autoload version of the script (or comment out the auto-initialize code in the full version), then add this custom script to your site:

document.addEventListener('DOMContentLoaded', function() {
    const particleContainer = document.getElementById('particles-js');
    if (particleContainer) {
        // Initialize particles only if the element exists
        particlesJS('particles-js', {
            // Your particle configuration here
            particles: {
                number: { value: 80 },
                size: { value: 3 },
                // Add all your other config options...
            },
            interactivity: {
                events: {
                    onhover: { enable: true, mode: 'repulse' }
                }
            }
        });
    }
});

This ensures the initialization code only runs when the #particle-js element is present on the page.

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