WordPress：如何通过AJAX根据文章ID返回自定义页面模板完整HTML？

Got it, let's get your AJAX call returning the full content from your custom page template instead of just the title. Here's how to fix it step by step:

1. Update Your AJAX Template File #

Right now, your template only outputs the post title. We need to modify it to load the actual custom template assigned to the target page/post. Replace your existing AJAX template code with this:

<?php
/* Template Name: Ajax */

// Validate the incoming post ID (security best practice)
if (isset($_POST['id']) && is_numeric($_POST['id'])) {
    $post = get_post($_POST['id']);
    
    if ($post) {
        setup_postdata($post);
        
        // Get the custom template assigned to this page (if any)
        $template_slug = get_page_template_slug($post->ID);
        
        // Load the appropriate template:
        // - Use the custom template if it exists
        // - Fall back to the default page template if no custom one is set
        if (!empty($template_slug) && locate_template($template_slug, false)) {
            locate_template($template_slug, true);
        } else {
            locate_template('page.php', true);
        }
        
        wp_reset_postdata(); // Clean up post data to avoid conflicts with other queries
    }
}

What this does: #

• Validates the incoming post ID to avoid invalid requests
• Retrieves the target page/post and sets up its post data
• Pulls the custom template slug assigned to the page (e.g., template-services.php)
• Loads the full custom template directly, so you get all its content, layout, and built-in logic
• Uses wp_reset_postdata() to ensure subsequent WordPress queries work as expected

2. Fix Your AJAX Request URL #

Looking at your JavaScript, you're sending the request to wp_vars.httpHost (your site root), which won't trigger your AJAX template. You need to point it to the dedicated page you created that uses the "Ajax" template.

First, confirm you have a WordPress page assigned to the "Ajax" template. Then, add its permalink to your wp_vars object (add this to your theme's functions.php or script enqueue code):

// Enqueue your script and pass the AJAX template page URL
wp_enqueue_script('site-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0', true);
wp_localize_script('site-navigation', 'wp_vars', array(
    'ajax_url' => get_permalink(get_page_by_path('ajax')) // Replace 'ajax' with your page's slug
));

Update your JavaScript's url parameter to use this correct path:

$.ajax({
    url: wp_vars.ajax_url, // Now points directly to your AJAX template page
    type: "POST",
    data: { id: postID },
    // ... rest of your existing code
});

3. Clean Up the Success Callback #

When you load the full template, it will include your site's header, footer, and other global elements. You don't want to append all that to your main.main-wrap—you just want the content inside it. Modify your success function to extract only the relevant part:

success: function (data) {
    // Extract the content from the returned HTML's main.main-wrap
    var newContent = $(data).find('main.main-wrap').html();
    // Replace the current main content instead of appending to avoid duplication
    $("main.main-wrap").html(newContent);
    console.log(data);
},

Quick Testing Tips #

• Clear your browser cache after making changes (AJAX can cache old responses)
• Use your browser's DevTools Network tab to inspect what the AJAX request returns
• If the custom template isn't loading, add var_dump($template_slug); to the AJAX template to verify it's pulling the correct template slug

内容的提问来源于stack exchange，提问作者Cat Named Dog