Використовуйте WordPress як безголову CMS

Jan 28, 2026

Як

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

Кращі веб-хостинг у 2019 році

Я вже пережив, наскільки легко один сервер може спуститися, виймаючи всі сайти на ньому, що призводить до хвилин або годин серця, що зупиняється (на шахті було 24). Я також бачив, як монолітний CMS-сайт міг зазнати компромісу безпеки та взяти на себе багато зусиль для ремонту (що взяло мені більше двох днів неоплачуваної роботи). Для діапазону веб хостинг Параметри постачальника, перевірте наш гід.

23 чудових прикладів веб-сайтів WordPress

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

Ви будете потребувати…

● комп'ютер з підключенням до Інтернету (ABB)
● Редактор коду (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 — Екрант Starter Starter Gatsby

Тепер, коли ми маємо наш джерело вмісту, давайте принесумо дані та відображати його за допомогою статичного генератора сайту. Моя зброя вибору в цьому царстві є Гатці , відмінний генератор статичного сайту, який побудований з JavaScript. (Див Веб-будівельник вибирає прості способи побудувати сайт.)

Якщо ви шукаєте хороший спосіб побудувати на своїх навичках JavaScript та вивчити реагувати, застрягли в якийсь код, я дуже рекомендую спробувати Гетсбі зробити це. Я багато чого дізнався, граючи з ним.

По-перше, давайте встановимо інструмент командного рядка, який дозволяє створювати сайти GATSBY:

npm install -global gatsby-cli

Тепер перейдіть до папки, де ви хочете зберегти свій сайт і запустити цю команду:

gatsby new blog

Це створить нову папку, що називається "Блог" та встановіть GATSBY та його залежності до цієї папки. Відкрийте цю папку у своєму улюбленому текстовому редакторі. Там може бути багато файлів. Не хвилюйтеся, ми будемо лише безпосередньо редагувати gatsby-config.js , gatsby-node.js файли та ст Папка, де живуть наші шаблони.

Якщо у вас є багато файлів для зберігання, варто оновлення вашого хмара зберігання .

Отримання нашого вмісту

Перший крок, який ми хочемо взяти, це зробити наш вміст від API WordPress Site.

Для цього ми збираємося встановити gatsby-source-wordpress , prewritten плагін для wordpress. Це ілюструє одну з основних причин, я люблю Gatsby - ви можете отримати свої дані з різних джерел. Багато статичних генераторів сайту обмежуються використанням файлів маркування, але Gatsby дуже гнучкий.

Ecosystem Gatsby's Plugin дуже зріла. Є навантаження попередньо притиснутих способів отримання ваших даних та безліч інших розумних функціональних можливостей, які також корисні.

Щоб встановити плагін, спочатку змініть каталог у свій новий сайт gatsby, використовуючи цю команду: блог CD .

Тепер запустіть цю команду: NPM встановлення --save gatsbysource-wordpres s.

Одного разу це зроблено, настав час відкрити файл gatsby-config.js. Ви побачите, що існує вже деякі основні налаштування, що Gatsby дає нам за замовчуванням. Ми будемо будувати на цьому, щоб налаштувати наш плагін тут:

 Модуль.exports = {
 Sitemetadata: {
  Назва: 'Gatsby Default Starter',
 },
 Плагіни: [
  'gatsby-plugin-react-helmet',
  {
   Рішення: "Gatsby-Source-WordPress",
   Опції: {
    baseurl: "my-wordpress-site.com",
    Протокол: "https",
    hostingwpcom: false,
    USEACF: Правда,
    searchandReplaceContenturls: {
     SourceURL: "https://my-wordpress-site.com",
     Replamionurl: "https://my-static-site.com",
    }
   },
  },
 ],
}

Це спрацювало?

Ви можете перевірити, відкривши свій термінал, набравши Гетсбі розвиваються І подивитися, що відбувається. Будьте обережні! Навіть якщо ви отримали свої налаштування, ви все одно отримаєте деякі попередження - це може бути Gatsby шукає вміст, який ви ще не написали.

Тепер ви можете переглянути Gatsby-Starter-default у браузері.


    http: // localhost: 8000 /

Перегляньте GraphiQL, In-Browser IDE, щоб вивчити дані та схему вашого сайту.


  http: // localhost: 8000 / ___ graphql

Зауважте, що створення розробки не оптимізована. Щоб створити виробництво, використовуйте Gatsby Build.

Якщо "Gatsby Default Starter" (праворуч) не те, що ви отримуєте, перевірте веб-сайт 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. Це виявить інші групи вмісту.

Отже, ми зараз маємо вміст у Гетсбі. Далі ми повинні відображати його.

Показати наші повідомлення

Use WordPress as a headless CMS: Gatsby development 404 screen — Gatsby Development 404 Page Показує всі наші публікації WordPress

Для цього наступного кроку ми будемо використовувати gatsby-node.js файл.

gatsby-node.js це файл, який ви можете використовувати для взаємодії з "Node API" "Гетсбі". Тут ви можете контролювати, як створюється ваш сайт та створює сторінки, повідомлення тощо.

Ми збираємося написати деякі інструкції, щоб розповісти Гетсбі, що робити з нашими даними:

 const path = вимагає (`path`);

exports.CreatPages = ({graphql, countaceactioncreators})
= & gt; {
 const {createpage} = countaceactioncreators
 Поверніть нову обіцянку ((рішучість, відхилення) = & gt; {
  graphql (
   `
   {
    allwordpresspost {
     ребра {
      вузол {
       ідентифікатор
       шліфувати
       статус
       шаблон
       формат
      }
     }
    }
   }
  `
 ) .then (результат = & gt; {
   if (result.Erors) {
    Console.Log (результат)
    відхилити (результат)
   }

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

   result.data.allwordpresspost.edges.foreach (Edge = & gt; {
    CreatePage ({
     Шлях: `/ $ {adge.node.slug} /`,
     Компонент: посттечка,
     Контекст: {
      ID: Edge.node.id,
     },
    })
   })
   вирішити ()
  })
 })
}

Цей код створює сторінки з нашого запиту GraphQL, а для кожної сторінки він буде використовувати шаблон, який ми визначили ( /src/templates/post.js ). Отже, далі ми повинні створити цей файл!

Створити поштовий шаблон

Всередині / SRC / Folder, створіть папку, що називається шаблонами та файлом всередині, який називається post.js . Додайте до цього Цей код:

 Імпорт реагування з "Реагую"
Імпорт шолом від "Reach-Helmet"

Class PostTeMplate розширюється rection.component {
 рендеринг () {
  const post = this.props.data.wordpresspost;
  const slug = this.props.data.wordpresspost.slug;

  повернення ("
   & lt; div & gt;
   & lt; helmet title = {`$ {titlestring} | $ {sitetitle} `} / & gt;
   & lt; h1 danceantlystinnerhtml = {{__html: post.title}} / & gt;
   & lt; divenancelysetinnerhtml = {{__html: post.content}} / & gt;
   & lt; / div & gt;
  )
 }
}

Експортуйте за замовчуванням PageTemplate

Експорт Const Query = GraphQL`
 Query PervicePost ($ ID: String!) {
  WordPresspost (ID: {eq: $ id}) {
   заголовок
   зміст
   шліфувати
  }
  сайт {
   sitemetadata {
    заголовок
   }
  }
}

Це використовує інший запит GraphQL, щоб отримати дані про конкретну посаду, яку вона годувала gatsbynode.js Файл, потім використовує реагування, щоб зробити це в браузері.

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

Наступні кроки

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

Там набагато більше до цієї історії та моїх колег, і я широко забронював це Дерева індіго . Я також написав більше на моєму особистому блозі, Смачний реверді .

Будь ласка, зв'язуйтеся зі мною за допомогою цих каналів і на Twitter, щоб почути більше захоплюючих подій у світі безголових CMS!

Ця стаття була опублікована у випуску 308 сітка , журнал найкращого у світі для веб-дизайнерів та розробників. Купити випуск 308 тут або Підписатися тут .

Пов'язані статті:

40 блискучих підручників WordPress
6 кращих порад для успіху CRO у WordPress
10 великих плагінів WordPress для дизайнерів

Використовуйте WordPress як безголову CMS

Починаємо

Використовуйте статичний генератор сайту

Отримання нашого вмісту

Це спрацювало?

Чи можемо ми запитувати наші дані?

Показати наші повідомлення

Створити поштовий шаблон

Наступні кроки

Як - Найпопулярніші статті

Композиція в анімації: вивчити основи

Як намалювати вовк

Посібник з веб-інструментів Google

Як зробити та використовувати Mahlstick для малювання

Як створити автентичну мангу комічну смужку

Включіть меню за допомогою анімації з CSS

Документуйте свої системи дизайну з фракталом

Як скульптувати і позувати мультфільм голова в Збрюш

Категорії