WordPress实现无刷新页面切换：点击按钮替换当前页面内容

Got it, let's figure out how to add that smooth, no-refresh page transition in WordPress—exactly like the 'Next project' button you mentioned. This is a great way to keep users engaged without the jarring page reload. Here's a step-by-step breakdown that works with most themes:

First, place the button at the bottom of Page 1. You can use a Custom HTML block in the WordPress block editor, or add this code directly to a custom page template if you're comfortable with that:

<button id="load-next-page" data-next-url="/page-2/">Next Project</button>

• Replace /page-2/ with the actual permalink of your Page 2. The data-next-url attribute tells our JavaScript where to fetch the new content from.

WordPress comes with jQuery preloaded, so we'll use it to handle the seamless content swap. We'll add our code safely via WordPress' script system (no need to mess with standalone JS files unless you prefer it).

Add this snippet to your theme's functions.php file (or use a custom plugin if you want to avoid modifying your theme directly):

function enqueue_page_transition_script() {
    // Load WordPress' built-in jQuery
    wp_enqueue_script('jquery');
    
    // Add our custom inline script
    wp_add_inline_script('jquery', '
        jQuery(document).ready(function($) {
            // Listen for button clicks
            $("#load-next-page").on("click", function(e) {
                e.preventDefault(); // Stop the button from acting like a regular link
                const nextPageUrl = $(this).data("next-url");
                
                // Optional: Add a loading state to let users know something's happening
                $("body").addClass("loading");
                
                // Fetch the content of Page 2
                $.get(nextPageUrl, function(pageData) {
                    // Extract the main content from Page 2 (adjust the selector below!)
                    // Use your theme's actual main content container (e.g., .site-content, #primary)
                    const newContent = $(pageData).find("#main").html();
                    
                    // Replace Page 1's content with Page 2's content
                    $("#main").html(newContent);
                    
                    // Update the browser URL without reloading the page
                    window.history.pushState({}, "", nextPageUrl);
                    
                    // Remove the loading state
                    $("body").removeClass("loading");
                    
                    // Optional: Scroll to the top of the new content
                    $("html, body").animate({ scrollTop: 0 }, 500);
                }).fail(function() {
                    // Handle errors if the page fails to load
                    alert("Oops, we couldn’t load the next page. Try again!");
                    $("body").removeClass("loading");
                });
            });

            // Optional: Handle browser back button clicks
            $(window).on("popstate", function() {
                $.get(window.location.href, function(pageData) {
                    const currentContent = $(pageData).find("#main").html();
                    $("#main").html(currentContent);
                    $("html, body").animate({ scrollTop: 0 }, 500);
                });
            });
        });
    ');
}
add_action('wp_enqueue_scripts', 'enqueue_page_transition_script');

Key Notes for This Step: #

• Adjust the selector: Replace #main with your theme's actual main content container. Right-click your page's content in the browser, select "Inspect" to find the correct ID/class (e.g., .site-content is common in many themes).
• Back button support: The extra popstate listener ensures that when users click the browser's back button, the previous page content loads without a refresh too.

To make the transition feel smooth and professional, add these styles to your theme's Customizer > Additional CSS or style.css file:

/* Loading state styles */
body.loading {
    cursor: wait;
}
body.loading #main {
    opacity: 0.6;
    pointer-events: none;
}

/* Fade transition for content changes */
#main {
    transition: opacity 0.3s ease-in-out;
}

This adds a subtle fade effect when content swaps and a loading cursor to signal activity to users.

• Test on your theme: Every theme has slightly different HTML structure, so double-check that the content selector works correctly. If Page 2's content doesn't load, verify the selector matches your theme's container.
• SEO is unaffected: Since both pages exist as standalone URLs, search engines will still crawl and index them normally. This is just a frontend improvement for user experience.

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