Применение WordPress как Headless CMS.

WordPress долгое время был лучшим решением для создания веб-сайтов. От простых статических целевых страниц до блогов и сайтов электронной коммерции. Однако есть один серьезный недостаток - масштабируемость и возможность многократного использования. Допустим, вы хотите использовать свой контент в других клиентах или службах, например, в мобильном приложении. В большинстве случаев это затруднительно из-за монолитной структуры WordPress.

WordPress, однако, добавил WordPress REST API, который позволяет разработчикам получать доступ и использовать данные вне WordPress. Единственная проблема в том, что данные из REST API раздуты и содержат много ненужного. Вот почему мы выбрали GraphQL.

Мы будем работать с автономной версией WordPress, хотя вы можете легко получить полную установку WordPress, если приобретете тарифный план хостинга у хостинг-провайдера. Однако вам это понадобится только тогда, когда вам нужно разместить серверную часть WordPress.

Я расскажу, как настроить его локально.

Начиная

Требование:

  • Настройка ЛАМПЫ
  • Базовые знания WordPress
  • Базовые знания Graphql

Загрузите последнюю версию WordPress здесь. Это загрузит файл .zip на ваш локальный компьютер.



Загрузить
Используйте программное обеспечение, на котором работает более 39% Интернета. Есть несколько способов получить WordPress. Самый простой - через… wordpress.org



Распаковка файла должна дать вам папку WordPress, содержащую все важные файлы, необходимые WordPress. Откройте свой терминал или командную строку и пройдите в папку WordPress.

cd ~/Downloads/wordpress

Оказавшись в папке WordPress, вам нужно будет использовать интерактивную оболочку PHP, чтобы запустить простой сервер.

Убедитесь, что вы находитесь в корневом каталоге, содержащем файл index.php, оттуда выполните:

php -S localhost:8000

Это должно запустить сервер на порту 8000. Перейдите к localhost: 8000 в своем браузере. Вы должны увидеть страницу регистрации WordPress. Выберите язык и нажмите Продолжить.

Сразу после этого вам должно быть представлено приглашение. Здесь вас попросят предоставить некоторую информацию о базе данных, в том числе: имя, имя пользователя, пароль, префикс таблицы и хост. Это позволяет WordPress генерировать все необходимые таблицы для полной установки.

Прежде чем продолжить этот шаг, важно правильно установить PHP и MySQL на вашем компьютере. Вот руководство, которое я написал, оно должно помочь вам настроить ваш компьютер для разработки PHP.



Автостопом по установке Laravel | Devjavu
Это почти прямое руководство по настройке Laravel на вашем компьютере. Laravel, если вы еще не знали, это… devjavu.space



Убедившись, что они настроены правильно, введите данные для своей базы данных WP.

  • Имя базы данных: имя существующей базы данных MySQL (обязательно сначала создайте ее).
  • Поле Username - это имя пользователя, имеющего доступ к вашей базе данных MySQL (обычно «root»).
  • Пароль: это должен быть пароль пользователя MySQL при настройке. Если вы не устанавливали пароль, вы можете оставить это поле пустым.
  • Хост базы данных: поскольку мы работаем на нашем локальном компьютере, это будет localhost. WP автоматически устанавливает значение, поэтому оставьте его как есть.
  • Префикс таблицы: этот префикс должен быть уникальным, если вы собираетесь запустить другую установку WP локально. Однако я оставлю это.

Если все было сделано правильно, вы должны увидеть следующий экран, сообщающий вам, что WordPress теперь может взаимодействовать с вашей базой данных:

Введите необходимую информацию и нажмите «Установить WordPress».

Установка займет всего несколько секунд.

Прекрасная работа! Теперь у нас локально установлен WordPress. Войдите в систему, указав детали, на панели администратора.

Установка WPGraphQL

После входа в систему перейдите к параметру «Плагины» и выберите «Добавить плагин».

Найдите graphql и установите плагин WPGraphQL. После установки нажмите Активировать, чтобы включить плагин.

Теперь вы должны увидеть новый пункт меню под названием «GraphQL» слева.

Наведите указатель мыши на этот параметр меню и выберите «Настройки», это приведет вас к странице настроек WpGraphQL. На странице настроек вам будет предоставлена ​​возможность изменить конечную точку GraphQL, которая определяет, куда вы будете выполнять запросы и вносить изменения.

Значение по умолчанию - /graphql, можете оставить это так, измените его только в том случае, если вы хотите что-то другое. Остальные настройки пока оставим как есть.

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

Доступ к данным (сообщениям) WordPress теперь можно получить с помощью запросов GraphQL. Вы можете протестировать свой GraphQL-сервер с любым HTTP-клиентом, например Postman или Insomnia. Однако, если у вас их нет, плагин WPGraphQL поставляется с предустановленной IDE, которая может помочь вам изучить Graph API. Чтобы получить доступ к этой среде IDE, наведите указатель мыши на параметр GraphQL на левой боковой панели и выберите GraphiQL IDE.

Это представляет собой интерактивную IDE GraphQL, в которой вы можете тестировать мутации и запросы и видеть результаты в реальном времени.

Обратите внимание на закомментированную часть среды IDE, здесь вы пишете свои запросы. Вверху справа вы можете увидеть опцию Документы. Это позволяет вам изучить документацию всех существующих схем, требуемых аргументов, типов и возвращаемых значений. Значок воспроизведения вверху - это то, что мы будем использовать для выполнения наших запросов, чтобы визуализировать результат.

Тестирование запросов Graphql

Напишем несколько запросов для тестирования нашей конечной точки GraphQL. Мы получим все сообщения, но только их идентификатор и заголовок.

query {
  posts {
    nodes {
      title
      id
    }
  }
}

Вы должны увидеть такой результат:

Во время установки WordPress автоматически создает фиктивный пост с названием «Hello World». Попробуйте создать больше сообщений на панели управления администратора, затем вернитесь в среду IDE и снова запустите запрос.

На боковой панели наведите указатель мыши на параметр «Сообщения» и нажмите «Добавить», напишите контент и опубликуйте.

Я создал еще два поста и добавил категорию для каждого из них. Теперь давайте посмотрим на новый ответ на наш запрос GraphQL.

Обратите внимание, что теперь у нас есть две новые записи, которые были добавлены. Давайте также запросим категорию для каждого сообщения.

Здесь категория для каждого сообщения теперь включена в ответ. Таким образом мы получаем только те данные, которые нам нужны. Из ответа выше мы можем увидеть идентификатор каждого из этих сообщений, давайте попробуем запросить отдельное сообщение.

query {
 post (id: "cG9zdDo4") {
    title
    date
    featuredImage {
      node {
        sourceUrl
      }
    }
    author {
      node {
        name
        avatar {
          url
        }
      }
    }
    content 
    commentCount
    comments {
      nodes {
        author {
          node {
            name
          }
        }
      }
    }
  }
}

Мы должны получить такой ответ:

{
  "data": {
    "post": {
      "title": "Another One!",
      "date": "2021-01-14T00:32:16",
      "featuredImage": {
        "node": {
          "sourceUrl": "http://localhost:8000/wp-content/uploads/2021/01/ErpnGkxXIAApIWY.jpeg"
        }
      },
      "author": {
        "node": {
          "name": "admin",
          "avatar": {
            "url": "http://2.gravatar.com/avatar/2dd6fd016d24468771b83f558e22544c?s=96&d=mm&r=g"
          }
        }
      },
      "content": "\n<p>Nothing to see here.</p>\n",
      "commentCount": null,
      "comments": {
        "nodes": []
      }
    }
  },

Это должно дать вам общее представление о том, как превратить ваш сайт WordPress в сервер GraphQL. Далее я покажу вам, как использовать эти данные в приложении Vue.js, а пока…

Привет ☕️