Modo corretto per caricare un singolo post tramite Ajax?

Sto caricando singoli post via Ajax in un div che ho configurato nella mia pagina index. Tutto funziona bene da questo punto di vista. Voglio usare history.js per gestire push/pop dello stato così che se gli utenti inseriscono example.com/my-post nella barra degli indirizzi, si carichi la pagina index con il post già caricato nel div. Qui sta il problema.

Questa è una versione semplificata della funzione che sto usando (quella reale include anche uno slide):

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' );

Ecco come lo sto chiamando:

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

    var post_id = $(this).data('id'), // attributo data-id per .post-link
        projectTitle = $(this).data('title'), // attributo data-title per .post-link
        projectSlug = $(this).data('slug'), // attributo data-slug per .post-link
        ajaxURL = site.ajaxurl; // URL Ajax localizzato da 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;
        }
    });
});

Ecco il loop

<?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(); // resetta la query ?>

Mi chiedo se sto procedendo nel modo sbagliato. Sono confuso e una parte di me pensa che dovrei mettere tutto l'html nel mio template single e chiamarlo dalla funzione Ajax. Ma poi non so esattamente come funzionerebbe perché se l'utente inserisce example.com/my-post nel browser, caricherà solo il post singolo senza tutto l'html della pagina index. Spero di star spiegando correttamente. Qualcuno può mostrarmi come si fa?