安裝 WordPress 本機端環境

如果你想要貢獻 WordPress,例如修正一個 bug,或是針對其他開發者所提交的 patch 進行測試,那麼首先你必須要有一個本機端的開發環境,這個開發環境跟我們之前介紹的架設網站的開發環境不太一樣。因為在修正bug或是測試時,所針對的版本一定是目前開發中最新的程式(尚未發佈),所以透過建置這個環境,你可以確認每個開發者的開發環境都是一致的,也比較不會產生其他問題。

如果你要建置 WordPress 本機端環境 (WordPress Local Environment),首先你必須要確認你的電腦中有安裝 Docker 以及 node.js。

1.下載最新開發中版本 WordPress

WordPress 目前開發中的版本可以在 Github 上找到,請透過 git 指令將程式碼下載到你電腦中的資料夾。

下載完成後,切換到安裝的目錄中,可以看到整個檔案目錄結構,可以看到這跟我們一般架設網站時所安裝的 WordPress 資料夾並不一樣,這個資料夾包除了包含了 WordPress 本身的核心檔案外(src資料夾中),還包含了一些讓本機環境執行起來的設定檔,以及開發和測試的相關工具。

2.執行 npm install

在你剛剛下載核心程式的資料夾中,執行 npm install。這個指令會根據 package.json 中的定義安裝相關的套件到 node_modules 資料夾中。

3.執行 npm run build:dev

這個指令會執行一些工作,例如確認程式碼的格式是否符合標準,同時根據設定將程式準備適合開發者使用。

4.執行 npm run env:start

這個指令會啟動 docker。

啟動之後,在瀏覽器輸入 http://localhost:8889,即可連線到剛啟動的 WordPress 網站。

5.執行 npm run env:install

6.執行 npm run env:stop

如果你要停止開發環境,請執行 npm run env:stop

結論

以上就是使用官方的工具來架設本機的開發環境,如果你要貢獻 WordPress 核心,這絕對是不可忽略的第一步喔!

參考資料

修正 npm 錯誤

最近在嘗試架設 WordPress Local Environment,因為需要 node,所以就試著看看電腦上的 node 能不能跑(因為之前有安裝過了)。結果一跑就出現錯誤,錯誤訊息類似這個。網路上找了一些參考資料,大概的原因可以歸納為 node 沒有安裝乾淨,所以必須重新安裝和進行一些設定。

主要參考的文章如下:

把 node 移除

brew uninstall --ignore-dependencies node 
rm -rf /usr/local/bin/node 
rm -rf /usr/local/bin/npm 
rm -rf /usr/local/bin/node_modules

重新安裝 node

brew install node
npm -v

出現以下錯誤

執行 brew link node

執行 brew link node,會出現無法 symlink 的錯誤,建議使用 brew link --overwrite node
執行後發現有權限的問題,改執行 sudo chown -R $(whoami) $(brew --prefix)/*

執行 brew doctor

發現有一些 unbrew header files 和 broken symlink,建議使用 brew cleanup 來移除

執行 brew cleanup

執行完後,再次執行 brew link node ,會出現下圖中的錯誤訊息。

執行 brew update-reset

再次執行 brew link node

執行 brew link node ,如果出錯則嘗試執行 brew link --overwrite node
終於可以 link 了!執行 node -v ,顯示安裝的 node 版本。

以上,終於修正 node 的問題啦!可以繼續下一步了!

使用 VS Code 遠端編輯 WordPress 檔案

通常在製作 WordPress 網站時會建議你在本地端製作並編輯好後,再上傳到正式機上。這樣做的原因,除了速度比較快之外,也可以避免因為編輯錯誤而導致網站出錯無法運行。

如果你要在本機端製作網站,首要工作就是在自己的電腦建立網站運行的環境。關於如何在本機建立網站執行環境,可以參考我之前寫的相關文章:

但有時候就是比較懶惰一點,不想要那麼麻煩,或是這個網站還在開發中,就算出錯無法運行也沒關係,那麼直接改主機上的檔案也是一個選擇。通常我們會將檔案透過 FTP 從主機下載下來,修改好後再透過 FTP 上傳到主機,不過這樣子做還是稍嫌麻煩。

如果你平常習慣的編輯器是 VS Code,那麼就可以透過 VS Code 直接連線到遠端的主機來修改檔案(如果你是高手都直接 SSH 到主機用 vi/vim 修改程式就略過此文吧!),你可以維持平常在電腦上使用 VS Code 的編輯體驗,又可以省去 FTP 下載上傳的動作,修改網站的速度瞬間大幅提升!以下就跟大家說明要怎麼使用 VS Code 來直接修改遠端的網站檔案。

前置作業與需求

1.你的電腦必須要有 VS Code (這不是廢話嗎?)
2.遠端的主機必須支援 SSH 連線:這邊以 Cloudways 主機當範例。

安裝 Remote Development 套件包

這個套件包會包含三個套件:

如果你選擇安裝 Remote Development 套件包,上述這三個套件會同時安裝,你也可以選擇單獨安裝某一個套件。安裝的方式很簡單,在 Code 開啟套件視窗,搜尋 remote development,就可以找到此套件。

安裝好後,在你的編輯器左下方,會有一個新的 icon (下圖紅色框框標示),顯示連線狀態(下圖顯示的狀態為本機環境)。

遠端連線狀態會顯示你目前連線的環境是本機還是遠端,點擊會開啟 Remote SSH 命令視窗。你也可以透過 Command Palette (Command+Shift+P 或是 Function+F1 on Mac)來快速開啟 Remote SSH 命令視窗。

選擇 Remote-SSH: Connect to Host 來進行連線,並輸入主機的連線資料,格式為 user@host。這邊以 Clooudways 為例,你可以在你的 Cloudways 找到主機的 Master Credentials,user 就是下圖中的 Username,而 host 則是下圖中的 Public IP。

在連線資訊中輸入主機的連線資料,輸入完畢後按下 Enter,即會嘗試連線到你的遠端主機。

如果你是透過帳號密碼的方式登入,會出現密碼輸入的提示視窗,要求你輸入密碼。輸入密碼後按下 Enter,來完成連線。

當透過 Remote SSH 來連線到遠端主機,VS Code 會開啟一個新的視窗。連線成功後,在左下方的連線狀態,就會顯示你連線的 hostname。

成功連線到主機後,預設是不會開啟任何資料夾的,你可以在 Explorer 視窗來開啟資料夾。

點擊 Open Folder 會開啟資料夾瀏覽視窗,你可以點擊要開啟的資料夾,選擇完成後,按下 OK,即會嘗試開啟遠端的資料夾內容。如果你是透過帳號密碼的方式連線,這邊可能會再次要求你輸入密碼來完成連線。

連線成功後,即會顯示遠端的資料夾和檔案內容了,你就可以開始編輯網站的檔案囉!

在遠端開發的狀態下,你也可以直接在 Terminal 執行一些指令,例如查看主機的資源使用狀況。

在開啟命令列的狀態下輸入 top 來顯示主機資源使用狀況,是不是很方便呢?

以上說明介紹了如何透過 VS Code 來編輯遠端主機檔案。如果你希望省去每次連線都要輸入帳號密碼的麻煩,你也可以透過 SSH Key 的方式來進行連線。

使用 SSH Key 來進行連線

在 Cloudways 的 Master Credentials 中,你可以設定你的 SSH Publick Keys。如果你還沒有SSH Public Key,你可以參考這篇文章

新增一個 SSH Keys。輸入一個方便辨識的標籤,並在 SSH Key 的內容輸入你的 SSH Public Key,並按下 Submit 來儲存內容。之後連線時就不用重複輸入密碼囉!

如果你連線的主機是經常連線的主機,每次要輸入連線資訊也是很麻煩的一件事。這時候你可以考慮將連線資訊儲存起來,這樣就不用每次都要手動輸入了。

儲存 SSH Host 資料

在原本輸入連線資料的視窗,點擊 Add New SSH Host,來輸入連線資訊。

輸入 SSH 連線指令。

選擇你要儲存到哪一個 SSH Config

之後開啟 SSH 連線視窗時,就會出現先前儲存的 hostname,點擊後就可以直接連線了。

使用心得

使用 VS Code Remote Development 讓你可以直接在遠端的機器上開發,省去建置本機端的開發環境,這在開發環境建置不易的狀況下會很有幫助。個人覺得有一些情境還蠻適合使用的:

  1. 自己的網站或部落格:反正掛了也沒關係,再趕快改好就好了。
  2. 公司新同事onboarding,避免因為光建置環境就花去新同事一堆時間,讓他心生挫折。直接做一個現有的開發環境給他,讓他透過 VS Code 連線到遠端的開發環境,快速開始進行開發或是學習的工作。
  3. 實體架站或是程式設計課程:若對象是新手,或是開發環境比較難建置,可以考慮直接將開發環境建置好,然後複製好幾份,學生只要安裝好 VS Code,就可以連線到遠端的環境進行程式的修改或是開發,大大省去前期環境架設的時間。而且通常上課的學生電腦環境不一,有些人是 Mac 或 Linux,有些人用 Windows,有時光要把環境架設起來就花掉一堆時間了。這時候如果有一個統一的遠端環境相信會方便許多。
  4. 程式的執行環境比較特殊一點,例如國外有人透過 VS Code 遠端連線到 Raspberry Pi 來編寫程式。

相關參考資料

使用 Local by Flywheel 進行 WordPress 本地端開發

先前我們介紹過如何使用 DesktopServer 進行本地端開發,當時文章中提到了另一款類似的付費工具 pressmatic,如今已被 Flywheel 買下,而買下之後 pressmatic 更名為 Local by Flywheel ,且變成完全免費,使用 Local by Flywheel 可以快速建構本地端的開發環境。

Flywheel 於日前也被 WPEngine 收購了,所以將來也許 Local 也會加入對 WPEngine 的整合。

目前 Local 除了免費的版本外,也提供了付費的版本,付費的版本多了一些進階的功能,像是團隊的協作,以及可以直接將你在電腦上做好的網站同步到 Flywheel 上。免費和付費版本的比較可以參考官網的比較圖

1.下載 Local

到 https://local.getflywheel.com/ 下載

2.啟用 Local

第一次啟用時需安裝一些軟體,從畫面可以知道,Local 的執行實際上是透過 virtualbox 的虛擬化技術

安裝完後會進入 Local 的網站管理介面,介面相當的簡潔,按下 Create A NEW SITE 開始建立你的第一個網站吧!

3.建立網站

跟著 Local 的步驟即可完成網站的建立。第一個步驟需要輸入網站簡單的名稱,作為識別用,你也可以設定網站的domain,這邊預設是用.local當結尾,你也可以用.test(但不要用 .dev,因為 .dev 已經是 google 買下的頂級網域,無法作為本機開發使用)。網站資料的路徑預設是放在 ~/Local Sites/ 底下,你也可以改成你習慣的位置。

因為本地端開發經常會需要建立新網站,這時候你可以建立一個安裝包,這邊稱作 blueprint,例如你可以將 WordPress 和你經常使用的插件打包成 blueprint,這樣下次開新網站時,只要選擇這個安裝包就可以直接安裝,不用再重新下載那些經常使用的插件,是不是很方便呢!

  1. Step1: 輸入網站基本資訊
  2. step2 選擇網站環境
  3. step3 設定 wp 帳號資訊

完成後按下 add site, 即可完成網站建置,由於我們是第一次建立網站,Local 會詢問要不要將剛剛設定的網站管理員帳號密碼設成預設,這樣下次就不用再重新設定。

你的第一個網站就完成囉!

在瀏覽器中輸入test.local, 即可看到我們剛安裝好的網站

WordPress Customizer

customizer-4.2-1024x516

 

簡介

Customizer 是 WordPress 提供的一個即時預覽的framework。它提供了一個簡單且一致的介面讓使用者可以針對主題或網站進行不同層面的客製化,包含了顏色,Layout,widget、menu等功能。主題和插件可以增加客制的設定到Customizer中。Customizer是一個標準的方法來增加設定項到你的主題。

Customizer 物件

Customizer API 是物件導向的。主要有四種類型的物件:Panels, Sections, Settings 和 Control。Settings 和 UI 元件 (Control) 關聯,儲存設定到資料庫。Sections是用來組織Controls的容器。Panels則是Secionts的容器,可以讓多個 Sections 群組起來。

每一個 Customizer物件都能用一個 PHP 類別來表示,所有的物件則夠過 WP_Customize_Manager 這個物件來管理。

customizer-object-types

To add, remove, or modify any Customizer object, and to access the Customizer Manager, use the customize_register hook:

要新增,移除或修改任何的Customizer物件,同時存取 Customizer Manager, 請使用 customize_register hook:

為什麼你該在 Virtual Machine 中進行開發

前言

前幾天把我的筆電作業系統從 OS X 10.8 升級到 OS X 10.9, 結果導致一些軟體無法執行,像是原本使用 homebrew 安裝的 PHP 找不到一些相依的 libray, Apache 的設定也被回復至預設的設定等,導致在修正這些問題上花了不少時間,雖然最後順利修復了,不過整個過程真的覺得非常的挫折,也影響了原本的開發進度。有了這次的經驗,決定來研究如何在虛擬機中進行開發,來降低環境設定過程中的問題,進而加快設定時間讓整個開發流程更加順利。

閱讀更多為什麼你該在 Virtual Machine 中進行開發