創建一個帶有前景的無頭WordPress網站

基於React的框架的Frontity簡化了快速無頭WordPress網站的創建。將其視為WordPress的Next.js。儘管無頭WordPress可能現在是一個利基市場，但Frontity的展示突顯了其日益普及，以CNBC Africa和Forbes Africa等著名網站為特色。它的文檔和教程主要集中在無頭博客上。

本指南詳細介紹了創建基本的前線站點並自定義其默認火星主題（在後續文章中）。我們將使用Frontity框架掩蓋設置無頭WordPress網站。

目錄

• 先決條件和要求
• 了解界限
• 界面站點安裝：
  • 步驟1：項目創建
  • 步驟2：選擇火星主題
  • 步驟3：項目安裝
  • 步驟4：目錄更改和服務器重新啟動
• WordPress網站設置：
  • 實現漂亮的永久鏈接
• 將界限連接到WordPress：
  • 步驟1：菜單更新
  • 步驟2：項目文件夾結構
  • 步驟3：樣式修改
• 部署到Vercel：
  • 步驟1：構建生產版本
  • 步驟2：Vercel帳戶創建
  • 步驟3：創建vercel.json
  • 步驟4：部署
• 結論
• 資源

這不是專家指南，而是實用的演練。有關全面的詳細信息，請諮詢Frontity的官方文件。

先決條件和要求

建議熟悉React和ES6 JavaScript。其他要求（詳細介紹了前線文檔）：

• HTML和CSS的能力
• 命令行經驗
• node.js服務器
• 代碼編輯器

了解界限

界限是專門為WordPress設計的React框架。它具有自己的州經理和CSS樣式解決方案。它以兩種模式運行：

• 解耦模式： Frontity從WordPress REST API獲取數據，將最終的HTML作為同構React應用程序提供。主要領域指向前線，以及WordPress的子域。
• 嵌入式模式：前線主題取代了WordPress主題。一個插件向HTML的Frontity Server提出了內部HTTP請求。主要域指向WordPress。

Frontity的內置AMP功能優化了頁面速度。

額葉站點安裝

這涉及建立一個界限項目和一個WordPress站點（作為數據源）。

首先，確保安裝node.js和npm：

節點 -  version
npm- version
NPM安裝NPM@最新-G＃升級NPM（如果需要）

步驟1：創建一個界項目

使用前線CLI：

 NPX界限創造了我的額度

步驟2：選擇火星主題

界限提供了兩個主題；選擇mars-theme 。

步驟3：跨性項目安裝

Frontity Server安裝項目及其依賴關係。

步驟4：更改目錄並重新啟動開發服務器

導航到項目目錄並啟動服務器：

 CD My-Frontity
NPX前線開發＃或紗線前景開發

訪問http://localhost:3000 。

WordPress網站安裝

設置WordPress站點（本地或現有）。確保可以訪問WordPress REST API（例如， http://mytestsite.local/wp-json ）。

啟用漂亮的永久鏈接

在設置>永久鏈接中激活漂亮的永久鏈接（帖子名）。

連接前線與WordPress

更新frontity.settings.js ：

 // Frontity.settings.js
const設置= {
  ...，，
  軟件包：[
    ...，，
    {
      名稱：“@Frontity/wp-source”，
      狀態： {
        來源： {
          API：“ http：//your-wordpress-site.com/wp-json” //用您的URL替換
        }
      }
    }
  這是給出的
}

重新啟動服務器。

步驟1：更新菜單

按照火星主題的結構，將您的菜單項添加到frontity.settings.js 。

步驟2：項目文件夾結構

了解項目的結構： node_modules ， package.json ， frontity.settings.js ， packages/mars-theme 。

步驟3：修改樣式

界限使用情感進行造型。根據主題組件中需要修改樣式。

部署到Vercel

步驟1：創建生產版本

NPX界限構建

步驟2：Vercel帳戶創建

創建一個Vercel帳戶並登錄：

 NPX Vercel登錄

步驟3：創建vercel.json

創建vercel.json ：

 {
  “版本”：2，
  “構建”：[
    {
      “ src”：“ package.json”，
      “使用”：“@Frontity/現在”
    }
  這是給出的
}

步驟4：部署

NPX Vercel

結論

Frontity為構建無頭WordPress站點提供了用戶友好的方法。

資源

• 界限文檔
• 前線博客
• 相關的YouTube教程（搜索“界教程”）

以上是創建一個帶有前景的無頭WordPress網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！