jQuery通过ajax加载Wordpress页面

Question

我正在尝试设置一个WordPress主题,用AJAX加载页面(而不是帖子).我正在按照本指南操作,但无法正确加载页面.

这些帖子的链接正在使用post slug生成

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

URL是正确的,但它不加载任何东西..

---

<?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; ?>

Answer 1

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

步骤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,然后转到Settings -> Permalinks并将其设置为Day and Name或Custom Structure.结构应如下所示:

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

无论您是手动编写Custom Structure还是选择Day Name它都应该看起来像上面的代码片段.

第4步

现在去创建一个新页面. Pages ->添加新'并创建新页面.将其命名为您喜欢的名称,但最好将其命名为您在步骤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行the_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.