jQuery通过ajax加载WordPress页面

http://local.example.com/slug/

jQuery(document).ready(function($){
        $.ajaxSetup({cache:false});
        $("a.bar").click(function(e){
            $('page-loader').show();
            var that = $(this).parent();

            $('.column').not($(this).parent()).animate({width: 'toggle',opacity:'0.75'},700,function() {

            });

            var post_id = $(this).attr("href");
            $("#page-container").load("http://<?PHP echo $_SERVER[HTTP_HOST]; ?>" + post_id,{id:post_id});

            return false;
        });
    });

<?PHP
/*
Template Name: Triqui Ajax Post
*/
?>
<?PHP
$post = get_post($_POST['id']);
?>
<?PHP if ($post) : ?>
    <?PHP setup_postdata($post); ?>
    <div <?PHP post_class() ?> id="post-<?PHP the_ID(); ?>">
        <h2><?PHP the_title(); ?></h2>
        <small><?PHP the_time('F jS,Y') ?> <!-- by <?PHP the_author() ?> --></small>

        <div class="entry">
            <?PHP the_content('Read the rest of this entry &raquo;'); ?>
        </div>

    </div>
<?PHP endif; ?>

所以我实际上能够按照我之前提到的教程来完成这项工作.我认为教程可能刚刚写得有点不清楚..

步骤1

创建自定义页面模板,这是通过在根目录中创建一个PHP文件来完成的,该文件的注释标题类似于：

<?PHP
/*
Template Name: Ajax
*/
?>

我将其命名为Ajax用于语义,但在教程中原作者标题为“Triqui Ajax”.记下您创建的PHP文件的名称,稍后将在步骤4中再次使用它.

第2步

完成后,您可以继续编写自定义页面模板,但下面添加注释行除外(第2行到第5行)

<?PHP
    $post = get_post($_POST['id']); // this line is used to define the {id:post_id} which you will see in another snippet further down

    if ($post) { // this is necessary and is a replacement of the typical `if (have_posts())`
        setup_postdata($post); // needed to format custom query results for template tags ?>
        <!-- everything below this line is your typical page template coding -->
        <div <?PHP post_class() ?> id="post-<?PHP the_ID(); ?>">

            <h2><?PHP the_title(); ?></h2>
            <small><?PHP the_time('F jS,Y') ?></small>
            <span><?PHP the_author() ?></span>

            <div class="entry">
                <?PHP the_content(); ?>
            </div>

        </div>

<?PHP }

第3步

创建自定义页面模板后,您现在应该登录wp-admin,首先转到设置 – >永久链接并将其设置为日期和名称或自定义结构.结构应如下所示：

/%year%/%monthnum%/%day%/%postname%/

无论您是在自定义结构中手动编写还是选择日期名称,它都应该与上面的代码段类似.

第4步

现在去创建一个新页面. Pages – > Add New’并创建一个新页面.将其命名为您喜欢的名称,但最好将其命名为您在步骤1中创建的页面模板的名称.

将其另存为空白页面.现在这是重要的部分您需要确保页面的永久链接与您在步骤1中创建的文件具有完全相同的名称.唯一的区别是它应该全部小写.

第5步

在保存页面之前,还要确保从选择菜单中选择页面模板.如果您没有看到此菜单,那是因为您可能没有正确创建模板文件,或者您没有在根目录中创建它,或者您没有正确创建注释标题.基本上,如果您没有创建任何自定义页面模板,则菜单不显示,它仅显示保存在主题的根目录中的正确自定义页面模板.

评论

你现在应该有一个PHP文件.和WP-admin中的一个页面.该页面应该有一个永久链接URL,该URL与PHP文件的文件名(全部小写)相匹配,并且应该为该页面分配该文件的页面模板.

此页面应保持为空,不应使用.

第6步

在header.PHP之后紧跟代码<？PHP wp_head()？>添加以下脚本：

<script>

    jQuery(document).ready(function($){
        $.ajaxSetup({cache:false});
        $("THELINK").click(function(e){ // line 5
            pageurl = $(this).attr('href');
            if(pageurl!=window.location) {
                window.history.pushState({path: pageurl},'',pageurl);
            }

            var post_id = $(this).attr("rel")
            $("#TARGET").load("http://<?PHP echo $_SERVER[HTTP_HOST]; ?>/ajax/",{id:post_id}); // line 12
            return false;
        });
    });
</script>

将THELINK替换为放置<？PHP the_permalink？>的元素.码.

您需要更改的唯一行是第5行和第12行.请注意第12行,其中写有ajax,这是我在步骤1中创建的PHP文件的名称以及我在步骤5中创建的页面的永久链接的名称.

同样在该行开头的第12行,您应该将TARGET更改为应加载内容的元素.

确保在此脚本之前正确加载了jQuery.

第7步

继续你的index.PHP文件或你的循环所在的文件.找到你将拥有代码the_permalink的地方,它将在一个锚标签上.您需要在步骤6中的第12行添加一个带有_ID()的rel属性,该属性由{id：post_id}使用：

<a href="<?PHP the_permalink(); ?>" class="bar" rel="<?PHP the_ID(); ?>" title="<?PHP the_title(); ?>">

完成

而已.它现在应该工作.页面应该加载AJAX,浏览器的URL也将更改为匹配.

您现在可以创建尽可能多的页面,创建其他自定义页面模板,并分配它们,无论您喜欢什么.只需让您在步骤5中创建的文件永远存在于空白页面.

如果它仍然不起作用,你可能已经绝望地迷失了,并且不知道你在做什么.您很可能已经创建了某种jQuery冲突或者没有正确加载jQuery.