jQuery通过ajax加载Wordpress页面

Question

我试图设置一个WordPress主题，用AJAX加载页面（而不是帖子）。我正在关注this guide，但无法获得正确的页面加载。

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

网址是正确的，但它不会加载任何内容..

---

<?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＆＃39;。记下您创建的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 ->添加新内容＆＃39;并创建一个新页面。将其命名为您喜欢的名称，但最好将其命名为您在步骤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的位置。您需要添加the_ID()的rel属性，{id:post_id}在步骤6的第12行使用该属性：

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

完成

那就是它。它现在应该工作。应该使用AJAX加载页面，浏览器的URL也将更改为匹配。

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

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

Answer 2

请检查此链接Load posts to div using ajax and jQuery，或者您可以使用此插件Advanced AJAX Page Loader。

Answer 3

我说错误

  

注意：使用未定义的常量HTTP_HOST - 假设＆＃39; HTTP_HOST＆＃39;在    / var / www / *** / public_html / wp-content / themes / ***** / header.php on   第XX行。

通过在HTTP_HOST中添加单引号来修复：

$("#TARGET").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/ajax/",{id:post_id});