我正在构建一个自定义的Wordpress主题,我希望它在更改页面时保留DOM。它已经开始工作了,但我通过Wordpress提供内容的方式感觉很糟糕。
我选择用javascript替换所有指向哈希链接的链接,以实现优雅的回退:
这段代码对菜单中的所有链接以及ajax类的所有链接都是这样做的:
var baseLength = $footer.data('url').split('/').length;
$menu.find('a').add('.ajax').each(function(){
$(this).attr('href', function(){
var url = $(this).attr('href').split('/');
url[baseLength - 1] = '#' + url[baseLength - 1];
return url.join('/');
});
});
通过使用baseLength,我确保在wordpress路径后面添加#(它可以在server.com或server.com/deep/path/to/wp)
现在,我将ajax调用绑定到hashchange事件(用于保留后退按钮等)
$(window).on('hashchange', function(){
//fade current page out
$boek.children().fadeOut(speed);
//get new page
$.get(location.href.replace(/#/,'') + '?ajax=true', function(data) {
$boek.html(data).children().hide().fadeIn(speed);
});
});
我现在在URL中请求页面(删除#后,再次获得完整路径)。
丑陋的部分
我还将get-var‘ajax’附加到url中,这样我就可以通过Wordpress:只提供主要内容
在我的header.php中:
<?php if(!$_GET['ajax']) { ?>
<!doctype html>
...
<?php } ?>
(Footer也是如此)。通过这种方式,我只获取页眉/页脚等之外的内容。把它构建成一个函数imo会干净得多。Wordpress可以做这样的事情吗?我好像找不到。
我只对页面的AJAX内容感兴趣,我需要这些内容,我也想要页面的标题(我现在还没有)。
对于单个页面/帖子,只需通过ajax get请求URL,然后从返回的html中解析出所需的内容。你仍然会得到页眉/页脚等,但你不会在你的页面视图中使用任何一个。
如果你想请求像存档这样的东西,或者只获取页面的一部分,你需要在say函数php中创建一个单独的方法,并通过ajax调用它,特别是通过wp_ajax;http://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(动作)
在这种情况下,我所做的是获取头文件中的任何显示变量,如帖子计数、类别、标签等,然后使用wp_localize_script将这些变量传递给ajax;http://codex.wordpress.org/Function_Reference/wp_localize_script
例如:
wp_localize_script( 'site', 'omanuAjax', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'tag' => get_query_var('tag'),
'cat' => $useCat,
'single' => $wp_query->is_single,
'search' => $wp_query->is_search,
'searchquery' => $searchQuery
));
然后,只需在POST循环中将这些变量解析为POST变量,并返回一个json编码的POST数据数组,然后可以使用javascript随意显示。