WordPress是一個偉大的平臺，但它有時也會有點無序–至少從程式碼的角度來看。這是因為程式碼已經經歷了許多迭代，隨著更新的推出，有時事情的編碼並不像他們可以做的那樣有效。
雖然程式碼有時會有點亂，但這並不意味著你的開發過程也要跟著亂。雖然混亂的程式碼常常因為快速的生產計劃而被原諒，但作為一個網路開發者，通過實施適當的工作流程，你實際上可以賺取更多。
在這篇文章中，我們將介紹一些提示，幫助你用手頭正確的工具以正確的方式開發WordPress網站。我們還將提供一個循序漸進的步驟，以幫助你遵循這些提示。
通過遵循本指南，你可以避免開發WordPress網站時出現的一些常見問題。而且，你也將能夠建立一個易於維護和更新的網站。
高質量程式碼的屬性
在我們深入研究關於建立WordPress開發工作流程的完整指南之前，讓我們暫停一下，討論一下為什麼高質量的程式碼實際上很重要。很重要。
當考慮你的網站的程式碼時，有幾個關鍵屬性你應該記住。這些屬性將有助於確保你的程式碼是乾淨的，有條理的，並且易於理解。
以下是高質量程式碼的一些屬性。
- 精簡
- 易行
- 模組化
- 評論良好
- 可重複使用，易於維護
這些屬性可能看起來有很多需要記住，但不要擔心。我們將在我們的指南中全面介紹如何實現每個屬性。但首先，我們需要談談為什麼你的開發工作流程必須遵守這些標準。
為何WordPress開發需要一流的編碼實踐
為了使WordPress網站正常執行，構成網站的程式碼需要是高質量的。這對WordPress網站尤其重要，因為它們通常很複雜，有許多不同的移動部件。
有很多原因說明編碼實踐對WordPress的發展很重要。
- WordPress網站很複雜。
- 一行程式碼可以產生很大的影響。
- 程式碼需要寫得很好並經過良好的測試。
- 高質量的程式碼更容易維護。
- 優質的程式碼可以幫助提高效能。
在你的發展規劃過程中牢記這些要點，可以幫助你把注意力放在獎品上，可以這麼說。
WordPress開發流程改進技巧
現在我們已經談到了為什麼擁有良好的程式碼是很重要的，讓我們來看看一些提示，以幫助你改善你的WordPress工作流程的每一個專案。下面的每一個提示都將有助於確保你的WordPress程式碼是乾淨和優化的，這是你在2022年及以後應該優先考慮的。
利用暫存環境
暫存網站是你的真實網站的一個副本，你可以用它來測試變化，然後再在你的真實網站上做這些變化。這是一個有價值的工具，因為它允許你在不影響你的真實網站的情況下對變化進行試驗。
使用暫存網站有許多好處。
- 你可以在你的真實網站上進行修改之前測試這些修改。
- 你可以通過在一個暫存網站上測試來避免潛在的問題。
- 你可以確保你的改變是按預期進行的。
- 你可以避免你的實時網站的潛在停機時間。
- 你可以減少破壞你的直播網站的風險。
實施版本控制
版本控制是一個跟蹤檔案隨時間變化的系統。這對WordPress的開發很有價值，因為它允許你跟蹤變化，並在必要時恢復到早期版本。
對大多數人來說，這意味著使用Git，它是一個流行的版本控制系統。如果你不熟悉，Git是一個免費和開源的分散式版本控制系統，旨在以速度和效率處理從小型到非常大的專案。
Git
當與一個大型的分散式團隊一起工作時，它尤其有用。你最不想遇到的情況是，在你的WordPress安裝中，你的functions.php檔案有多個版本，所有的名字都略有不同，因為有很多人在同時進行修改。
Git vs. GitHub
Git是一個版本控制系統，是一個管理原始碼歷史的工具。GitHub是一家為使用Git的軟體開發專案提供託管服務的公司。
它們是兩種不同的東西，但大多數人使用 “Git “一詞來指代Git和GitHub。
安排自動備份
WordPress開發中最重要的一個方面是備份。備份是至關重要的，因為它們允許你在出錯時恢復你的網站。
有很多方法可以實現自動備份，但最簡單的方法之一是使用WordPress的備份外掛。有許多偉大的備份外掛，但我們推薦使用寶塔的自動備份計劃。
寶塔的自動備份計劃任務
這個外掛將每天自動建立你的WordPress網站的備份，並將其儲存在一個外部伺服器上。
充分利用Linting的優勢
Linting是檢查程式碼是否有錯誤的過程。這對WordPress的開發很有價值，因為它可以幫助你找到並修復你的程式碼中的錯誤。
Sublime Text
許多程式碼編輯器會自動做到這一點，但如果你想確定你的編輯器提供這一功能，可以考慮使用以
下程式碼和文字編輯器之一。
- Sublime Text：這個程式碼編輯器有很多功能，包括提示。
- Atom：這個程式碼編輯器也有內建的打碼功能。
- Vim：這個文字編輯器也提供了提示功能以及許多其他功能。
- Visual Studio Code：這個程式碼編輯器預設提供提示功能
- PHPStorm：這是一個付費的開發環境，它提供了提示功能
使用程式碼生成器
程式碼生成器是一個可以為你自動生成程式碼的工具。這對WordPress的開發很有價值，因為它可以節省你的時間並幫助你避免錯誤。
GenerateWP
有許多程式碼生成器可用，但一些最流行的包括：
- GenerateWP: 這個程式碼生成器可以為自定義帖子型別、分類法、元框等生成程式碼。
- Hasty: 這個程式碼生成器可以為自定義帖子型別、分類法和欄位生成程式碼
- Nimbus Themes Code Generator: 這個程式碼生成器可以為自定義帖子型別、分類法和欄位生成程式碼。
使用WP-CLI
WP-CLI是一個WordPress的命令列介面。這對WordPress的開發很有價值，因為它允許你從命令列管理你的WordPress網站。
當您需要做一些重複性的或需要很多步驟的任務時，這尤其有用。例如，WP-CLI可以用來安裝WordPress，建立文章和頁面，安裝外掛和主題，以及更多。當您需要一次對多個網站進行修改時，它也很有幫助。
使用一個WordPress開發框架
WordPress開發框架是一個可以幫助你簡化工作流程的工具。這對WordPress開發很有價值，因為它可以節省你的時間並幫助你避免錯誤。
Bootstrap
有許多WordPress開發框架，但一些最流行的框架包括：
- Genesis: 這個來自StudioPress的框架是為了幫助你更快地建立WordPress網站。
- Underscores: 這個來自Automattic的框架是為了幫助你快速開始開發WordPress主題
- Foundation: 這個來自Zurb的框架旨在幫助你建立響應式的WordPress網站。
- Bootstrap: 這個來自Twitter的框架是為WordPress網站建立響應式設計的一個超級有用的方法。
使用任務執行器
任務執行器是一個可以自動化任務的工具。這對WordPress開發很有價值，因為它可以節省你的時間並幫助你避免錯誤。它還允許你同時執行多個任務。
Gulp
有許多工執行器可供選擇，但一些最受歡迎的包括：
- Gulp: 這個任務執行器可用於自動化任務，如CSS預處理、JavaScript重新整理等。
- Grunt: Grunt是一個Javascript任務執行器，它可以幫助你實現許多重複性任務的自動化。
- Webpack: 這個任務執行器可用於自動化任務，如捆綁JavaScript檔案等。
立即熟悉Vue.js或React
儘管你可能不會馬上使用Vue.js或React，但現在熟悉這些框架很重要。這對WordPress的開發很有價值，因為隨著時間的推移，它們正變得越來越流行，被使用得越來越多。
Vue.js是一個JavaScript框架，允許你建立反應式使用者介面。React是一個用於構建使用者介面的JavaScript庫。
Vue.js和React都是WordPress開發的熱門選擇，因為它們速度快、重量輕、易於使用，是將WordPress變成無頭CMS的關鍵。
WordPress開發流程規劃的重要性
WordPress網站是複雜的，在開始任何專案之前，有一個良好的計劃的工作流程是很重要的。通過花時間來計劃你的工作流程，你可以節省時間並避免接下來的潛在問題。
規劃你的WordPress工作流程有很多好處。
- 你可以通過了解需要做什麼來節省時間。你可以通過提前
- 計劃來避免潛在的問題。
- 你可以確保所有必要的任務都完成。你可以確保你的工作流程是高效和有效的。
- 在將專案移交給合作者或客戶時，你可以防止出現問題花時間在WordPress工作流程規劃上是至關重要的，因為它可以節省你的時間並幫助你避免潛在的問題。
通過花時間規劃你的工作流程，你可以確保所有必要的任務都得到完成，確保你的工作流程是高效和有效的。
理想的WordPress開發流程
有許多方法來處理WordPress的工作流程，但有一些基本步驟應該包括在你的開發過程中。
Step 1: 設定一個本地開發環境
任何WordPress工作流程的第一步應該是建立一個本地開發環境。這很重要，因為它允許你在離線情況下在你的WordPress網站上工作，這可以節省時間和防止錯誤。
設定本地開發環境的方法有很多，只是取決於你喜歡使用什麼設定。
通過一個完整的WordPress開發環境，並可一鍵推送至上線。
你也可以同時在多個專案上工作，並在上線前合併變化。它還內建了A/B測試、外掛相容性測試和資源密集型測試，以幫助進一步確保你的構建結構合理。
Step 2: 設定版本控制
任何WordPress工作流程的第二步應該是設定版本控制。這很重要，因為它允許你跟蹤你的程式碼的變化，並在必要時恢復到以前的版本。
要做到這一點，你可以使用像Git這樣的工具。這個過程看起來像下面這樣
1. 在GitHub上建立一個儲存庫
要在GitHub上建立一個倉庫，你可以使用以下步驟：
- 登入你的GitHub賬戶，點選右上角的+號。
- 從下拉選單中選擇New repository.
- 為你的資源庫輸入一個名稱和描述，然後點選Create repository.
在GitHub上建立一個倉庫
2. 克隆版本庫到你的本地開發環境
具體步驟如下：
- 在你的倉庫的GitHub頁面，點選Clone or download按鈕。
- 在Clone with HTTPs部分, 複製你的版本庫的URL。
- 在你的開發環境中，開啟終端，切換到你想克隆版本庫的目錄。
- 鍵入以下命令，替換你從Github複製的URL：
git clone https://github.com/YOUR_USERNAME/YOUR_REPOSITORY.git
這將克隆你的版本庫到你的本地開發環境。
3. 新增檔案和提交修改
- 把你想用 Git 追蹤的檔案新增到你電腦上的倉庫目錄。
- 鍵入git add，後面跟著檔名，或者用git add . 來新增目錄中的所有檔案。
- 輸入git commit -m，後面跟一個描述你所做修改的資訊。
- 要把你的改動推送到Github，輸入git push。
現在你可以繼續在你的電腦上對檔案進行修改，並把它們推送到 GitHub。當你想從Github獲取最新版本的檔案時，你可以使用git pull命令。
如果你不使用GitHub，你也可以以類似的方式使用Bitbucket。
Step 3: 本地開發
在你建立了你的本地開發環境和版本控制之後，是時候開始在本地離線開發你的WordPress網站了。
在本地開發時，你可以先在你的暫存網站上測試變化，然後再把它們推送到網上。這很重要，因為它允許你在影響到你的真實網站之前抓住任何錯誤或漏洞。
Step 4: 利用WP-CLI
WP-CLI是一個WordPress的命令列介面，允許您從終端管理您的WordPress網站。這對建立和管理使用者、安裝和更新外掛等任務很有用。
要安裝WP-CLI，請遵循以下步驟：
- 下載WP-CLI phar檔案。
- 將該檔案移到你的PATH中的一個目錄（例如，/usr/local/bin）。
- 將該檔案重新命名為wp。
- 使該檔案可執行（例如，chmod +x /usr/local/bin/wp）。
- 通過執行wp -version測試WP-CI是否已經安裝
從那裡，您可以使用WP-CLI從命令列管理您的WordPress網站。關於命令的完整列表，您可以檢視我們的WP-CLI v2深度指南
Step 5: 用Gulp自動化你的工作流程
Gulp是一個任務執行器，它允許你自動完成一些任務，如最小化CSS和JavaScript檔案，編譯Sass檔案，以及更多。
要使用Gulp，你首先需要在你的系統上全面安裝它。要做到這一點，你需要Node.js、npm和Gulp。在Node.js中執行以下命令：
npm install gulp-cli -g
一旦Gulp安裝完畢，你可以在你的專案根部建立一個gulpfile.js檔案。這個檔案包含你的Gulp任務的程式碼。
例如，下面的gulpfile.js檔案包含一個用於最小化CSS檔案的任務：
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', function() {
return gulp.src('src/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist'));
});
要執行這項任務，你可以使用以下命令：
gulp minify-css
Step 6: 使用Linting
提示工具是靜態程式碼分析工具，幫助你發現程式碼中的錯誤。對於我們這裡的目的，我們使用Atom.io和以下的提示包。
- atom-beautify
- atom-ternjs
- linter
- linter-eslint
- linter-php
- linter-sass-lint
Atom.io
在你的終端中，導航到你想要lint的目錄，執行以下命令：
find . -name "*.js" -o -name "*.scss" | xargs eslint --fix
這將使你的專案中所有的JavaScript和Sass檔案都得到提示。
如果你想對一個特定的檔案進行lint，你可以執行以下命令：
eslint --fix file-name.js
將file-name.js替換為你要提示的檔案的名稱。
Step 7: 使用CSS預處理程式
CSS前處理器是一種工具，它允許你用不同的語言編寫CSS，然後將其編譯成CSS。兩個最流行的CSS前處理器是Sass和Less。
在本教學中，我們將使用Sass。要使用Sass，你首先需要安裝Sass命令列工具。要做到這一點，請執行以下命令。
gem install sass
一旦安裝了Sass，你可以使用以下命令將Sass檔案編譯成CSS。
sass input.scss output.css
用你的Sass檔案的名稱替換input.scss，用你想建立的CSS檔案的名稱替換output.css。
如果你想觀察你的Sass檔案的變化，並自動將其編譯成CSS，你可以使用以下命令：
sass --watch input.scss:output.css
Step 8: 使用部署外掛
部署外掛是一種工具，它允許你輕鬆地將你的WordPress網站從本地開發環境部署到實時伺服器上。
有許多不同的工具可以用於這個目的，但我們推薦使用WP Pusher。WP Pusher是一個免費的部署外掛，你可以在你的WordPress網站上使用
WP Pusher
要安裝WP Pusher，首先，從WP Pusher網站下載ZIP檔案。然後，登入你的WordPress網站，進入外掛>安裝外掛。點選上傳外掛按鈕，選擇你剛剛下載的ZIP檔案。一旦外掛被安裝和啟用，你可以進入設定>WP Pusher來配置它。
一旦WP Pusher配置好了，你就可以把WordPress外掛和主題部署到你的實時伺服器上，而完全不需要與FTP介面互動，也不需要搞亂你的WordPress資料庫。
Step 9: 利用WordPress Rest API
WordPress REST API是一個強大的工具，它允許你從WordPress管理介面之外與你的WordPress網站互動。
WordPress REST API可以用來為你的WordPress網站建立自定義解決方案。例如，你可以使用WordPress REST API為你的WordPress建立一個移動應用程式。網站或建立一個自定義的儀表板。
要開始使用WordPress REST API，你需要通過WordPress命令列介面與它對接。我們最近釋出了一個關於如何設定WordPress REST API的教學，可以指導你完成每個步驟。
Step 10: 建立並遵循樣式指南
樣式指南是一套用於編碼和設計WordPress網站的指南。風格指南有助於確保你的程式碼是一致的和容易閱讀的。
有許多不同的樣式指南，你可以在你的WordPress專案中使用。我們建議使用WordPress編碼標準作為一個起點。然而，隨著時間的推移，你可能會做許多修改和補充
官方WordPress Codex的WordPress編碼標準
你所建立的任何風格指南都有可能一直在變化。但重要的一點是，它為你團隊中的所有開發人員提供了一個確定的步驟集合和遵循的準則。
基本上，你的風格指南應該是你的WordPress工作流程的書面形式。
Step 11: 上線你的網站
一旦你完成了上面所有的步驟，你的WordPress網站就可以被推送上線了。如果你使用像WP Pusher這樣的部署外掛，這個過程就像把你的程式碼推送到你的遠端Git倉庫一樣簡單。
如果你沒有使用部署外掛或Git，你可以簡單地從你的本地開發環境匯出你的WordPress資料庫，並將其匯入你的實時伺服器。你可以通過在你的WordPress管理儀表板上的 “工具”>”匯出 “來做到這一點。
然後，從匯出選項中選擇所有內容，點選下載匯出檔案按鈕。一旦你有了你的資料庫檔案，你就可以通過在你的WordPress管理儀表板上的 “工具”>”匯入 “把它匯入到你的實時伺服器。選擇你剛剛匯出的資料庫檔案，點選上傳檔案和匯入按鈕。
你也可以使用FileZilla這樣的FTP客戶端將你的WordPress檔案從你的本地開發環境手動轉移到你的實時伺服器。只需使用FTP連線到你的實時伺服器，然後把你的WordPress檔案拖放到
public_html目錄中。
一旦你推送了你的WordPress網站，你可以花時間來測試一切，並確保一切都在正常工作。
小結
正如你所看到的，正確地建立一個WordPress開發工作流程有很多事情要做。但是，遵循這些步驟將有助於確保你的WordPress網站有條不紊，易於管理，並且執行順暢。
評論留言