使用WordPress的单页应用程序:路线和模板

时间:2017-08-11 作者:Daniele Squalo

(仔细阅读,这是一个关于Wordpress的问题,而不是关于AngularJS的问题)

我正在尝试使用AngularJS和Wordpress rest API创建一个单页应用程序。

创建公共主题时通常会用到的许多东西(如模板层次结构、各种设置等)在这种情况下看起来无效,除非我决定以某种方式反映这些方面。

实际上,我正在处理页面模板。

现在,问题出在一些页面需要对REST API进行多个HTTP调用。例如,我为我的主页设计了一个滑块;这可以通过主题定制器进行配置。通常,我会用get_theme_mod() 获取一系列幻灯片到我的页面模板;在这个SPA中,我创建了一个端点,使其通过API可用,并使用AngularJS的$http服务加载它。可以通过customizer配置的任何东西都会发生同样的情况。当然,这会减慢加载过程。

我想用PHP编写我的部分,并在那里提供Wordpress函数。这将大大减少通话次数,但我找不到办法。

它应该是通过URL使模板可用的东西;我想用PHP来表示所有的页面,用角度数据来表示会发生什么变化。非常感谢您的帮助。

编辑可能问题不清楚。实际上,我所做的是使用一个控制器来满足RESTAPI中的所有需要。控制器看起来像这样(是的,这是角度代码;省略了异常处理以缩短它)

app.controller(\'allposts\', function ($scope, $http) {
    $http.get(\'wp-json/wp/v2/posts?_embed&per_page=6\').then(function (res) {
        $scope.status = res.status;
        $scope.posts = res.data;
    });
})
.controller(\'slider\', function ($scope, $http) {
    $http.get(\'wp-json/ajst/v0/homeslider\').then(function (res) {
        $scope.slides = res.data;
    });
    $scope.interval = 4500;
})
.controller(\'featuredproducts\', function ($scope, $http) {
    $http.get(\'wp-json/ajst/v0/showcase\').then(function (res) {
        $scope.products =  res.data;
    });
})
所有这些都有我创建的自定义端点,但都放在一个模板页面中。我想要的是使用第一个(与单个帖子和页面的类似控制器一样多),但使用PHP WordPress函数加载其他功能。

那么呢?嗯,路由系统使接下来的事情变得不那么简单。通常,post是使用permalinks调用的。我编写了一个角度配置,它反映了permalink结构,因此帖子仍然可以使用相同的permalinks。但如果我只是编写一个部分PHP模板并加载它,WordPress函数就不会在那里定义(当然):

$routeProvider.when(\'/\', {templateUrl: partials.folder + \'home.html\', controller: \'allposts\'});
(partals.folder在functions.php文件中定义)主页。html是包含所有这些控制器的模板文件。所以,我想要的是,允许使用Wordpress认可的PHP模板,但不能通过permalink。非常感谢。

1 个回复
SO网友:Daniele Squalo

最后,我解决了这个问题。要使用php文件作为angularjs路由的部分,我必须包含该文件wp_load.php 在他们身上。

在代码中,在每个部分的顶部:

<?php include_once(\'wp_load.php\'); ?>
现在我可以在任何地方使用wp函数。请记住,您需要相对路径,所以您应该根据您的情况调整它。就这么简单。

结束

相关推荐

Editing a theme's templates

我已成功安装模板。我知道如何使用模块、文章和菜单创建。我不知道如何使用代码部分。如何更改css上的样式如何修改模板如何修改主页我已多次尝试在安装目录中查找文件夹,但未能找到。如何查找并更改它。