Modalitatea corectă de a încărca un articol prin Ajax

Încarc articole individuale prin Ajax într-un div setat pe pagina mea index. Totul funcționează bine în această privință. Vreau să folosesc history.js pentru a modifica/restaura starea astfel încât atunci când utilizatorii introduc example.com/my-post în bara de adrese, să se încarce pagina index cu articolul deja încărcat în div. Aici apare problema.

Aceasta este o versiune simplificată a funcției pe care o folosesc (cea reală include și o animație):

function my_load_ajax_content () {

    $args = array(
        'p' => $_POST['post_id'],
        'post_type' => 'projects'
        );

    $post_query = new WP_Query( $args );
    while( $post_query->have_posts() ) : $post_query->the_post(); ?>

    <div class="post-container">
        <div id="project-content">
            <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
            <?php the_content(); ?>
        </div>
    </div><!-- .post-container -->

    <?php
    endwhile;
    wp_die();
}

add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' );
add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' );

Așa o apelez:

$('.post-link').on('click', function(e) {
    e.preventDefault();

    var post_id = $(this).data('id'), // atributul data-id pentru .post-link
        projectTitle = $(this).data('title'), // atributul data-title pentru .post-link
        projectSlug = $(this).data('slug'), // atributul data-slug pentru .post-link
        ajaxURL = site.ajaxurl; // URL-ul Ajax localizat din functions.php

    $.ajax({
        type: 'POST',
        url: ajaxURL,
        context: this,
        data: {'action': 'load-content', post_id: post_id },
        success: function(response) {
            $('#project-container').html(response);
            return false;
        }
    });
});

Aici este bucla

<?php $home_query = new WP_Query('post_type=projects');

while($home_query->have_posts()) : $home_query->the_post(); ?>

    <article class="project">
        <?php the_post_thumbnail( 'home-thumb' ); ?>
        <div class="overlay">
            <a class="post-link expand" href="<?php the_permalink(); ?>" data-id="<?php the_ID(); ?>" data-title="<?php the_title(); ?>" data-slug="<?php global $post; echo $post->post_name; ?>">+</a>
        </div>
    </article>

<?php endwhile; ?>
<?php wp_reset_postdata(); // resetează query-ul ?>

Mă întreb dacă abordez greșit această problemă. Sunt confuz și o parte din mine crede că ar trebui să pun tot HTML-ul în template-ul meu single și să-l apelez din funcția Ajax. Dar apoi nu știu exact cum ar funcționa asta pentru că dacă utilizatorul introduce example.com/my-post în browser, va încărca doar articolul individual fără tot HTML-ul de pe pagina index. Sper că explic corect. Poate cineva să-mi arate cum se face corect?