如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改!

最後更新時間:2020 年 12 月 8 日

本篇主要是寫給 Cloudways, Linode 等 VPS 主機架設網站的站長,如何在遠端直接查看、修改 WordPress 內部的檔案以及程式碼。

因為 Siteground 等共享虛擬主機,有限制 sftp 的存取,所以如果你的網站是架在共享主機上,可能沒辦法用這個方法。

但是因為共享主機商它們本身就有提供 File Manager 的方式,即使不用 sftp 也能直接修改檔案內容,所以如果你是用 Siteground 架站的站長,用 File Manager 就能輕鬆修改文件。

利用 sftp 修改站台檔案,對於 WordPress 接案者/開發人員,我個人覺得應該是必備的技能,有些人習慣在本地端開發,但我比較不喜歡把檔案放在電腦裡面,所以習慣直接在自己的 Test Server 做開發。

如果你不是做 WordPress 開發的人員,你可以用來 debug 和除錯用的,因為遇到問題時,我們得進去看一些錯誤歷程 ( debug.log ) 的內容,才可以知道問題出在哪邊,基本的除錯教學可以參考下面這篇。

延伸閱讀:WordPress 網站掛掉了怎麼辦?利用內建的 debug 功能,找到讓網站掛掉的原因

1. 如何修改 WordPress 內部檔案?

1.1 下載程式編輯器

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 3

前往官網下載 Visual Studio Code,如果你是用 Windows 的電腦,好像就內建就會有,可以自己先在檔案管理搜尋一下。

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 4

接著我們要安裝 Visual Studio Code,這邊沒有什麼需要特別注意的,就是一路安裝到底就好,安裝完後開啟程式,這時你應該會看到一個這樣的畫面。

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 5

接下來點選左邊最後一個功能鍵,這邊是用來管理插件的,其實你就把他理解成相當於 WordPress 的外掛就好。

搜尋 ftp-simple 這個插件,並啟用。

1.2 啟用 SFTP 插件

sftp

接著我們要設定 ftp-simple 的 sftp 連線,需要先學一個指令。

  • Windows – ctrl + shift +p 或 f1
  • Mac – cmd + shift + p 或 fn + f1

按下指令之後,你的上面應該會冒出一個框框,這就是我們插件的指令框框了,請熟記,每次連 sftp 都會用到。

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 6

叫出指令框後,我們要搜尋 config,找到 ftp-simple:Config 開頭的這個,然後按下 Enter。

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 7

接著你會進到這個畫面,這是一個 JSON 格式的檔案,如果你不知道 JSON 也沒關係,它就一個用來儲存資料的檔案格式。

接著依序填入你的資料:

[
    {
        "name": "你的主機 IP 位置",
        "host": "你的主機 IP 位置",
        "port": 22,
        "type": "sftp",
        "username": "你的 SSH 使用帳號",
        "password": "你的 SSH 使用者密碼",
        "path": "/",
        "autosave": true,
        "confirm": true
    }
]

輸入完之後按下ctrl + s 儲存

port 號一般都是 22,但還是以你的主機為準,像 GCP 的 port 號我記得是就21。

Cloudways 主機作法

如果你是 Cloudways 主機的話,你可以在這邊找到你的 IP 跟 SSH 使用者帳號與密碼

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 8

接下來這一步驟我會以 Cloudways 主機為例,如果你不是 Cloudways 主機你可能要自己看一下你的資料夾叫什麼名字。

我們要先知道自己的 WordPress 是安裝在哪個資料夾裡面,由於 Cloudways 預設給我們的是亂碼,因為為了方便尋找,我們先去將其改名。

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 9
  1. 按下上方的 Applications
  2. 選擇左邊欄位的 Application Settings
  3. 更改 Folder 名字,預設是亂碼,所以改成一個你看得懂的名字
  4. 按下下方的 Reset 按鈕

都做完之後就是見證奇蹟的時刻了!

按下剛剛說的 ctrl + shitf + p 把 ftp-simple 的視窗叫出來,接著我們以前往 WordPress 主題資料夾 themes 為例子:

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 10

選擇 ftp-simple:Remote directory open to workspace

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 11

選擇你主機的 IP

如果點了 IP 之後沒有反應的話,可能是因為你第一次裝 Visual Studio Code 的緣故,將電腦重開機再試看看應該就可以解決。

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 12

選擇 applications

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 13

選擇你剛剛設定的 Folder 名字

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 14

選擇 public_html

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 15

選擇 wp-content

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 16

選擇 themes

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 17

選擇 .

如何修改 WordPress 內部檔案?5 分鐘教你透過 SFTP 遠端修改! | 18

接著你就成功進來 WordPress 佈景主題資料夾了,你可以依照你的需求選擇你要修改的檔案內容,非常方便。

結語

修改檔案後按下 ctrl + s,這時候右下角會跳出一個小視窗,記得按確認才會正確儲存。

因為其實它的原理是幫你下載,等你修改好之後再上傳,並不是真的直接在上面修改文件內容,所以你每次儲存後,他都會有一個提示問你要不要 overwrite 它,不過對我們來說有那個效果在就好

如果修改之後還是沒有生效,就回到 Cloudways 中進行,Reset Permission,或是詢問客服看看。( Cloudways 比較有這問題,GCP、Linode 沒有 )

有任何問題歡迎在下方提出,我會盡我的能力解答,最後祝大家 Happy Coding!