使用Sage現代化WordPress主題開發

Sage：現代WordPress主題框架

幾年前，我們以WordPress主題框架為“根源”。 此後，根已經發展成為一家提供兩個強大工具集的公司：鼠尾草和基岩。本文著重於Sage，這是一個利用HTML5樣板，Gulp，Bower和Bootstrap的框架，用於簡化WordPress主題開發。我們將概述這些工具，安裝，自定義和基本的Sage Workflow。

鼠尾草的關鍵優勢：>

使用HTML5樣板，Gulp，Bower和Bootstrap等工具進行現代化的WordPress主題開發，從而產生了有效且響應迅速的主題。
• >
>通過強大的構建過程簡化資產管理和自動化。
>提供了一個清晰的目錄結構，可輕鬆導航和自定義。
• >為各種主題方面提供了廣泛的自定義選項。
通過browsersync。
• 基本工具：

html5樣板：

>可提供堅固基礎的強大前端模板。

• gulp：用於諸如縮小，串聯，圖像優化和測試之類的任務的自動化工具。
• 鮑爾：>前端資產的軟件包管理器，簡化了JavaScript庫的包含。
• > browsersync：啟用同步的文件更改和跨多個設備的交互。
• 資產構建器＆Wiredep：協助資產收集和依賴注入。
> bootstrap：
• 一個流行的前端框架，用於創建響應式網站。
• >安裝： SAGE安裝使用Git。 導航到您的WordPress主題目錄並在您的終端中執行以下命令（替換為
>用您選擇的主題名稱）：

>

>或者，從github存儲庫下載zip文件，提取並將內容複製到WordPress主題目錄中的新文件夾。 >>> 接下來，通過將此行添加到您的

>文件：>來為開發模式配置WordPress：>

theme-name

主題目錄結構：

git clone https://github.com/roots/sage.git theme-name

Sage保持標準的WordPress主題結構，並具有增強功能的添加：

• >核心文件（index.php，functions.php，404.php，等）
）
• lib>目錄：包含主題配置和實用程序文件（assets.php，init.php，titles.php）。
• >目錄：將SASS/SIMEL文件包含在assets main.css
目錄：包含用於主題翻譯的
• >文件。 lang> sage.pot
>目錄：持有基於HTML5樣板的模板。
• templates

自定義：

>通過

>文件自定義Sage。 關鍵自定義點包括：

lib/init.php

標題標籤：
• 啟用/禁用標題標籤修改>。 add_theme_support('title-tag')導航菜單：
使用
• >。 註冊導航菜單 register_nav_menus()>張貼縮略圖：
啟用/禁用特色圖像，使用
• 。 add_theme_support('post-thumbnails')帖子格式：
使用
• 管理啟用的郵政格式 add_theme_support('post-formats') html5標記：
使用
• >。 。 add_theme_support('html5')編輯器樣式節：
>使用
• 。 側欄：add_editor_style()>在
函數中使用
• 寄存器側欄。 register_sidebar()widgets_init()工作流：

Sage的工作流程依賴於Node.js和NPM軟件包。使用NPM安裝必要的工具：

使用Bower：

使用Bower命令來管理前端軟件包：

git clone https://github.com/roots/sage.git theme-name

：搜索包裝。

>

：安裝軟件包。

• bower search <query>：列表已安裝的軟件包。
• bower install <package>：卸載軟件包。
• bower list
使用Gulp：
• bower uninstall <package>>安裝Gulp插件：

>運行以編譯和優化資產。 提供實時更新。

文件控制構建過程。 根據需要自定義任務和設置

和

。

define('WP_ENV', 'development');

。

gulp結論： gulp watch Sage為WordPress主題開發提供了強大而有效的方法。通過利用現代工具和簡化的工作流程，開發人員可以輕鬆地創建高質量的響應式主題。 本文提供的過程和自定義選項的詳細說明應使您能夠有效利用SAGE為下一個WordPress主題項目。

以上是使用Sage現代化WordPress主題開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！