使用 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 從本機轉移到伺服器

在本機端開發 WordPress 網站可以加速你的開發流程。在之前的文章中我們提到了如何使用 DesktopServer 來建構本機端開發環境,當你在本機端完成開發後,下一步即是將你修改完成的網站轉移到伺服器上。當然你可以透過一些插件,例如 Duplicator 來進行這項工作,不過延伸日前提到的 WordPress 備份基本概念,這次的教學將使用上次提到的方式來手動進行網站的轉移。

準備工作

在開始之前,我們假設你已經有一個本機端的開發環境,同時有一個支援 WordPress 的伺服器環境。另外,請確認你可以透過 FTP 來連線到你的伺服器,如此才能將本機的檔案上傳到伺服器。本教學的伺服器以支援cpanelc環境的主機為範例。

步驟1:匯出本機端資料庫資料

若使用 DesktopServer 來架站,則內建即會安裝phpmyadmin,你可以使用它來進行資料庫管理。

開啟 DesktopServer 後,可以在左下角找到 Sites 連結,點擊後會開啟 DesktopServer 內建的網頁。

desktopserver_sites

Sites 頁面除了顯示目前你安裝的站台清單外,還提供了一些開發和管理工具,像是 PHPMyAdmin、phpinfo 資訊、Mailbox Viewer 等。這邊請點選 PHPMyAdmin。

desktopserver_sites_phpmyadmin

進入 phpmyadmin 管理介面後,請選擇您要匯出的資料庫,並點擊匯出。

phpmyadmin_export

選擇快速匯出來匯出全部的資料表

quick_export

 

2. 上傳檔案到伺服器

通常伺服器提供商都會提供 WordPress 快速安裝,透過快速安裝可以快速安裝一個 WordPress 網站,可省去建立資料庫等步驟。因此當你連到伺服器時,應該就會看到一開始安裝的檔案。

因為使用者建立的檔案僅存在wp-content目錄中,所以我們只要上傳這個目錄即可。

filezilla

 

3.匯入資料庫

TBD

4.修改網址

TBD

 

[WordPress 教學] – 你應該知道的 WordPress 備份基本概念

在架設或是管理 WordPress 網站時,有一個動作一定是你不可避免的,就是網站的轉移,不管你是從本機轉移到伺服器,或是從伺服器轉移到本機,這都是每個網站開發者或是維護者一定會接觸到的工作。

關於 WordPress 備份和還原,目前市面上其實有不少的插件或服務來協助你處理這項工作,包括:

這些外掛各自提供了不同的功能,像是可以設定備份的頻率、備份的位置、還原等功能。

不過今天要談的是基本功,也就是如何手動來處理備份和還原的工作。我覺得這是非常基本,也相當重要的,因爲有時候難免遇到一些插件無法處理的狀況,像是主機的限制,或是檔案大小的限制,導致網站的備份無法完成,這時候知道如何手動處理就顯得相當重要了,因此我覺得這是在使用這些外掛之外必須要學會的。你仍然可以使用外掛來進行備份或還原,不過懂的如何手動處理,在你遇到問題時將會有很大的幫助。

要備份什麼?

網站資料那麼多,我到底要備份什麼?其實只要把握兩個原則,就可以保證你的網站資料的完整性:

  1. 檔案
  2. 資料庫資料

WordPress 檔案目錄結構

備份的第一個重點就是檔案,檔案存在於你的本機或是主機上,當安裝完 WordPress 後,你應該會看到如下圖的檔案目錄結構,我們可以將其分爲兩大類

  • 使用者建立的內容: 包含 wp-content 底下的全部資料夾和檔案,包含了主題、插件、上傳的資料、以及其他由插件產生的檔案
  • 核心檔案:除了 wp-content 以外的資料夾和檔案

screen-shot-2016-11-11-at-12-08-41-am

其中最重要的當然就是 wp-content 這個資料夾,因為它包含了所有使用者建立的內容,當遺失時是無法回復的,因此在備份時可以單獨備份此目錄即可,其他的資料夾或是檔案都是可以重新下載或是建立的。若你使用插件來進行備份,你可以選擇只備份 wp-content 這個目錄,或是備份全站的檔案。

註:網站管理者或是插件可能或修改.htaccess,如果需要的話可以自行備份此檔案,但因為這個檔案也是具可回復性,遺失的話其實不是很嚴重,只是也許要花點時間修改成你原本的設定。

如何備份資料庫檔案

除了檔案外,另一個很重要的備份重點就是資料庫的資料,資料庫的資料包含了整個網站的內容,其重要性當然更是不可言喻。若你是在本機開發可以使用一些GUI 程式來管理資料庫,像是 Sequel Pro (Mac) 或是 phpmyadmin。

這邊我們以 Sequel Pro 做範例

當你透過 Sequel Pro 連上你的資料庫,從 File ->Export 可開啟匯出介面,匯出格式請選擇SQL, 並同時匯出結構與資料,如此日後才能使用此檔案來還原網站。

sequelpro

 

以上就是 WordPress 備份的基本功,其實並不難。只要掌握兩大原則:檔案資料庫資料,備份其實不是那麼困難的事。

 

 

透過 DesktopServer 快速建構本機端 WordPress 架站環境

網站架設的第一步就是建構主機伺服器環境,而建構本機端架站/開發環境有很多好處, 你可以不用怕因為一個修改而弄壞正在運行的主機, 也可以在沒有網路連線的環境下進行開發。目前市面上常見的架站軟體包含了XAMPP、WAMP以及MAMP, 今天要介紹的 DesktopServer 本身即是以 XAMPP 為基礎, 但他提供了更多的功能,讓你的開發更加地快速和便利。

你可能會懷疑,既然像 XAMPP 或是 MAMP 都可以架設網站,那為什麼我還需要 DesktopServer? 各位可以回想一下你平常要建立一個新的 WordPress 網站流程

1.下載 WordPress  ->  2.安裝WordPress -> 3.安裝常用的插件

每次都要重新下載 WordPress 和相關插件實在有點麻煩,也有點浪費時間,所以 DesktopServer 提供了一個叫做 Blueprint 的功能,讓你可以先打包一些你常用的主題和插件,之後就不用每次都重新下載了。

DesktopServer 提供了免費的版本,但只能在本機架3個站,而且也無法匯入和匯出網站,若你是每天與 WordPress 為伍的架站者或開發者,建議還是購買進階版的,以99.95美金的價格來說,我個人認為是相當划算的,因為他對你的工作流程將會有很大的改變,省下來的時間絕對是值得的。

 

1.啟用

DesktopServer 因為需要以管理者的角色來執行,才能管理一些服務,所以在啟用的時候會詢問你是否允許 DesktopServer 以管理者的身份重新執行。

desktopserver_1

2.功能

重新啟用後即會顯示一些你可以執行的功能

  • Stop or restart the web and database services
  • Remove, copy or move an existing website.
  • Create a new development website.
  • Create or edit sub/domain aliases.
  • Export, import or share a website.

desktopserver_2

3.輸入網站資訊

Site Name: 輸入你的網站網址

Blueprint:選擇要安裝的軟體包,軟體包會包含基本的 WordPress 程式,你也可以自行建立軟體包,加入常用的插件,來加速日後的安裝

Site Root:網站安裝的目錄

desktopserver_3_1

4.建立網站目錄和複製相關檔案

輸入完畢後按建立,DesktopServer會自動幫你建立網站目錄及資料庫,同時根據你選擇的 Blueprint 安裝到指定的目錄下。

desktopserver_4

5.完成

完成後,DesktopServer 會提供你一個安裝的網址,點擊後即可進行一般的 WordPress 安裝。

desktopserver_5

6.安裝 WordPress

desktopserver_6_0

安裝完後登入,你會發現在畫面上會多了一個 ByPass login 的功能,你可選擇要登入的帳號,選擇後不用輸入帳號密碼即可以登入至後台,可排除本機端開發時不必要的帳號密碼輸入。

desktopserver_6_1

在Admin bar 上也多了一個Airplane Mode, 紅色代表關閉,若你在網路不佳的或是沒有網路的環境下可以啟用這個功能,避免 WordPress 去讀取一些外部網站而影響瀏覽速度,像是 Avatar 的頭像圖片。

desktopserver_7

以上就是 DesktopServer 基本的安裝介紹,其實 DesktopServer 還包含了其他可以協助你開發的功能,日後再另行介紹囉。另外前陣子有另外一套類似DesktoServer 的工具叫  pressmatic,除了有類似 DesktopServer 快速安裝的功能外,還可以選擇安裝的的PHP版本,以及使用 Nginx 作為伺服器主機,你幾乎可以模擬一個跟正式站一模一樣的環境,不過價格就相對高了一點。