Вопрос или проблема
(Читать внимательно, это вопрос о WordPress, а не о AngularJS)
Я пытаюсь создать одностраничное приложение с AngularJS и REST API WordPress.
Многие вещи, которые являются обычными при создании общей темы (такие как иерархия шаблонов, различные настройки и т.д.), выглядят недействительными в этом случае, если я не решу отразить эти аспекты каким-либо образом.
На самом деле я занимаюсь шаблонами страниц.
Теперь проблема
Некоторые страницы требуют нескольких HTTP-запросов к REST API. Например, я разработал слайдер для своей главной страницы; он может быть настроен через настраиватель тем. Обычно я просто использовал бы get_theme_mod()
, чтобы получить массив слайдов для своих шаблонов страниц; в этом SPA я создал конечную точку, чтобы сделать это доступным через API и загрузил ее, используя сервис $http AngularJS. То же самое происходит с любыми элементами, которые могут быть настроены через настраиватель. Конечно, это замедляет процесс загрузки.
Я хотел бы писать свои парциальные шаблоны на PHP и иметь доступ к функциям WordPress там. Это существенно сократило бы количество вызовов, но я не смог найти способ сделать это.
Это должно быть что-то, что делает шаблон доступным через URL; я хочу использовать PHP для того, что одинаково для всех страниц, и данные Angular для того, что будет меняться. Любая помощь будет принята с благодарностью.
ИЗМЕНЕНИЕ Возможно, проблема была неясной. На самом деле я использую контроллер для всего, что мне нужно от REST API. Контроллеры выглядят вот так (да, это код Angular; обработка исключений была опущена для сокращения)
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.
Итак, что же? Что ж, система маршрутизации делает то, что следует, не таким простым. Обычно посты вызываются с использованием постоянных ссылок. Я написал конфигурацию angular, которая отражает структуру постоянной ссылки, так что посты по-прежнему доступны с использованием тех же самых постоянных ссылок. Но если я просто напишу частичный PHP-шаблон и загружу его, функции WordPress не будут определены там (конечно):
$routeProvider.when("https://wordpress.stackexchange.com/", {templateUrl: partials.folder + 'home.html', controller: 'allposts'});
(partials.folder была определена в файле functions.php) home.html — это мой файл шаблона со всеми этими контроллерами. Таким образом, я ищу, чтобы мне разрешили использовать PHP-шаблон, который распознается WordPress, но не через постоянную ссылку. Спасибо.
В конце концов, я это решил. Чтобы использовать php файлы в качестве парциальных для маршрутов angularjs, мне нужно было включить файл wp_load.php
в них.
В коде, вверху каждого парциального файла:
<?php include_once('wp_load.php'); ?>
Теперь я могу использовать wp функции где угодно. Имейте в виду, что вам нужен относительный путь, поэтому вам нужно адаптировать это под свои ситуации. Это было так просто.
Ответ или решение
Для создания одностраничного приложения (SPA) с использованием AngularJS и REST API WordPress действительно могут возникнуть сложности, особенно если речь идет о загрузке контента и доступе к функциям WordPress в ваших шаблонах.
Основная проблема
Вы, похоже, столкнулись с ситуацией, когда для получения различных компонентов страницы через REST API требуется несколько HTTP-запросов. Например, для отображения слайдера на главной странице вы создали собственную конечную точку REST API, но это увеличивает время загрузки страницы.
Хотя вы хотите использовать PHP-шаблоны для работы с общими данными (например, извлечение настроек через get_theme_mod()
), требования маршрутизации AngularJS усложняют это. При использовании AngularJS маршруты обычно не обрабатываются сервером, что затрудняет интеграцию с стандартными функциями WordPress.
Решение
На основе вашего редактирования, вы нашли способ интегрировать функции WordPress в свои шаблоны с помощью включения файла wp_load.php
. Это решение позволяет вам использовать функции WordPress в ваших частичных шаблонах, загружаемых через AngularJS. Вот шаги для реализации:
-
Включение
wp_load.php
: Включите файлwp_load.php
в начале каждого частичного шаблона, чтобы обеспечить доступ к функциям WordPress. Пример:<?php include_once('wp-load.php'); ?>
Убедитесь, что путь к файлу
wp_load.php
правильный относительно вашего частичного шаблона. -
Настройка маршрутов AngularJS: Когда вы настраиваете маршруты AngularJS, указывайте на ваши частичные шаблоны. Например:
$routeProvider.when("/", { templateUrl: partials.folder + 'home.php', // Используйте .php вместо .html controller: 'allposts' });
-
Оптимизация HTTP-запросов: Если у вас есть возможность, попробуйте объединить несколько REST API запросов в один, чтобы уменьшить количество сетевых вызовов. Это можно сделать, создав специальную конечную точку API, которая будет возвращать все необходимые данные за один запрос.
-
Кэширование результатов: Подумайте о кэшировании результатов с помощью стандартного кэширования WordPress или сторонних решений, чтобы улучшить производительность и снизить нагрузку на сервер.
-
Тестирование и отладка: Убедитесь, что все функции WordPress работают корректно в ваших частичных шаблонах, проводя тестирование и отладку.
Заключение
Использование wp_load.php
для доступа к функциям WordPress в частичных шаблонах AngularJS — это эффективный способ решения проблемы интеграции функций WordPress в SPA. Следуя описанным выше шагам, вы сможете значительно упростить процесс получения данных и улучшить общую производительность вашего приложения. Если у вас есть дополнительные вопросы или вам нужна дальнейшая помощь, не стесняйтесь обращаться!