通过AJAX jQuery的负载字preSS页 [英] jQuery load Wordpress pages via ajax
问题描述
我试图安装一个字preSS主题，加载与AJAX页面（不是职位）。我在下面的这指南但一直没能得到正确的页面加载。
目前正在与塞后产生的帖子的链接
http://local.example.com/slug/
所以我调整
jQuery的（文件）。就绪（函数（$）{
$ .ajaxSetup（{缓存：假}）;
$（a.bar）。点击（函数（五）{
$（'页面加载程序）显示（）;
VAR的= $（本）.parent（）;
。$（'列'）不是（$（本）.parent（）），动画（{宽度：'切换'，不透明度：'0.75'}，700，函数（）{
}）;
VAR的post_id = $（本）.attr（HREF）;
$（＃页容器）.load（HTTP：//＆LT; PHP的echo $ _ SERVER [HTTP_HOST];＆GT;+的post_id，{ID：的post_id}）;
返回false;
}）;
}）;
网址是正确的，但它不会加载任何东西。
＆LT; PHP
/ *
模板名称：Triqui阿贾克斯帖子
* /
？＆GT;
＆LT; PHP
$后= get_post（$ _ POST ['身份证']）;
？＆GT;
？＆LT;如果PHP（$后）：＆GT;？
＆LT; PHP setup_postdata（$后）; ？＆GT;
＆LT; DIV＆LT; PHP post_class（）＆GT？; ID =后＆LT; PHP the_ID（）;？＆GT;＆GT;
＆LT; H2＆GT;＆LT; PHP the_title（）; ？＆GT;＆LT; / H＆GT;
＆LT;小＆GT;＆LT; PHP the_time（'F JS，Y'）＆GT？; ＆LT;！ - 以＆lt;？php的the_author（）＆GT;？ - ＆GT;＆LT; /小＆GT;
＆LT; DIV CLASS =项＆GT;
＆LT; PHP the_content（'阅读本条目与放大器的休息; RAQUO;'）; ？＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; PHP ENDIF; ？＆GT;
所以我实际上是能够按照我pviously提到的$ P $教程得到这个工作;我认为本教程可能刚刚被写得有点不清。
步骤1
创建是创建在根目录下的PHP文件，类似这样的评论标题进行自定义页面模板：
＆LT; PHP
/ *
模板名称：阿贾克斯
* /
？＆GT;
我题目是阿贾克斯语义的目的，但在本教程的原作者标题是Triqui阿贾克斯。保持PHP文件的名称注释创建，你将在第4步后再次使用。
步骤2
一旦这样做了，你可以继续编写您的自定义页面模板除下方添加注释行（行2到5）
＆LT; PHP
$后= get_post（$ _ POST ['身份证']）; //这一行是用来定义{ID：的post_id}，您将在另一个片段再往下看
如果（$交）{//这是必要的，并且是替代的典型`如果（have_posts（））`的
setup_postdata（$后）; //需要格式化自定义查询结果的模板标签＆GT？;
＆LT;！ - 这条线之下一切都是典型的页面模板编码 - ＆GT;
＆LT; DIV＆LT; PHP post_class（）＆GT？; ID =后＆LT; PHP the_ID（）;？＆GT;＆GT;
＆LT; H2＆GT;＆LT; PHP the_title（）; ？＆GT;＆LT; / H＆GT;
＆LT;小＆GT;＆LT; PHP the_time（'F JS，Y'）＆GT;＆LT; /小＆GT;
＆LT;跨度＆GT;＆LT; PHP the_author（）＆GT;＆LT; / SPAN＆GT;
＆LT; DIV CLASS =项＆GT;
＆LT; PHP the_content（）; ？＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; PHP}
步骤3
一旦你创建自定义的页面模板，你现在应该登录到WP-admin和第一，转到设置 - ＆GT;固定链接键，将其设置为日期和名称或自定义结构。其结构应该是这样的：
/％，比去年％/％monthnum％/％天％/％postname％/
无论你写的手工自定义结构或选择日名称它应该看起来像上面的代码片段。
步骤4
现在去创建一个新的页面。 页面 - ＆GT; 添加新的，并创建了新的一页。将它命名为任何你喜欢的，但是这将是最好的名字是一样的，你在步骤1中创建的页面模板的名称。
将其保存为一个空白页。 现在，这是最重要的部分您需要确保该页面的永久链接有作为文件您在步骤中创建完全相同的名称1.唯一的区别是它应该是全部小写。
步骤5
在你保存网页，还要确保你选择的页面模板，从选择菜单。如果您没有看到这个菜单是因为你可能没有正确创建模板文件，也没有在根目录下创建它，或者你没有正确地创建注释头。基本上，菜单，如果你没有创建任何自定义页面模板不显示，那只能说明，如果它似乎保存在你的主题的根目录中适当的自定义页面模板。
评论
您现在应该有一个PHP文件。而在WP-管理页面。该页面应该有一个固定链接URL相匹配的PHP文件的文件名（全部为小写）和页面应该被分配该文件的网页模板。
本页面应该保持空，不应该被使用。
步骤6
在的header.php 紧跟在code ＆LT; PHP wp_head（）＆GT; 添加下面的脚本：
＆LT;脚本＆GT;
jQuery的（文件）。就绪（函数（$）{
$ .ajaxSetup（{缓存：假}）;
$（THELINK）。点击（函数（E）{// 5号线
PAGEURL = $（本）.attr（HREF'）;
如果（PAGEURL！= window.location的）{
window.history.pushState（{路径：PAGEURL}，''，PAGEURL）;
}
VAR的post_id = $（本）.attr（相对）
$（#TARGET）.load（HTTP：//＆LT; PHP的echo $ _ SERVER [HTTP_HOST];＆GT; / AJAX /？，{ID：的post_id}）; // 12号线
返回false;
}）;
}）;
＆LT; / SCRIPT＆GT;
替换THELINK与在那里放置了元素＆LT; PHP the_permalink＆GT; code
这是您需要更改的唯一行是第5行和位置时书写线12 12.注意 AJAX 这是我创建的PHP文件的名称步骤1和I在步骤5中创建的网页的永久链接的名称
同样在12号线在该行的开头，你应该改变目标在应加载的内容元素。
确保你正确加载的jQuery此脚本之前。的
步骤7
移动到您的index.php 文件或文件为准你的循环中。找到在那里，你永远有code the_permalink 这将是一个锚标记。您将需要添加一个rel属性与 the_ID（）这是由 {ID：的post_id} 第12行步骤6：
＆LT; A HREF =＆LT; PHP the_permalink（）;？＆gt;中类=酒吧相对=＆LT; PHP the_ID（）;？＆gt;中标题=＆LT; PHP the_title（）;？＆GT;＆GT;
完成
就是这样。现在应该工作。页面应该被加载的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 »'); ?>
</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.
这篇关于通过AJAX jQuery的负载字preSS页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
