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 »'); ?> </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.
