Используйте WordPress как безголовый CMS

Sep 16, 2025

Инструкции

Сначала я слышал о беговых подходе CMS в разговоре, я смотрел из города Твин Друпал. Мне понравилась идея разделения опасений между авторским содержанием и просмотра его.

Лучшие услуги веб-хостинга в 2019 году

Я уже испытал, как легко один сервер может пойти вниз, вынимая все сайты на нем, что приведет к минутам или часам сердечной паники (было 24 на шахте). Я также видел, как монолитный сайт на основе CMS может понести компромисс безопасности и принять много усилий для ремонта (что мне потребовалось более двух дней неоплаченной работы). Для ряда веб хостинг Варианты провайдера, проверьте наше руководство.

23 Отличные примеры веб-сайтов WordPress

Я видел преимущества CDNS (сетки доставки контента), которые могут хранить свои изображения, аудио и видео файлы на серверах, оптимизированных для быстрой доставки и могут дублировать эти файлы по всему миру для быстрого доставки в эти регионы, если это необходимо. Что если ваш ваш сайт может извлечь выгоду из этого подхода?

Тебе понадобится…

● Компьютер с подключением к Интернету (ОВС)
● Редактор кода (Atom или VS код)
● командная строка оболочки / терминал
● Недавняя версия Node.js установлена (вы можете скачать и AMP; установить здесь Несомненно
● сайт WordPress для получения контента. Если у вас нет одного, вы можете использовать платформу WordPress.com или это Heroku Build Pack Отказ
● исходные файлы от github Отказ

Начиная

WordPress выходит из коробки с помощью API для отдыха, и это то, что мы собираемся использовать для запроса ваших данных. Поэтому нам не нужно ничего другого! Наш сайт отображения полностью отделен от нашего содержимого сайта, поэтому нам не понадобятся Темы WordPress или любая другая настройка вне нескольких (необязательных) плагинов. Хотя, конечно, вы можете добавить их, если хотите.

Исключением является если вам нужны пользовательские метательные поля для дополнительных областей содержания. Вы, вероятно, используете передовые пользовательские поля для этого; Вы можете добавить эти данные в API WordPress Установка этого плагина Отказ

Используйте статический генератор сайта

Use WordPress as a headless CMS: Gatsby starter screen — Экран стартера GATSBY по умолчанию

Теперь, когда у нас есть источник содержимого, давайте принесем данные и отобразим ее с помощью статического генератора сайта. Мое оружие выбора в этом царстве Гэтсби , отличный статический генератор сайта, который построен с JavaScript. (См Строитель сайта Выбирает простые способы построить сайт.)

Если вы ищете хороший способ построить на навыки JavaScript и учитесь реагировать, застряв в какой-то код, я настоятельно рекомендую попробовать GATSBY для этого. Я многому научился сам, играя с ним.

Во-первых, давайте установим инструмент командной строки, который позволяет нам создавать сайты GATSBY:

npm install -global gatsby-cli

Теперь перейдите к папке, где вы хотите сохранить свой сайт и запустить эту команду:

gatsby new blog

Это создаст новую папку «Блог» и установить GATSBY и ее зависимости к этой папке. Откройте эту папку в вашем любимом текстовом редакторе. Там может показаться много файлов. Не волнуйтесь, мы будем напрямую редактировать только gatsby-config.js. , GATSBY-NODE.JS. файлы и сортировка Папка, где живут наши шаблоны.

Если у вас есть много файлов для хранения, оно того стоит обновить облачное хранилище Отказ

Получение нашего содержания

Первый шаг, который мы хотим взять, - это получить наш контент от API WordPress Site.

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

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

Чтобы установить плагин, сначала измените каталог на свой новый сайт GATSBY, используя эту команду: CD Blog Отказ

Теперь запустите эту команду: NPM установить --save gatsbysource-wordpres с.

Как только это сделано, пришло время открыть файл gatsby-config.js. Вы увидите, что на месте уже есть какая-то базовая настройка, которую GATSBY дает нам по умолчанию. Мы собираемся построить это, чтобы настроить наш плагин здесь:

 Module.exports = {
 Sitemetadata: {
  Название: «Гэтсби по умолчанию стартер»,
 },
 плагины: [
  «GATSBY-Plugin-React-Helmet»,
  {
   Решение: «GATSBY-Source-WordPress»,
   опции: {
    BaseUrl: «My-WordPress-site.com»,
    Протокол: «HTTPS»,
    hostingwpcom: false,
    USEACF: правда,
    searchandreplacecontenturls: {
     sourceurl: "https://my-wordpress-site.com",
     замена: "https://my-static-site.com",
    }
   },
  },
 ],
}

Это работало?

Вы можете проверить, открыв свой терминал, набрав Гэтсби развивается И посмотри, что происходит. Имейте в виду! Даже если вы получили ваши настройки правильными, вы все равно получите некоторые предупреждения - это может быть GATSBY ищет контент, который вы еще не написали.

Теперь вы можете просмотреть GATSBY-Starter - по умолчанию в браузере.

<Код> http: // localhost: 8000 /

Просмотр GraphiQL, IDE в браузере, чтобы исследовать данные и схему вашего сайта.

<Код> http: // localhost: 8000 / ___ graphql

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

Если GATSBY Updy Starer (вправо) не то, что вы получаете, проверьте ваш сайт WordPress не в поддомен, что он определенно использует HTTPS или HTTP и что у вас есть то же самое в ваших настройках.

Теперь мы можем пойти на http: // localhost: 8000 / и посмотреть наш сайт GATSBY!

Можем ли мы запросить наши данные?

Возможно, вы заметили, что здесь нет контента WordPress. Это потому, что мы не сказали Гэтсби, что делать с этим. Прежде чем мы сделаем это, давайте просто проверим, мы на самом деле получили наш контент для GATSBY. Для этого посетите этот URL:

<Код> http: // localhost: 8000 / ___ graphql

Этот встроенный инструмент называется Graphiql и является другой секретной силой GATSBY.

GraphQL похож на отдых: это способ запроса данных. Но с graphql вы можете взаимодействовать с вашими данными гораздо легче. Graphiql (визуальный IDE для graphql) может показать нам некоторые из этих трюков. На левой панели попробуйте набрать следующее:

 {
 allwordpresspost {
  ребра {
   Узел {
    я бы
    стержень
    положение дел
    шаблон
    формат
   }
  }
 }
}

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

Что вы получили, когда нажали Ctrl + Enter в GraphiQL? Вы надеетесь, что увидели ваши сообщения и страницу WordPress на правой части экрана.

Мы на самом деле собираемся использовать этот запрос на нашем следующем шаге, так что держите его полезным! Возможно, вы захотите увидеть, какие еще данные вы можете получить с GRAPHIQL, пока вы здесь. Если вы хотите сделать это, попробуйте переместить курсор и набрав пробел CTRL +, так и / или Ctrl + Enter. Это раскрывает другие группы контента.

Итак, у нас теперь есть контент в GATSBY. Далее нам нужно отобразить его.

Показать наши сообщения

Use WordPress as a headless CMS: Gatsby development 404 screen — Страница разработки GATSBY 404, показывающая все наши сообщения WordPress

Для этого следующего шага мы собираемся использовать GATSBY-NODE.JS. файл.

GATSBY-NODE.JS. это файл, который вы можете использовать для взаимодействия с «Узел API узла GATSBY». Здесь вы можете управлять, как создается ваш сайт и создает страницы, сообщения и многое другое.

Мы собираемся написать несколько инструкций здесь, чтобы сказать GATSBY, что делать с нашими данными:

 Const Path = требует (`путь`);

Exports.reatepages = ({graphql, bindactioncrators})
= & gt; {
 const {createepage} = границыКреаторы
 вернуть новое обещание ((разрешение, отклонение) = & gt; {
  graphql (
   `
   {
    allwordpresspost {
     ребра {
      Узел {
       я бы
       стержень
       положение дел
       шаблон
       формат
      }
     }
    }
   }
  `
 ). Затем (результат = & gt; {
   Если (Результат. Эрроры) {
    console.log (Результат. Эрроры)
    Отклонить (Результат. Эрроры)
   }

   const posttemplate = path.resolve (`/src/templates/
post.js`)

   Recost.data.allwordpressPost.edges.foreach (edge = & gt; {
    создать страницу({
     Путь: `/ $ {Edge.node.slug} /`,
     Компонент: posttemplate,
     контекст: {
      ID: Edge.node.id,
     },
    })
   })
   разрешить()
  })
 })
}

Этот код создает страницы из нашего запроса GraphQL и для каждой страницы он будет использовать шаблон, который мы определили ( /src/templates/post.js. ). Итак, теперь нам нужно создать этот файл!

Создать почтовый шаблон

Внутри / SRC / папка создайте папку, называемую шаблонами и файл внутри, который называется Post.js. Отказ Добавить к нему этот код:

 Импорт реагирует с «Реагистрация»
Импортный шлем из «React - Helmet»

PostTemplate класса Extense React.comPonent {
 оказывать() {
  const post = this.props.data.wordpresspost;
  const slug = this.props.data.wordpresspost.slug;

  возвращаться (
   & lt; div & gt;
   & lt; helmet title = {`$ {titleestring} | $ {siteTitle} `} / & gt;
   & lt; h1 dangerynysetinnerhtml = {{__html: post.title}} / & gt;
   & lt; div daverylysetinnerhtml = {{__html: post.content}} / & gt;
   & lt; / div & gt;
  Несомненно
 }
}

Экспорт по умолчанию PageMate

Export Const Query = GraphQL`
 Запрос CurrentPost ($ ID: String!) {
  WordPressPOST (ID: {eq: $ id}) {
   заглавие
   содержание
   стержень
  }
  сайт {
   Sitemetadata {
    заглавие
   }
  }
}

Это использует другой запрос GraphQL, чтобы получить данные о конкретном посте, который его подан gatsbynode.js. Затем файл использует реагирование, чтобы рендер это в браузере.

Если вы хотите быстро увидеть список всех ваших сообщений, вы можете ввести http: // localhost: 8000 / a в адресную панель вашего браузера. Это отвезует вас на страницу разработки 404, которая перечисляет все ваши посты. Нажмите на один, чтобы посетить его!

Следующие шаги

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

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

Пожалуйста, держите связь со мной через эти каналы и в Twitter, чтобы услышать более захватывающие события в мире безголовых CMS!

Эта статья была первоначально опубликована в вопросе 308 сеть Самый продаваемый журнал мира для веб-дизайнеров и разработчиков. Купить проблему 308 здесь или же Подписаться здесь Отказ

Статьи по Теме:

40 Brilliant WordPress Учебники
6 лучших советов для CRO успеха в WordPress
10 великолепных плагинов WordPress для дизайнеров

Используйте WordPress как безголовый CMS

Начиная

Используйте статический генератор сайта

Получение нашего содержания

Это работало?

Можем ли мы запросить наши данные?

Показать наши сообщения

Создать почтовый шаблон

Следующие шаги

Инструкции - Самые популярные статьи

Портрет фотографии: Как сделать идеальные портреты

Учебники Крита: Узнайте основные основы программного обеспечения для цифрового искусства

Создать портрет искусства в Corel Painter

Как работает работает в 3D-приложениях

Создание пользовательского интерфейса на основе карты с основой

5 советов для лепки в двойном быстром времени

Преобразуйте фото в набор VR

Как создать яркую сказочную королеву

Категории