jQuery 通过 ajax 加载 Wordpress 页面 [英] jQuery load Wordpress pages via ajax

问题描述

我正在尝试设置一个 Wordpress 主题，该主题使用 AJAX 加载页面(而不是帖子).我正在关注 本指南 但一直无法加载正确的页面.

文章的链接是用 post slug 生成的

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

所以我调整了

 jQuery(document).ready(function($){$.ajaxSetup({cache:false});$("a.bar").click(function(e){$('页面加载器').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});返回假；});});

网址正确，但没有加载任何内容..

<小时>

<?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') ?><!-- 来自 <?php the_author() ?>--></小><div class="entry"><?php the_content('阅读本条目的其余部分 &raquo;');?>

<?php endif;?>

解决方案

所以我实际上能够按照我之前提到的教程进行操作；我觉得教程可能写得有点不清楚..

步骤 1

创建一个自定义页面模板，通过在根目录中创建一个 PHP 文件来完成，并带有类似这样的注释标题:

出于语义目的，我将其命名为 Ajax，但在教程中，原作者将其命名为Triqui Ajax".记下您创建的 PHP 文件的名称，因为稍后您将在第 4 步中再次使用它.

步骤 2

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

<!-- 此行下方的所有内容都是典型的页面模板编码--><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();?>

<?php }

步骤 3

创建自定义页面模板后，您现在应该登录 wp-admin 并首先转到 Settings ->Permalinks 并将其设置为 Day and Name 或 Custom Structure.结构应如下所示:

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

无论您是在 Custom Structure 中手动编写还是选择 Day Name，它都应该类似于上面的代码片段.

步骤 4

现在去创建一个新页面.Pages ->Add New' 并创建一个新页面.随意命名，但最好将其命名为您在步骤 1 中创建的页面模板的名称.

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

步骤 5

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

评论

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

此页面应保持空白，切勿使用.

步骤 6

在 header.php 紧跟在代码 <?php wp_head() ?> 中添加以下脚本:

将 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 行使用:

完成

就是这样.它现在应该可以工作了.页面应该用 AJAX 加载，浏览器的 URL 也会改变以匹配.

您现在可以随心所欲地创建任意数量的页面，创建其他自定义页面模板并分配它们，无论您喜欢什么..只要让您在第 5 步中创建的文件永远作为一个空白页面存在.

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

I'm trying to setup a Wordpress theme which loads pages (not posts) with AJAX. I was following this guide but haven't been able to get the correct pages to load.

The links to the posts are being generated with the post slug

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

So I adjusted

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

The URL is correct but it doesn't load anything..

---

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

解决方案

So I was actually able to get this working by following the tutorial I mentioned previously; I think the tutorial may have just been written a bit unclearly..

Step 1

Create a custom page template which is done by creating a PHP file in the root directory with a comment header similar to this:

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

I titled it Ajax for the purpose of semantics, but in the tutorial the original author titled it 'Triqui Ajax'. Keep note of the name of the PHP file you create as you'll use it again later in Step 4.

Step 2

Once that's done, you can continue coding your custom page template with the exception of adding the annotated lines below (lines 2 thru 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 }

Step 3

Once you've created your custom page template you should now login to the wp-admin and first, go to Settings -> Permalinks and set it to Day and Name or Custom Structure. The structure should look like this:

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

Whether you write that manually in Custom Structure or select Day Name it should look like the above snippet.

Step 4

Now go to create a new page. Pages ->Add New' and create a new page. Name it whatever you like, but it would be best to name it the same as the name of the page template you created in step 1.

Save it as an empty page. NOW THIS IS THE IMPORTANT PART You need to make sure that the permalink of the page has the exact same name as the file you created in Step 1. Only difference is it should be all lowercase.

Step 5

Before you save the page, also make sure you select the page template, from the select menu. If you do not see this menu it is because you probably did not create the template file correctly, or you did not create it in the root directory, or you did not create the comment header properly. Basically, the menu does not show if you do not have any custom page templates created, it only shows if it seems a proper custom page template saved in the root directory of your theme.

Review

You should now have a PHP file. And a page in the WP-admin. The page should have a permalink URL which matches the filename of the PHP file (all lowercase) and the page should be assigned the page template of that file.

This page should remain empty and should never be used.

Step 6

In header.php immediately following the code <?php wp_head() ?> add the following script:

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

Replace THELINK with the element where you have placed the <?php the_permalink ?> code.

The only lines that you need to change are lines 5 and 12. Notice on line 12 where it is written ajax this is the name of the PHP file I created in step 1 and the name of the permalink of the page I created in step 5.

Also on line 12 at the beginning of that line, you should change TARGET to the element in which the content should be loaded.

Make sure you've properly loaded jQuery before this script.

Step 7

Moving on to your index.php file or whichever file your loop is in. Find where-ever you have the code the_permalink which will be on an anchor tag. You will need to add a rel attribute with the_ID() which is used by {id:post_id} on line 12 in step 6:

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

Done

That's it. It should now work. The pages should be loaded with AJAX, and the URL of the browser will also change to match.

You can now go about creating as many pages as your hearts desire, creating other custom page templates, and assigning them, whatever you like.. Just let that file you created in Step 5 live where it is as an empty page forever.

If it still does not work, you are probably hopelessly lost and have no idea what your doing. You most likely have created some sort of jQuery conflict or have not loaded jQuery properly.

这篇关于jQuery 通过 ajax 加载 Wordpress 页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！