
本月 WordPress.com 開發團隊宣布推出全新工具「Studio」,號稱是在本機電腦建立 WordPress 網站最快、最簡單的方式,對於開發人員、設計人員和網站管理員來說都是非常方便的功能,使用 Studio 可以直接在電腦產生和運行 WordPress 網站,無論是進行網站開發、編輯、向客戶或同事展示正在進行的專案都可透過此工具輕鬆完成,不用再去額外付費租用伺服器空間或部署複雜難懂的開發環境。
Mac 版開放下載,Windows 版本即將推出
在寫這篇文章時 Studio 官網已經有 Mac 版本供使用者免費下載(還分為適用於 Apple Silicon、Intel 核心的不同版本),Windows 版也將在不久之後推出,有需要取得早期存取權限的話可以在 Studio 官網進行登記。
Studio 也是開放原始碼程式(GitHub),在一般使用下無需註冊、登入 WordPress.com 帳號,唯有使用「共享示範網站」功能來展示網站時才會需要登入,這項功能會將本機電腦上的網站發布至 WP Cloud 並產生一個臨時網址,期間可隨時將更新推送到示範網站,在七天後示範網站就會過期失效。
免配置傳統的架站環境,讓開發過程更流暢
Studio by WordPress.com 採用全新的方法進行本機 WordPress 開發,而不是一般常聽到的 MAMP 或 Docker,不用預先安裝傳統 Apache、NGINX 網頁伺服器、MySQL 資料庫,使用的是 WordPress Playground,這項技術將 PHP 做為二進位檔案執行、並將 MySQL 替換為 SQLite 。

Studio 將建置 WordPress 本地環境的難度降到最低,沒有複雜的設定和相容性問題,透過可視化介面就能快速新增、刪除網站或進行各項自訂編輯,也能利用共享功能連接 WP Cloud 產生示範用的網站網址。
結合自己喜愛的開發工具
在本機建立 WordPress 進行開發最棒的就是檔案都會在電腦上,未來要移動到實際運作的環境就會很簡單,而且還能使用自己喜歡且慣用的開發工具(例如 VS Code、PhpStorm 和 Terminal)和開發流程,在 IDE、CLI 或是文件瀏覽器和編輯器中開啟網站的程式碼都會更順暢。
Studio by WordPress.com
https://developer.wordpress.com/studio/
使用教學
下載 Studio 並新增第一個 WordPress 網站
STEP 1
從 Studio by WordPress.com 網站找到應用程式的下載按鈕,目前只有 Mac 版本,還分為 Apple Silicon、Intel 核心適用的應用程式,依照需求下載即可,若是 Windows 使用者也能點擊下方按鈕先登記,未來在開放下載時就能第一時間收到通知。

STEP 2
將 Studio 拖曳到應用程式資料夾、執行後就能新增 WordPress 網站,預設會有網站名稱、本機路徑,相關檔案都可以在電腦上找到,對於開發後要匯出或搬移資料就很簡單。

點擊繼續後就會開始新增網站,過程非常快速、幾秒鐘就能看到主畫面。

STEP 3
Studio 主畫面左側會列出所有已建立、運作中的 WordPress 網站,右側則會有網站的 WP 控制台、網站鏈結和各項自訂功能,包括:網站編輯器、樣式、版面配置、導覽、外觀和頁面。

使用 Studio 建立的 WordPress 範例網站是在本機上運行,看到網址列會是 localhost ,相較於以往要在本機架站真的是簡單太多,而且也省去會讓大多數人卻步的複雜設定過程,馬上就有一個現成的 WordPress 範例網站。

預先產生 WordPress 管理員密碼
Studio 在建立網站時不會要求使用者設定使用者名稱和密碼,而是直接產生一個隨機密碼,點擊網站上方標籤的設定即可找到,包括網站詳細資訊、WP 管理員資訊,就能利用這個密碼來登入 WordPress 控制台。

點擊 Studio 網站詳細資訊上方的「WP 管理員」也能快速進入控制台,

WordPress 網站編輯器、樣式和版面配置
當前 WordPress 內建編輯器就能對網站外觀或各項細節進行「所見即所得」編輯,不同於以往的開發流程,透過瀏覽器就能直接編輯網站,在開發速度上更快、難度也更低了,而且 WordPress 佈景主題庫有很完整的外觀可供下載、套用,其實很容易就能做出符合自己需求的網站。
其他像是網站的導覽選單、各個部分的範本、外觀或頁面也都能從編輯器快速調整,這部分就不多做說明。


如果是在 Studio 中建立 WordPress 佈景主題,也可以從 WordPress 網站編輯器右上角「選項」選單中的「匯出」來匯出主題,匯出後會把所有檔案打包為 .zip 壓縮檔格式。

使用 WP Cloud 產生分享示範網站
STEP 1
儘管 Studio 讓使用者在本機建立 WordPress 網站很方便,但如果要進行分享、依然必須要有網址才行。
還好應用程式已經內建「共享」功能,可以藉由免費的 WP Cloud 分享示範網站,簡單來說,它會將本機網站的資料複製到線上、同時產生一個讓其他人也能瀏覽的網址,中途若有任何的更新也能隨時推送到示範網站,但是保存時間只有七天,過期後就無法瀏覽。
在使用分享網站的功能前會要求登入 WordPress.com 帳戶,沒有的話也可免費註冊。

STEP 2
登入後在共享功能裡就會有「新增示範網站」按鈕。

點擊這項功能就會將本機 WordPress 複製到 WP Cloud 並建立一個網站,背後使用的是 WordPress.com,沒有複雜的伺服器設定、冗長的部署流程,整個過程大約十幾秒就完成。

STEP 3
完成後就會有一個可分享、讓其他人瀏覽的網址,如果在本機有對 WordPress 進行任何修改,也可點擊「更新示範網站」將內容推送上去以反映出最新版本。

點選左下角的「設定」功能會看到使用量,目前在 WP Cloud 建立的示範網站額度只會有五個,超過後就必須先刪除舊的網站才能建立更多,不確定未來會不會有付費升級的方案,或許可藉由付費訂閱方式增加更多額度。
