今天要為大家介紹的是一款基于 React JS，以文字為主的 WordPress SPA 主題 —— Foxhound，該主題使用 React JS 為前端框架，通過 WordPress Restful API 調(diào)用 WordPress 文章數(shù)據(jù)并展示在前端，主題沒有太多花哨的功能，僅支持文章、頁面、評論圖片等 WordPress 內(nèi)容的正常顯示，主題內(nèi)所有的鏈接都已經(jīng)轉(zhuǎn)換成了 React Router 鏈接，所以這是一個 WordPress 單頁面應(yīng)用主題，適合以文字為主的博客使用。
Foxhound React 主題功能及設(shè)置
因為這是一個實驗性的主題，在讓主題工作之前，我們需要做一些設(shè)置，們組一些條件，首先，我們需要內(nèi)置 REST API 的 WordPress 4.7 以上的版本，因為 WordPressREST API 沒有為菜單提供端點，我們需要安裝 WP-API Menus 插件；WordPress 站點的固定鏈接格式必須為，/%year%/%monthnum%/%postname%/，否則文章/頁面將不能工作，相應(yīng)的，分類目錄和標簽前綴應(yīng)該設(shè)置為 category 和 tag。Foxhound 主題比較適合注重文本的網(wǎng)站，在文章列表頁面只顯示文字，在文章和頁面正文頁面，顯示一張?zhí)厣珗D像。
Foxhound React 主題的一些限制
因為是基于 React JS 開發(fā)的主題，F(xiàn)oxhound 主題在功能上會有一下限制，不會像其他基于 PHP 的WordPress主題那樣工作。 如果瀏覽器禁用了 JavaScript，主題不會顯示任何內(nèi)容。
對于 Google 來說，使用 Foxhound 主題不會對 SEO 造成不好的影響，因為 Google 已經(jīng)何以抓取 JS 生成的內(nèi)容了。也不會影響網(wǎng)站的可訪問性（2012年99％的屏幕閱讀器用戶啟用了JavaScript），百度能不能抓去 JS 生成的內(nèi)容目前還沒有一個官方的說法。
WordPress Restful API 不能被一些安全插件屏蔽，一些插件可能會屏蔽用戶端點，而顯示作者存檔的時候需要此端點，如果一定要屏蔽用戶端點，作者存檔頁面就無法顯示了。
如果禁用了主題，站點的固定鏈接結(jié)構(gòu)會被改變，我們需要一些重定向插件來做好 301 重定向。
該主題支持嵌套分類目錄存檔，是有父級主題可以顯示為存檔方式，以后的版本中可以會修復(fù)這個問題。
如果插件添加了內(nèi)容到站點前端，插件可能不會正常工作，大多數(shù) Jetpack 功能可以正常工作。
如果我們登錄了站點，管理工具條不會根據(jù)不同的頁面更新， “編輯 X” 鏈接將保留為最初打開那個頁面的鏈接，強制刷新當前頁面后，編輯鏈接才會變?yōu)楫斍绊撁娴逆溄印?/p>
主題開發(fā)
我們也可以從主題的 Git 倉庫中安裝主題，然后自己構(gòu)建，下載主題到 /themes 目錄，然后運行npm 安裝并構(gòu)建, JavaScript 和 CSS 文件. 流程如下：
git clone https://github.com/ryelle/Foxhound foxhound
cd foxhound
npm install
npm run build運行上面的命令之后，我們可以在主題目錄中找到 build/app.js 文件, 然后，在儀表盤，切換主題為 Foxhound 主題即可。
除了上面的命令，我們還可以使用以下幾個命令進行一些操作。
npm run dev：運行 webpack, 此命令編譯的代碼包含代碼源地圖，方便前端調(diào)試。npm run watch：運行 webpack –watch, 會運行前面的所有命令，同時也會監(jiān)控源文件的變化，當源文件改變時會自動重新編譯，開發(fā)時可以使用這個命令及時查看修改后的效果。npm run lint：檢查所有 JavaScript 文件. Webpack 在編譯之前也會檢查, 但是只會顯示錯誤信息，此命令會同時顯示警告信息。
在PHP端，F(xiàn)oxhound 主題修改了一些自定義路由鏈接以方便 React JS 訪問數(shù)據(jù)。
由于主題功能比較簡單，使用范圍可能有限，但是這是 Github 可以找到的位數(shù)不多的 WordPress React 主題，有比較大的學習借鑒意義，感興趣的朋友可以閱讀一下源碼，試著改造一下，看是否能二次開發(fā)為自己需要的樣式。
