將SvelteKit與無頭WordPress整合

無頭 WordPress 已經成為網路開發領域的一大趨勢。前端和後端解耦（decoupling）可以帶來更精細的控制、全渠道應用以及這種新技術的一些有趣用法。

許多開發人員都喜歡嘗試使用 Vue.js 和 React.js 等框架，甚至 Django 和 Ruby on Rails 等網路框架，但這些框架通常都與 WordPress 不相容。

有很多類似的框架都能很好地與無頭 WordPress 配合使用，但 SvelteKit 是一個特殊的框架。這種使用者介面框架是專為簡化網路應用程式開發而設計的，程式碼簡潔優美。它可以輕鬆簡化通常無法在解耦環境中正常執行的功能。

有興趣瞭解更多嗎？讓我們先來了解一些無頭 WordPress 的基礎知識，然後再教你如何使用 SvelteKit 以及如何讓它在你的環境中執行。

什麼是無頭 WordPress？

您可能已經知道 WordPress 前端和後端的區別。後端是所有底層內容管理系統操作的地方：您可以建立帖子和頁面、安裝外掛、設計主題和更改設定。

在另一端，前端基本上就是向訪問者展示的網站。WordPress及其主題和外掛使用各種函式（如 get_posts() ）來提取和顯示所需的資料。

例如，主頁上顯示的 “最近文章” 小部件。通過這樣的函式，它可以從後端訪問資料，並在公共前端顯示您的最新帖子。

閃電博部落格文章相關推薦

WordPress 的後端和前端是緊密交織在一起的，在很多方面都依賴於對方來執行，但這並不意味著它們是不可分割的。

這就是 “無頭 WordPress” 概念的由來：有了無頭 WordPress，你就可以將 WordPress 後端分離，或者說解耦。這樣，你就可以自由地將它與任何你想使用的前端技術掛鉤–不僅是 PHP，還有任何網路開發框架，甚至是應用程式。

這樣做還有一個額外的功能，就是允許您在多個渠道使用 WordPress 內容管理系統。您可以將部落格文章或其他內容管理系統專案移植到多個網站、移動應用程式以及任何您想要的地方。

總的來說，無頭 WordPress 讓您對內容管理系統有更多的控制權，並能利用通常與之不相容的技術。它還讓您不必從頭開始編寫整個應用程式–您可以使用 WordPress 內建的內容管理系統來完成部分工作。

什麼是 REST API？

要讓無頭 WordPress 正常工作，您需要使用 API 或應用程式程式設計介面來連線您的應用程式。應用程式介面允許兩個不同的應用程式相互連線，在這種情況下，WordPress 後端和您的自定義前端應用程式就可以相互連線。

API 有很多種型別，而 REST API 是WordPress內建的一種。它允許外部應用程式從 WordPress 後臺安全地檢索資料，而無需通過管理介面。

REST API 用於 WordPress 的各種官方功能，包括塊編輯器，大多數需要 API 才能執行的主題和外掛都使用 REST API。
這也適用於無頭應用程式。許多無頭應用程式都使用REST API與WordPress介面，從後端檢索資料，並通過前端應用程式動態呈現。

REST API 提供了代表不同 WordPress 資源的端點，如帖子、頁面、使用者、類別等。通過訪問這些端點，您可以在前端顯示這些資料。

雖然您可以使用 REST API，但 SvelteKit 的許多功能主要依賴於另一種技術：GraphQL.

什麼是 GraphQL？

GraphQL 是一種 API 查詢語言。

GraphQL 本身並不是一種 API，而是一種 API 查詢語言。與傳統的 REST API 不同，傳統的 REST API 客戶端往往需要向不同的端點發出多個請求才能獲取相關資料，而 GraphQL 允許您通過單個請求獲取所有資料。

總之，GraphQL 的設計目的是讓您在一個快速、優化的框架內進行更簡潔的查詢。與 REST API 相比，GraphQL 更容易學習，也不那麼複雜。

出於這些原因，許多無頭 WordPress 框架都使用 GraphQL，而不是 REST API 或與之並用。雖然 GraphQL 並不像 REST API 那樣捆綁在 WordPress 中，但您可以使用一些外掛將此功能引入 CMS。

得益於優化的框架，您可以避免資料抓取不足或抓取過度。您可以在一次查詢中準確獲取所需的資料，這對您的網路和伺服器來說要容易得多。

什麼是 SvelteKit？

SvelteKit 是一個可用於構建應用程式和無頭 WordPress 的框架。

SvelteKit 是一個基於 Svelte 的 Web 框架，Svelte 是一個開源的前端框架，功能類似於 Next.js 或 React。它旨在簡化網路應用程式的建立過程，雖然不是專門為無頭 WordPress 而建，但這只是眾多可能的應用之一。

SvelteKit 基於 HTML、CSS 和 Javascript 構建，僅此而已。這使得它超級易於使用，而且與框架無關，因此您可以將它與其他框架一起使用，建立完全動態的前端應用程式或構建靜態網站。

Svelte 於 2016 年推出，至今仍在積極更新。網路框架 SvelteKit 在幾年後的 2020 年推出。這兩款框架都在網站開發領域享有盛譽，深受喜愛，可以讓您編寫出簡單而優雅的程式碼。

為什麼要使用 SvelteKit 無頭 WordPress？

無頭 WordPress 有幾個方面可能會讓人頭疼。多虧了 SvelteKit 的簡約設計，這些問題才得以最小化，並使無頭 WordPress 的設定更加順暢。

以下是 SvelteKit 提供的部分功能。

• 僅使用 Javascript。與其他框架不同，您幾乎不需要擔心依賴關係和混亂的設定。通常情況下，不需要任何配置。只要 Javascript 可以執行，SvelteKit 就能執行。
• 與框架無關。由於其簡單性，SvelteKit 可與其他框架完美配合。您可以將任何技術引入您的無頭 WordPress 應用程式。
• 可擴充套件。如果 SvelteKit 無法在您的環境中完美執行，您可以非常輕鬆地對其進行擴充套件，並修復任何在您的設定中無法正常執行的問題。
• 輕便易學。SvelteKit 僅依賴於 Javascript、HTML 和 CSS。與傳統框架相比，它非常輕便，而且超級易用。使用緊湊簡潔的元件建立乾淨、優雅、簡單的程式碼。
• 資料獲取變得簡單。與 SvelteKit 配合使用的 GraphQL 簡化了從 WordPress 獲取資料的過程，讓您可以進行更簡潔、更高效的查詢。
• 輕鬆進行身份驗證。SvelteKit 最近支援 NextAuth.js，使您的資料安全無虞，同時易於安裝。
• 伺服器端渲染 (SSR) 和靜態網站生成 (SSG)。SvelteKit 不僅僅適用於靜態網站或動態應用程式。由於提供了多種頁面渲染選項，而且靜態網站生成也很容易完成，因此使用該框架，您可以輕鬆完成任何一種渲染。
• 網站地圖。如果你曾為在無頭網站上生成網站地圖而頭疼不已，那你並不孤單。SvelteKit 允許您使用端點動態渲染網站地圖。
• 活躍的社羣。有很多 SvelteKit 的粉絲正在使用該軟體開發應用程式。如果你需要幫助或想聊聊這個框架，在網際網路和社交媒體上很容易就能找到他們。甚至還有一個擁有 60K+ 成員的 Discord 伺服器！

如何使用 SvelteKit 建立無頭 WordPress 網站

準備好開始了嗎？本指南將指導您在本地環境中設定 WordPress，在機器上安裝 SvelteKit，並在完成後將無頭 WordPress 例項部署到雲伺服器。

步驟 1. 建立 WordPress 網站

在你的機器上設定本地 WordPress 例項有很多種方法。

在本教學中，我們將使用本地 WordPress 開發工具包 DevKinsta。使用 DevKinsta 不需要 Kinsta 託管，它是完全免費的。

從上面的連結下載 DevKinsta。如果需要安裝幫助或想了解安裝技巧，請查閱 DevKinsta 文件。

安裝並設定好 DevKinsta 後，請按照以下步驟建立本地 WordPress 環境。

使用 DevKinsta 建立本地 WordPress 環境。

1. 如果要更改 PHP 版本、多站點等設定，請 New WordPress Site 或 Custom site。
2. 輸入您的網站名稱、使用者名稱、密碼和其他資訊，然後單擊 “Create site“。稍等片刻，DevKinsta 會為您設定本地 WordPress 環境。
3. 您將進入 “Site Info” 頁面。請注意您的網站主機，因為這是您開啟網站所訪問的本地 URL。
4. 單擊 Open site 並導航到 http://<yoursite>.local/wp-admin，或者直接單擊 WP Admin 開啟該頁面。使用之前輸入的憑據登入。

步驟 2. 為無頭部署 WordPress 做好準備

在全新的管理主螢幕上，您需要採取一些額外的步驟，為無頭安裝 WordPress 做好準備。

SvelteKit 的許多功能都依賴於 GraphQL，因此您需要安裝 WPGraphQL。該外掛允許你使用 GraphQL 框架連線到 NextJS、Gatsby 等無頭 Javascript 技術，當然還有 SvelteKit。

使用 WPGraphQL 新增 GraphiQL IDE。

方法是導航到外掛 > 安裝新外掛，然後安裝 WPGraphQL。這將在您的管理欄中新增一個 GraphiQL IDE，您可以用它在 WordPress 中編寫 GraphQL 查詢。

使用 WPGraphQL 在 WordPress 中編寫 GraphQL 查詢。

您還需要修復您的永久連結。WordPress 預設帶有普通永久連結，由於 Next.js 的限制，它無法與 REST 依賴的 JSON API 或 SvelteKit 本身配合使用。

前往 “設定“>”固定連結“，將固定連結從 “樸素” 中移除。您可以試試文章名作為固定連結。

切換到文章名固定連結，以便 SvelteKit 正常工作。

要檢查是否成功，請在本地網站的 URL 中新增”/wp-json”。你應該能看到網站內容以 JSON 資料的形式輸出。

之後，你需要使用全站重定向外掛（如 Redirection 或 All In One SEO Pro），將 URL 指向你建立的前端應用程式。準備好將使用者重定向到 SvelteKit 應用程式後，請安裝並設定重定向外掛。

這樣，您就大功告成，可以安裝 SvelteKit 了。

步驟 3. 設定 SvelteKit 環境

首先，SvelteKit 有一些基本的系統要求，包括 Node 18.13 或更高版本。由於該框架非常輕便，幾乎可以在任何系統上執行。請確保在安裝 Node 的同時還安裝了 npm，否則它將無法執行！

現在，您可以在系統上安裝 SvelteKit。文件中提供了完整的安裝步驟，但以下是基本步驟。

首先，使用 create-svelte 軟體包安裝 Svelte。你可以隨心所欲地給專案命名（”my-svelte-app”）。這條命令將建立一個包含所有基本設定的 Svelte 應用程式。

npm create svelte my-svelte-app

你會看到各種提示；回答 “yes” 或 “no” 即可建立 SvelteKit 環境。

你需要安裝一些 npm 軟體包，因此請使用此命令訪問專案根目錄（將 “my-svelte-app” 替換為你命名的任何名稱）。

cd my-svelte-app/

然後執行此命令安裝所需的軟體包：

npm install

最後，使用此命令執行開發伺服器：

npm run dev

伺服器啟動後，您可以通過以下 URL 檢視正在執行的應用程式：http://localhost:3000

現在，你可能不想使用預設的頁面呈現器，而是想切換到靜態渲染器來生成一個靜態的 SvelteKit 網站。

至此，SvelteKit 應該已經設定成功，你可以開始建立無頭網站了。

步驟 4. 使用 GraphQL 連線 SvelteKit 和 WordPress

在嘗試使用 GraphQL 和 SvelteKit 環境時，請牢記以下提示。

• 閱讀 Svelte/SvelteKit 簡介，全面瞭解該框架的功能。本教學是互動式的；您可以親自嘗試使用程式碼！
• 如果您在手動設定 GraphQL API 時遇到困難，不妨安裝 SvelteKit GraphQL 包。
• 作為 WPGraphQL 的一部分，您還可以通過 wp-graphql-gutenberg 使用 Gutenberg 區塊，該外掛是標準外掛。
• 雖然您可以在一定程度上使用 SvelteKit 的 REST API，但 GraphQL 的擴充套件功能與此框架配合使用效果最佳。如果你更願意使用 REST API，請檢視 GitHub 上的 SvelteKit headless WordPress 演示，它使用 REST API 連線兩個平臺。

您還應該閱讀有關載入資料和路由的知識，以便將 SvelteKit 和 WordPress 整合在一起。連線 WordPress 和構建無頭應用程式的方法有很多。

步驟 5. 將 WordPress 和 SvelteKit 部署到雲伺服器

設定好無頭環境並準備好部署後，你需要採取兩個不同的步驟： 部署 WordPress 和將前端推送到靜態網站。

WordPress 部分非常簡單。在 DevKinsta 的 Site Info 頁面上，您應該能看到 Push to staging 按鈕。您需要使用 Kinsta 認證登入，之後就大功告成了。

至於你的 SvelteKit 應用程式，也很簡單。Kinsta 提供免費的靜態網站託管服務，能與大多數用 SvelteKit 構建的應用程式完美配合。具體操作如下：

1. 將 SvelteKit 應用程式推送到 Bitbucket、GitHub 或 GitLab。
2. 建立 Kinsta 賬戶並登入 MyKinsta 面板。
3. 登入你選擇的 Git 賬戶並授權 Kinsta。
4. 在 MyKinsta 中單擊 Static Sites，然後單擊 Add Site。
5. 選擇應用程式的版本庫，並新增適當的構建設定。
6. 單擊 Create site。

無論如何，您的無頭網站現在已經部署完成！您已經準備好展示全新的無頭 WordPress 應用程式了。

小結

無頭 WordPress 如今大行其道，但設定起來並不容易。SvelteKit 就是為了讓網站開發更簡潔、更輕鬆而專門構建的，該框架非常適合無頭 WordPress 設定。