這篇實作文章利用WordPress 的 靈活性和React強大的使用者介面 (UI) 進行主題開發。它示範了整合WordPress 和 React如何 透過引導您完成創建主題所需的步驟來提升您的 WordPress 專案。
目錄
先決條件
建立基本的 WordPress 主題結構
將 React 整合到 WordPress 中
為主題開發React元件
如何在 React 中處理 WordPress 數據
在 WordPress 專案中使 廣告資料 用 React WordPress 主題
先決條件
要閱讀本文您應該具備以下條件：
一個 WordPress 網站。 Kinsta 提 阿富汗電話號碼列表 供了多種設定選項，包括 使用DevKinsta進行本機開發、用戶友好的MyKinsta 儀表板或透過 Kinsta API 以程式設計方式進行開發。
Node.js 和 npm ( Node Package Manager ) 或安裝在電腦上的yarn
What is that WordPress Theme?
Curious what WordPress theme a site is using? Use our free tool to gain insights into what theme is being used, and other key info.
Search theme
建立基本的 WordPress 主題結構
建立基本的 WordPress 主題結構涉及設定一系列文件和目錄，WordPress 使用這些文件和目錄將主題的樣式、功能和佈局應用到 WordPress 網站。
在您的 DevKinsta 環境中，造訪您網站的資料夾。導航到wp-content/themes 目錄。
為您的主題建立一個新資料夾。資料夾名稱應該是唯一的且具有描述性—例如my-basic-theme。
在主題的資料夾中，建立這些基本檔案並將其留空：
style.css — 這是一個主要樣式表檔。它還包含主題的標題資訊。
function.php — 此檔案定義主題要使用的函數、類別、操作和篩選器。
index.php — 這是主模板檔。所有主題都需要它。
如果您不使用 React，則也必須建立以下檔案。但透過 React，我們稍後會為它們創建元件。
header.php — 包含網站的標頭部分。
footer.php — 包含網站的頁尾部分。
sidebar.php — 對於側邊欄部分，如果您的主題包含側邊欄。
接下來，打開style.css 並將以下內容添加到文件頂部：
此程式碼片段是 WordPress 主題style.css檔案的標頭部分 ，其中包含基本元數據，例如主題名稱、作者詳細資訊、版本和許可證。它可幫助 WordPress 識別並在儀表板中顯示主題，包括其描述和分類標籤。
將 React 整合到 WordPress 中
將 React 整合到 WordPress 主題中可以讓您使用 React 基於元件的架構在 WordPress 網站中建立動態、互動式 UI。要整合 React，您將使用@wordpress/scripts 套件。
使用 @wordpress/scripts 設定 React
開啟終端並導航到主題的目錄：
cd wp-content/themes/my-basic-theme
初始化一個新的 Node.js 專案：
npm init -y
安裝@wordpress/scripts並@wordpress/element：
npm install @wordpress/scripts @wordpress/element –save-dev
請注意，此步驟可能需要幾分鐘。
修改您的package.json 檔案以包含start 一個build 腳本：
“scripts”: {
“start”: “wp-scripts start”,
“build”: “wp-scripts build”
用於 啟動具有熱重載功能的開發伺服器以用於開發目的 ( start) 以及將 React 應用程式編譯為靜態資產以用於生產 ( build)。
創建一個反應項目
為主題中的 React 原始檔建立一個名為src的新目錄。
在src 資料夾中，建立兩個新檔案：index.js 和App.js。
將以下程式碼放入index.js：
import { render } from ‘@wordpress/element’;
import App from ‘./App’;
render(, document.getElementById(‘app’))
上面的程式碼render 從@wordpress/element 元件導入函數App 。然後，它將App 元件安裝到文件物件模型 (DOM)。
