我之前也发过一个类似的问题，但我修改了一些代码，所以我想我应该开始一个新的主题。下面是我目前必须在首页上加载单个帖子的设置。

This is what I\'m trying to do. 请注意，单击帖子时，它会加载到隐藏的容器中。

有人能帮我弄清楚吗？

Front-page.php

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

        <div id="project-container">
            <img id="loading-animation" src="http://i.imgur.com/5RMfW8P.gif" style="display:none">
        </div>

        <!-- Start the loop -->
        <?php $home_query = new WP_Query(\'post_type=projects\');

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

            <a class="post-link" href="#" rel="<?php the_ID(); ?>">
                <article id="post-<?php the_ID(); ?>">
                    <div class="post-info">
                        <h1 class="entry-title"><?php the_title(); ?></h1>
                    </div>
                    <?php the_post_thumbnail( "home-thumb", array( \'class\' => \'grayscale grayscale-fade\') ); ?>
                </article><!-- #post-## -->
            </a>

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

    </main><!-- #main -->
</div><!-- #primary -->

Functions.php

/**
 * Enqueue scripts and styles.
 */
function starter_scripts() {
    wp_deregister_script( \'jquery\' );
    wp_register_script( \'jquery\', includes_url( \'/js/jquery/jquery.js\' ), false, NULL, true );
    wp_enqueue_script( \'jquery\' );
    wp_enqueue_script( \'jquery-effects-core\');

    wp_enqueue_style( \'starter-style\', get_stylesheet_uri() );
    wp_enqueue_script( \'gray\', get_template_directory_uri() . \'/js/min/jquery.gray.min.js\', array(\'jquery\'), \'\', true );
    wp_enqueue_script( \'includes\', get_template_directory_uri() . \'/js/min/includes.min.js\', array(\'jquery\'), \'\', true );
    wp_localize_script( \'includes\', \'site\', array(
                \'theme_path\' => get_template_directory_uri(),
                \'ajaxurl\'    => admin_url(\'admin-ajax.php\')
            )
    );
}
add_action( \'wp_enqueue_scripts\', \'starter_scripts\' );

/**
 * Return the post content to the AJAX call
 */
function my_load_ajax_content () {
    $args = array( \'p\' => $_POST[\'post_id\'] );
    $post_query = new WP_Query( $args );
    while( $post_query->have_posts() ) : $post_query->the_post(); ?>

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr( \'Permalink to %s\' ), the_title_attribute( \'echo=0\' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div> <!-- end .entry-content -->
    </div>

    <?php       
    endwhile;           
    exit;
}
add_action ( \'wp_ajax_nopriv_load-content\', \'my_load_ajax_content\' );
add_action ( \'wp_ajax_load-content\', \'my_load_ajax_content\' );

Includes.js

// Load posts via AJAX
$(".post-link").click(function(e) {

    e.preventDefault();

    $("#loading-animation").show();
    var post_id = $(this).attr(\'rel\');
    var ajaxURL = site.ajaxurl;

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

Single.php

<?php while ( have_posts() ) : the_post(); ?>

<div class="post-container">

    <?php the_title( \'<h1 class="entry-title">\', \'</h1>\' ); ?>

    <?php the_content(); ?>

</div><!-- #post-## -->

    <?php starter_post_nav(); ?>

<?php endwhile; // end of the loop. ?>