我有一个单页站点，通过Ajax在同一页上通过slide down div加载帖子。当帖子被“激活”时，我希望设置该状态，以便当我直接访问url时，它会转到div中已经显示的特定帖子。

My question is:

我是否在单个中创建帖子。php并调用它们减去页眉和页脚？还是将创建模板作为Ajax功能的一部分？请记住，我的下一个任务是找出如何实现history.js 因此，在url、历史堆栈等中设置状态。

Here\'s my Ajax function:

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-left-content">
            <?php the_title( \'<h1 class="entry-title">\', \'</h1>\' ); ?>
            <?php the_content(); ?>

            <!-- If there is a URL -->
            <?php if( get_field(\'url\') ): ?>
                <a href="http://<?php the_field(\'url\'); ?>" target="_blank"><?php the_field(\'url\'); ?></a>
            <?php endif; ?>
        </div>
        <div id="project-right-content">

            <?php if( have_rows(\'slides\') ): ?>

                <div id="slider">

                    <!-- Slider Setup -->
                    <?php if( have_rows(\'slides\') ):
                        $slideNumber = 0;
                        while ( have_rows(\'slides\') ) : the_row();
                        $slideNumber++;
                    ?>

                        <input type="radio" name="slider" id="slide<?php echo $slideNumber; ?>">

                    <?php endwhile;endif; ?>

                    <!-- Slide -->
                    <?php if( have_rows(\'slides\') ): ?>
                        <div id="slides">
                            <div id="overflow">
                                <div class="inner">

                                    <?php if( have_rows(\'slides\') ):
                                    while ( have_rows(\'slides\') ) : the_row();

                                        $slideImage = get_sub_field(\'slide_image\');
                                    ?>

                                    <article>
                                        <img src="<?php echo $slideImage; ?>" alt="<?php the_title(); ?>">
                                    </article>

                                    <?php endwhile;endif; ?>

                                </div><!-- #inner -->
                            </div><!-- #overflow -->
                        </div><!-- #slides -->

                    <?php endif; ?>

                    <!-- Controls -->
                    <?php if( have_rows(\'slides\') ):
                        $slideNumber = 0;
                    ?>
                        <div id="active">

                            <?php while ( have_rows(\'slides\') ) : the_row();
                                $slideNumber++;
                            ?>
                                <label for="slide<?php echo $slideNumber; ?>"></label>
                            <?php endwhile; ?>

                        </div><!-- #active -->
                    <?php endif; ?>
                </div><!-- #slider -->
            <?php endif; ?>
        </div><!-- #project-right-content -->
    </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\' );

Here\'s a simplified version of my Ajax call:

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

    var post_id = $(this).data(\'id\'),
        projectTitle = $(this).data(\'title\'),
        ajaxURL = site.ajaxurl;

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

Here\'s my HTML:

<div id="project-container"></div>
<div id="projects-list">

    <!-- Start the 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" href="<?php the_permalink(); ?>" data-id="<?php the_ID(); ?>" data-title="<?php the_title(); ?>">+</a>
        </div>
    </article>

    <?php endwhile; ?>
    <?php wp_reset_postdata(); // reset the query ?>

</div><!-- #projects-list -->

如果有人能给我指路，我会非常感激。我似乎找不到关于单页WordPress网站和HTML5历史的太多信息。

编辑：将Ajax函数更新为完整版本（之前已简化）

/* In $(document).ready... */

History.pushState(null, [next-page-title], [next-page-url]);

$().update_content({
  post_id   : [next-page-id]
});


/* js function */

$.fn.update_content = function(args){

  var data = {
    action  : \'my_function\',// in functions.php
    post_id : args[\'post_id\']
  };

  $.post( MyAjax.ajaxurl, data, function(response) {
    if( response != 0 ){
      // put the returned content in the DOM
    }else{
      // Do something else      
    }
  });
};

/* in functions.php */

function my_function(){
  if( isset( $_POST[\'post_id\'] ) ){
    $post = get_post( $_POST[\'post_id\'] );
    $ajax = true;
  }else{
    $ajax = false;
  }

  echo [html-to-display-the-post-content]

  // if this is ajax\'d stop the output
  if( $ajax )
    die();
}

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

History.pushState({post_id:1}

History.Adapter.bind(window,\'statechange\',function(){
    var State = History.getState(); // {"post_id":1}
    //AJAX Call
});

$(window).on(\'load\', function(){
    $(\'.post-link\').first().trigger(\'click\');
});