• Home
  • /
  • 想改 WordPress 網站樣式卻怕改壞? Cloudways Staging Site 讓你無顧慮隨意修改網站!

想改 WordPress 網站樣式卻怕改壞? Cloudways Staging Site 讓你無顧慮隨意修改網站!

文章最後更新 2020 年 6 月 23 日
想改 WordPress 網站樣式卻怕改壞? Cloudways Staging Site 讓你無顧慮隨意修改網站! 2
  • 想修改 WordPress 網站主題樣式卻因怕改壞而不敢動手嗎?
  • 網站流量很大,怕修改網站過程中影響到網站運行嗎?

本篇文章就要帶大家透過 Cloudways 上免費的 Staging 功能,建立一個待發布的開發網站站點,不管你在這個站點上修改什麼,都不會影響到原有的網站哦!

最重要的是,只要在 Cloudways 後台控制,就能將你兩個站點進行同步!讓你在開發站點確定改的東西都無誤之後,再將網站同步到你的運行中網站!

想學怎麼建立 Staging 站點嗎?那就繼續看下去吧!

在我們開始以前,首先要幫你的 WordPress 網站建立一個 Staging Site 有一些限制條件,以下先列出來給大家參考:

  • 你的網站需要是建立在 Cloudways 平台上的
  • 你的網站不可綁定 Jetpack 中的 WordPress.com 快捷登入方式,或是任何其他的第三方登入軟體(因為在 Staging Site 被重新導向的話,就會跳回原有網站),有綁定的話要先取消。
Jetpack 中透過 WordPress.com 進行第三方登入不可開啟

Jetpack 中透過 WordPress.com 進行第三方登入不可開啟

如果你符合以上這兩點條件,那歡迎你繼續看下去,並且跟著我的講解一步一步建立你的 Staging Site 。

不是使用 Cloudways 或者還沒有自己網站怎麼辦

Staging Site 是什麼?

在開始建立我們的開發站點之前,首先我們要先來解釋一下什麼是 Staging Site、什麼是 Live Site:

Staging Site 與 Live Site 示意圖

Staging Site 與 Live Site 示意圖

  • Live Site:正在運行中的網站、上線中網站,如果你的網站目前只有一個,那個就是所謂的 Live Site,也可稱作 Production Site。
  • Staging Site :可稱作模擬環境站點,或是預備站點,可以從 Live Site 同步資料(pull)過來,然後進行修改後,再將其同步(push)到 Live Site 上,這樣就可以無風險去修改內容,絕對不會影響到運行中的網站了!

為什麼我需要建立 Staging Site?

其實 Staging Site最重要的一個功能,就是可以在上面隨意測試、完全不影響 Live Site

在你測試、設定、調整完所有你要調整的東西,不管是主題、樣式、排版、外掛、任何功能,你只要在 Cloudways 後台點擊「Push」,就能很輕易的將 Staging Site 做好的設定,全部或者部分同步到 Live Site 了!

Staging Site 有專屬的管理畫面,可以用於同步資料

Staging Site 有專屬的管理畫面,可以用於同步資料

因此如果你有以下需求,你會非常適合建立一個Staging Site:

  • 想要修改網站主題,但很怕改了壞掉會影響運行中的網站
  • 想要測試新的外掛,但是怕裝了之後會跟其他外掛衝突導致問題
  • 想要修改網站內容或設定,並且希望先放到 Staging Site 上看看效果,再更新到 Live Site

建立 Cloudways Staging Site 的優點

不影響運行中網站

Staging Site 最主要的功能就是:

  1. 可以從 Live Site 同步一模一樣的網站,建立另一個站點。
  2. 在 Staging Site 站點做的變更,完全不會影響到 Live Site。
  3. 當更新內容完畢後,也可以輕鬆將變更同步回去 Live Site。

因此這個功能非常適合想要試用外掛、想要調整主題等有可能會影響到運行中網站的人去做使用!

安全並私有,不被搜尋引擎收錄

Staging Site 在 Cloudways 平台的設計下,他算是一個私有網站,需要輸入 Cloudways 後台中的帳號密碼才能進入網站。

因此就有點像是一個屬於你自己的測試站,你可以到測試站測試任何變更,如果被你設定壞了,從 Live Site 再同步一次資料將 Staging Site 蓋掉即可,完全不用擔心把網站玩壞

自由在兩站之間同步內容

我看過有些人想要變更主題設定時,他會用備份的方式複製一整個網站,並且在備份網站中先試著調整設定,等待確認都沒問題後,再到原本網站重新再做一次

Staging Site 可以讓你不需要這麼麻煩!你只要在變更後直接點「Push」,將資料從 Staging Site 同步到 Live Site 就完成變更囉!

Cloudways Staging Site 建立與使用教學

建立 Staging Site 注意事項

要建立Staging Site 要先知道的事項有以下幾點:

  1. 不可使用第三方登入:你的 WordPress 不可以透過 Jetpack 或者類似的外掛,並利用 WordPress.com 或其他的第三方登入後台方式,因為第三方登入在認證後會將你的網頁重新導向到你的 Live Site,這樣你就會登入不了 Staging Site。
  2. 同步資料前請先備份:在你將資料從 Staging Site push 至 Live Site 之前,請務必使用 Cloudways 備份功能來備份你的網站(後續步驟中有展示),否則如果出問題你將無法還原到 push 之前的版本。
  3. 請勿將 Staging Site 變為其他網站使用:如果你想要做的是複製你現在網站,並且把它改成第二個網站的話,請直接使用 Copy Site 功能,如果建立成 Staging Site 哪天你點到 Push/Pull ,不小心把其中一個網站蓋掉,你就會悔不當初了!

開始建立 Cloudways Staging Site

接下來就開始帶大家建立 Cloudways Staging Site 囉!請跟著以下步驟一步一步做下去吧!

建立 Cloudways Staging Site

step 1

登入Cloudways。

登入 Cloudways

登入 Cloudways

step 2

點擊 Application。

點擊 Application

點擊 Application

step 3

找到要建立 Staging Site 的 Application ,點擊右邊 Menu。

點擊要建立 Staging Site 的 Application 右邊的 Menu

點擊要建立 Staging Site 的 Application 右邊的 Menu

step 4

點擊 Clone App/Create Staging。

點擊 Clone App/Create Staging

點擊 Clone App/Create Staging

step 5

選擇在同一個主機上建立 Staging Site,並且點擊 Continue。

選擇同一主機並且建立 Staging

選擇同一主機並且建立 Staging

step 6

等待 Cloudways 幫你建立 Staging Site。

等待 Cloudways 建立完成

等待 Cloudways 建立完成

step 7

建立完成後就可以看到 Staging Site了,點擊進入 Staging Site 畫面,準備繼續下一步驟。

建立完成就可以看到 Staging Site 囉

建立完成就可以看到 Staging Site 囉

進入 Staging Site 的 Cloudways 管理介面,並登入到 WordPress

step 1

進入到管理介面會看到 staging 的標記,並且底下也會預設開啟密碼保護,意思是你的網站只有你能看到,並不會出現在 Google 搜尋結果中。

點擊進入並且可以看到 staging 的標示,以及有密碼保護

點擊進入並且可以看到 staging 的標示,以及有密碼保護

step 2

點擊 Application Url 可以進入網站。

點擊 application url 查看 Staging Site

點擊 application url 查看 Staging Site

step 3

進到前台後會看到跳出提示窗,提示你要輸入使用者名稱和密碼。

會被要求輸入帳號密碼

會被要求輸入帳號密碼

step 4

到你後台的管理介面,從紅框這邊取得你的帳號密碼,並複製過去剛剛的網頁進行登入。

回到 Cloudways 畫面,複製帳號及密碼去登入

回到 Cloudways 畫面,複製帳號及密碼去登入

step 5

登入成功,你會看到一個跟你原本網站一模一樣的畫面,但你會發現網址是 Staging Site 的網址,這就代表 Staging Site 建立成功囉!

登入成功後就會看到與 Live Site 一模一樣的 Staging Site 首頁

登入成功後就會看到與 Live Site 一模一樣的 Staging Site 首頁

step 6

在網址後面輸入「/wp-admin」,準備登入 WordPress 後台介面。

網址後面輸入/wp-admin 進入 WordPress 登入畫面

網址後面輸入/wp-admin 進入 WordPress 登入畫面

step 7

輸入跟你的 Live Site 相同的帳號與密碼,點擊登入。

輸入資料登入 WordPress 後台(資料與 Live Site 相同)

輸入資料登入 WordPress 後台(資料與 Live Site 相同)

step 8

成功登入 Staging Site,可以開始進行任何的變更囉!(不會影響Live Site)

成功登入 Staging Site 後台

成功登入 Staging Site 後台

測試修改 Staging 資料是否會影響 Live Site

很多朋友做到這步,看到 Staging Site 後台之後,雖然我跟你們說他不會影響到 Live Site ,但是大家可能還是都怕怕的。

因此我就來帶大家測試一下,讓大家可以放心,在 Staging Site 做的任何修改,真的都不會影響到 Live Site!

*注意:如果你修改的內容,是跟第三方平台相關的,那就會影響哦!只有 WordPress 本身設定才不會影響

step 1

登入後進到佈景主題畫面,可以看到目前使用的是Astra Theme。

到 Staging 後台可以看到目前主題使用的是Astra Theme

到 Staging 後台可以看到目前主題使用的是Astra Theme

step 2

直接果斷把主題切換成別的主題!

直接將主題更換成其他主題

直接將主題更換成其他主題

step 3

可以看到 Staging Site 的畫面已經因為切換主題一團亂了。

看到 Staging 換主題後一團亂的樣子

看到 Staging 換主題後一團亂的樣子

step 4

但是Live Site 還是一樣完好如初。

但完全不影響 live site

但完全不影響 live site

如何將資料在 Staging 與 Live Site之間同步

而我們確定可以放心的在 Staging Site 上任意更改東西之後,當我們修改完了,就該來學學怎麼將 Staging Site 與 Live Site 之間做同步了。

首先我們得了解同步有兩種,一種是推(Push),一種是拉(Pull)

  • 推(Push):想像一下 Live Site 是正在雲端上運行的那個網站,Staging Site 就好像是你自己的測試站點一樣,當我們要將 Staging Site 上面做的更改同步到 Live Site,基本上就是選擇「推(Push)」,將更改的資料「推」上去。
  • 拉(Pull):當我 Staging Site 有一陣子沒更動,而 Live Site 上可能更新了一些文章或者內容,這時我要開始改 Staging Site 之前,就需要先將資料從 Live Site 那邊「拉(Pull)」下來到 Staging Site,再開始進行改動。

那接下來我們就來示範一下如何同步囉!(如果你按照著本篇的順序去做,待會記得先練習Pull,因為剛剛有隨意修改了主題,Push 上去 Live Site 會發生悲劇的!)

從 Live Site 將資料同步到 Staging Site

step 1

首先先進入 Cloudways 後台中,並點入 Staging Site Application 的管理介面,點擊左方 Staging Management 進入 Staging 管理。

開啟 Cloudways 上 Staging 的管理介面,點擊 Staging Management

開啟 Cloudways 上 Staging 的管理介面,點擊 Staging Management

step 2

可以看到有「Push」跟「Pull」功能,分別是將資料從 Staging 同步到 Live,以及相反。

可以看到有兩個按鈕,分別是 Push 跟 Pull

可以看到有兩個按鈕,分別是 Push 跟 Pull

step 3

點擊「Pull」

因為我們前面示範有改了 Staging Site,因此我們要先將 Live Site 的資料 Pull 下來蓋過 Staging Site 目前資料,這樣才能在最新的狀態下進行修改,點擊「PULL」準備同步資料。

先點擊 Pull,從 Live Site 同步資料到 Staging Site

先點擊 Pull,從 Live Site 同步資料到 Staging Site

step 4

把選項都勾選起來,並點擊「Proceed」同步。

這兩個選項分別是「檔案」及「資料庫」,一開始使用就是全選就好,如果你之後想要知道進階用法,可以再去研究 WordPress 中資料庫每個 Tables 的差異,你就可以在同步時選擇你要同步哪個部分資料囉!

*對這方面不熟者,就還是每次都同步全部資料吧!

勾選所有的資料(包括資料庫和檔案)

勾選所有的資料(包括資料庫和檔案)

step 5

等待 Cloudways 同步資料完成。

等待同步

等待同步

step 6

可以看到 Staging Site 又恢復修改主題前的樣子囉,與 Live Site 一模一樣。

同步完成後,Staging Site 與 Live Site 又變回相同狀態

同步完成後,Staging Site 與 Live Site 又變回相同狀態

step 7

可以看到 Staging Site 又恢復修改主題前的樣子囉,與 Live Site 一模一樣。

同步完成後,Staging Site 與 Live Site 又變回相同狀態

同步完成後,Staging Site 與 Live Site 又變回相同狀態

將 Staging Site 的變更資料同步到 Live Site上

在我們將 Live Site 資料同步到 Staging Site 之後,我們就可以開始變更 Staging Site 上的設定、樣式等等。

而當我們更新完成確認無誤之後,就可以按照以下步驟,將已變更的資料同步到 Live Site 上囉!

*注意:如果你在 Staging 正在變更樣式或資料,就暫時不要去更新 Live Site 的內容哦,因為等 Staging Site 按照以下步驟將資料同步到 Live Site 之後,Live Site 這一段期間的變更是會被覆蓋掉的哦!

以下我會示範給大家看,在 Staging Site 變更完資料之後,如何將資料從 Staging Site 同步到 Live Site !

step 1

首先在 Staging Site 後台,點擊新增文章。

進入 Staging Site 後台,點擊新增文章

進入 Staging Site 後台,點擊新增文章

step 2

隨意輸入文章標題,並且點儲存草稿(只是為了做一個變更)。

輸入測試標題後,點擊儲存草稿

輸入測試標題後,點擊儲存草稿

step 3

可以看到 Staging Site 多了一篇文章。

確認 Staging Site 上有看到這篇新文章

確認 Staging Site 上有看到這篇新文章

step 4

回到我們的 Live Site,檢查一下,會發現並沒有剛剛在 Staging Site 上新增的文章。

確認 Live Site 上沒有這篇新文章

確認 Live Site 上沒有這篇新文章

step 5

到 Cloudways Staging Site 的後台,進入 Staging 的管理介面,點擊「Push」準備將資料從 Staging 同步到 Live Site。

到 Cloudways 管理介面,點擊 Push,將資料從 Staging 同步到 Live Site

到 Cloudways 管理介面,點擊 Push,將資料從 Staging 同步到 Live Site

step 6

一樣勾選檔案跟資料庫全部,並且下方一定要勾選「Yes, please take backup」,並且點擊「Proceed」開始同步。

*在將 Staging 的資料蓋過去 Live Site 之前,先將 Live Site 做備份會比較安全,因此必須將最下方那個備份勾選起來哦!

勾選所有資料(包括資料庫跟檔案),並且務必勾選同步前備份 Live Site

勾選所有資料(包括資料庫跟檔案),並且務必勾選同步前備份 Live Site

step 7

 同步完成之後到 Live Site 看一下,就會發現剛剛新增的那篇草稿文章,成功同步到 Live Site 啦!

同步完成,Live Site 也看到這篇文章了

同步完成,Live Site 也看到這篇文章了

以上就是如何建立一個 Staging Site , 並且與 Live Site 之間資料還可以輕易地做同步的方法囉!希望對大家能夠有幫助,讓你們不用再怕修改資料時影響到運行中網站了!


如果對文章內容有任何問題,歡迎在底下留言讓我知道。

如果你喜歡我的文章,可以按左邊的分享按鈕,讓更多的人看見我的文章。

by Mr.K | 領先時代

​作者資訊

Mr. K

熱愛分享、熱愛研究軟體與新事物的自由接案工程師,同時目前也是一名在學的碩士生。

  • {"email":"Email 不正確","url":"網站網址錯誤","required":"必填欄位未填入"}
    >