Одностраничные приложения с WordPress: маршруты и шаблоны

Вопрос или проблема

(Читать внимательно, это вопрос о 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. Вот шаги для реализации:

  1. Включение wp_load.php: Включите файл wp_load.php в начале каждого частичного шаблона, чтобы обеспечить доступ к функциям WordPress. Пример:

    <?php include_once('wp-load.php'); ?>

    Убедитесь, что путь к файлу wp_load.php правильный относительно вашего частичного шаблона.

  2. Настройка маршрутов AngularJS: Когда вы настраиваете маршруты AngularJS, указывайте на ваши частичные шаблоны. Например:

    $routeProvider.when("/", {
        templateUrl: partials.folder + 'home.php', // Используйте .php вместо .html
        controller: 'allposts'
    });
  3. Оптимизация HTTP-запросов: Если у вас есть возможность, попробуйте объединить несколько REST API запросов в один, чтобы уменьшить количество сетевых вызовов. Это можно сделать, создав специальную конечную точку API, которая будет возвращать все необходимые данные за один запрос.

  4. Кэширование результатов: Подумайте о кэшировании результатов с помощью стандартного кэширования WordPress или сторонних решений, чтобы улучшить производительность и снизить нагрузку на сервер.

  5. Тестирование и отладка: Убедитесь, что все функции WordPress работают корректно в ваших частичных шаблонах, проводя тестирование и отладку.

Заключение

Использование wp_load.php для доступа к функциям WordPress в частичных шаблонах AngularJS — это эффективный способ решения проблемы интеграции функций WordPress в SPA. Следуя описанным выше шагам, вы сможете значительно упростить процесс получения данных и улучшить общую производительность вашего приложения. Если у вас есть дополнительные вопросы или вам нужна дальнейшая помощь, не стесняйтесь обращаться!

Оцените материал
Добавить комментарий

Капча загружается...