個人網站架設完整教學

Site Information 主機設定

在開始 WordPress 網站架設前，主機的環境設定非常重要，正確的設定可以幫助網站運作順暢，也可以減輕將來維護的工作負擔，建議所有新手朋友都應該先從這一步開始。

這次教學內容示範的主機是著名的 Kinsta 主機，透過這次網站建立的過程，也順便瞭解這類 VPS 主機的優缺點。

• 登入 Kinsta 主機管理介面（申請主機後相關資訊在通知信件中），輸入申請的帳號與信件中提供的密碼（註一）。

---

• 登入 Kinsta 主機管理介面後，可以看到非常簡單的界面設計，首先就是預設就已經安裝好 WordPress 網站了，因為是測試範例，目前只有一個網站建置（❶），如果想要修改網站專案名稱，可以點擊截圖圖片中圖示二 ❷ 的選單符號，操作上有任何疑問，也都可以隨時與線上客服洽詢（圖示三 ❸）。

• 點擊網站（專案）名稱進入 Kinsta 提供的網站管理介面 Site Information，這個頁面是關於網站與主機的相關資訊，管理的是網站的整合資料，包含主機與資料庫還有 WordPress 網站。

---

接下來將分別說明整個管理介面的功能設定，這些功能在網站開始使用前有些是必要的設定，瞭解這些設定，對於將來的網站管理維護會有很大的幫助，請大家耐心閱讀。

Info

• Kinsta 提供的網站管理介面，上方選單欄就是網站基本資訊與使用者的個人資料 ❶，左側選單欄陳列關於主機提供的各項功能設定 ❷，在這裡我們也可以直接連結到架設好的 WordPress 網站 ❸。

• Kinsta 帳號申請成功後，預設就會幫大家安裝好 WordPress 網站，同時也是最新版本的 WordPress 網站。

• SFTP/SSH ❶ 是 Info 這裡需要特別注意的第一個功能，帳號資訊是可以透過 SFT 或是 SSH 登入主機的資料，請謹慎收藏。
• 第二個需要注意的功能就是 Open phpMyAdmin ❷，這個網頁管理資料庫的工具，如果需要修改、調整、備份網站資料庫的話，會需要這個 phpMyAdmin 功能，在後面的教學內容中會跟大家示範。

---

Domain

• Domain 網域名稱 ❶，這裡是網站網域名稱設定的地方，在後面的教學內容中，會示範如何將預設 WordPress 網站的臨時網址 ❷，改成自己申請的網域名稱 ❸。

---

Backups

• Backups 備份 ❶，Daily backups 每日備份 ❷，萬一網站發生問題，可以在這裡將網站還原到發生問題的前一天。Kinsta 主機預設就提供了備份服務，這些備份服務不會佔用主機方案的空間額度，是一項非常棒的服務。

• Backup 備份 ❶，Manual backups 手動備份 ❷，如果想要對網站做重大修改，或是網站要執行大版本的更新，建議都先做好網站的備份 ❸。

• Backups 備份 ❶，System generated 系統備份 ❷，這是 Kinsta 如果對主機系統作更新調整時會自動產生系統備份，預防系統調整後發生錯誤時可以還原使用。

• Backups 備份 ❶，Download 下載備份 ❷，如果想要更保險的備份網站，就是將已經備份好的檔案也下載一份到本機上。

---

Tools

• Tools 工具，這裡是 Kinsta 主機提供的網站工具，總共有 13項功能。
  • Restart PHP 重新啟動 PHP 服務。
  • WordPress debugging 除錯，對於想要開發網站的管理者來說，需要除錯記錄可以在這裡啟用除錯功能。
  • Search and replace 搜尋與取代（注意事項一），對於網站搬家或是網址修改，這個功能就非常實用。
  • New Relic monitoring 記錄詳細的網站效能數據，不過也會影響網站運作效能，請謹慎使用，預設是停用。
  • Password protection 密碼防護，預設是啟用。
  • Force HTTPS 強制使用 https 連線，預設是啟用。
  • Geolocation 地理位置，如果想要記錄詳細的訪客記錄，可以啟用這個功能。
  • ionCube Loader，如果網站環境中使用 ionCube 加密程式碼的外掛程式、佈景主題或 PHP 腳本，那麼需要啟用 ionCube Loader，預設是停用。
  • PHP settings 版本選擇（注意事項二），這個設定與網站比較有關，特別是使用外掛程式時，是否符合 PHP 版本的需要。
  • Remove Set-Cookie headers 刪除 Set-Cookie 標頭，預設是啟用。
  • Site Preview 網站預覽，修改 DNS 或是網站重大修改，可以啟用這個功能來預覽網站效果。
  • Early Hints 允許瀏覽器在伺服器提供回應之前，預先載入資源來提高網頁載入速度，預設是停用。
  • DevKinsta 這是 Kinsta 提供的本機開發程式，如果想要在本機上開發 WordPress 網站的朋友，可以下載安裝。

• （注意事項一）Search and replace 搜尋與取代，網站更換網域名稱，或是網站網址結構變動，都可以透過 Search and replace 搜尋與取代這個功能來修正網址錯誤的問題。

• 在 Search 填入想要修改的網址，Replace with 填入想要修改的網址，這個工具就會自動將資料庫中的網址替換掉，非常方便。

• （注意事項二）PHP settings PHP 版本設定，這裡需要注意是，不是最新版本最好，雖然效能比較好，不過有些佈景主題與外掛程式還沒有支援，因此建議可以選擇 PHP 8.3。

---

Redirects

• Redirects 重新轉向，如果網站有發生網址錯誤的情況，可以透過這個功能來修正。

• Add redirect rule 重新轉向規則，302 – Moved temporarily 是指網址暫時轉向，301 – Moved permanently 是指網址永久轉向（錯誤網址不會使用請選擇這個設定）。

---

Plugins and themes

• Plugins and themes 外掛與佈景主題，這裡會將網站安裝的外掛與佈景主題陳列出來，可以直接做升級的動作，不過建議大家還是回到 WordPress 控制台進行比較保險。

---

Add-ons

• Add-ons 附加功能，這裡成列的是主機提功能附加功能選購，像是主機空間、網站同步系統、記體需求…等等，示範文章使用的主機方案這些目前都是無法變更的，不過對於一般個人網站來說，目前的主機規格綽綽有餘。

---

IP deny

• IP deny IP 位址封鎖設定，對於一些惡意 IP 連線，可以透過這個功能從主機端就封鎖，避免對網站造成傷害。

• Add IP addresses to deny 新增封鎖 IP，這裡可以搭配 Analytics 中的統計記錄，來對於可疑的 IP連線設定封鎖。

---

Analytics

• Analytics 分析統計，Kinsta 主機提供了非常多的分析統計記錄，方便網站管理者檢視。
• Analytics / Resources 分析統計/資源，這裡記錄 Visits 到訪數、Disk space 主機空間容量、Bandwidth 頻寬使用量、Top requests by bytes 熱門請求（按位元組數）、Top requests by views 瀏覽次數最多的請求。

• Analytics / CDN & edge 內容傳遞網路與邊緣快取分析統計。

• Dispersion 分散統計，這裡可以看到不同裝置的訪客分析記錄，方便管理者改善網站在不同裝置的閱讀效果。

• Performance 性能，這裡展示的是 PHP 與 MySQL 資料庫的性能分析統計，如果感覺網站運作上有點卡頓，可以到這裡檢視主機運作效能。

• Response 主機回應，這裡顯示的是網站在訪客到訪時的連線回應統計分析，網站管理者可以依據數據分析，調整網站設定。

• Cache 快取，這裡可以檢視外取統計分析 Cache component stack、Cache component chart、Top cache bypasses，如果將來網站需要經營會員、線上購物，那麼快取記錄的統計分析就相對重要了。

• Geo & IP 訪客位址統計分析，這裡展示了訪客的國家、城市、IP 位址資訊，可以搭配 IP deny IP 位址封鎖設定來監控有沒有可疑的連線。

---

Caching

• Caching / Edge Caching 快取設定，將頁面快取儲存在 Cloudflare 全球 260 多個存取點 (PoP) 位置中的任一個，可將效能和網站速度提高多達 40%。

• Caching / CDN 啟用 CDN 內容傳遞網路時，會透過內容分發網路提供所有靜態內容（例如圖像、CSS 和 JavaScript 檔案），每個檔案的限制為 5 GB。

• Caching / CDN / Image optimization 影像最佳化，Kinsta 也提供網站影像的最佳化設計，有需要的話可以在這裡啟用設定。

• Caching / CDN / Exclude files from CDN 排除檔案，如果有些檔案不想要被 CDN 快取，可以在這裡做相關排除設定。

• Caching / Server Caching 伺服器快取，Kinsta 主機預設就提供了主機快去的設計，對很多 WordPress 網站來說省下了一些建構快取機制的費用。

• Caching / Redis 快取，這是需要付費才提供的快取服務，可以減少網站 MySQL 資料庫的負載，減少回應時間並提高網站處理額外流量的能力。

---

APM

• APM / Application Performance Monitoring 應用程式效能監控，啟用 APM 監控時，使用這個工具可能會影響網站效能，請謹慎使用或是在收集到足夠的故障排除資料後，記得將它停用。

---

User management

• User management / Users 使用者，這裡陳列網站使用者，以範例文章來說，目前只有一位。

---

User activity

• User activity 使用者活動記錄，如果是多使用者的網站，可以記錄每位使用者登入的活動記錄，對於網站管理者來說，這是非常棒的一項管理工具，Kinsta 預設就免費提供了。

---

Logs

• Logs / Log viewer 日誌檢視器，Kinsta 提供了三種主機活動日誌 error.log、kinsta-cache-perf.log、access.log，方便網站管理者監控網站記錄。

---

---

Domain 網域名稱設定

在開始使用 WordPress 網站前，特別把 Domain 網域名稱設定步驟個別說明，最主要的原因就是要避免因為錯誤的 DNS 設定，浪費了網站架設的時程。

簡單來說，網站需要網域名稱與網站主機來存放網站的程式與檔案，網域名稱的申請與付費可以參考基礎篇 01-網域名稱註冊 文章的說明，這篇教學內容的網域名稱已經購買，同時在 Cloudflare 託管。至於網站主機空間，這篇文章是以 Kinsta 主機為範例，其他主機說明可以參考基礎篇 02-虛擬主機承租文章說明。

---

• 登入 Kinsta 主機管理介面，找到 Domains ❶，接著請點選 Add domain 按鈕 ❷。

• Domain 欄位請填入自己申請的網域名稱 ❶，接著點擊 Add domain 按鈕 ❷。

• 新增網域的過程會稍等一下子，接著就會跳到網域需要驗證的步驟。提示視窗中顯示，已經確認網域名稱在 Cloudflare 託管，依序進行驗證的步驟。
• 首先是確認網站擁有權，請將視窗中的 TXT 資訊與 Value 數值複製起來 ❶，到網域管理單位完成設定步驟 ❷，這裡我們先點選 I’ll do it later 稍後執行。

• 可以看到網域名稱還沒有生效 Domain not live，沒有關係，我們繼續後面的步驟，整個新增網域會重複執行幾次驗證的步驟，請耐心依序操作。

• 這篇教學的網域名稱 kirei.tw 已經購買，也已經指向 Cloudflare 託管，因此先登入 Cloudflare DNS 設定頁面 ❶，在 DNS 記錄設定中點擊新增記錄 ❷。

• 類型請選擇 TXT ❶，名稱 ❷ 與內容 ❸，依序填入前面複製的資訊，完成以後請記得點擊儲存按鈕 ❹。

• TXT 檔案新增完成後，回到 Kinsta 管理介面 Domains ❶，點擊 Verify domain 按鈕 ❷。

• 彈出 Verify domain 視窗，請點擊 OK, i have done it 按鈕（已經完成新增 TXT 記錄），開始驗證網域名稱。

• 回到主機管理介面，可以看到 Domain verification pending 網域驗證處理中，稍等一下主機作業。

• 不需要多久時間，聯絡信箱就會收到 Kinsta 寄來的驗證完成確認信件，就可以在回到主機管理介面確認網域名稱狀態。

• 回到主機管理介面 ❶，網域名稱變成 Domain not live 網域還未上線，請點擊 Verify domain 按鈕 ❷。

• 跳出的 Verify domain 網域驗證視窗，有兩筆資料需要到 DNS 託管單位（這篇教學文章為例是 Cloudflare）填寫，請將這兩筆資料複製起來。這裡需要注意的是，提示內容中有一段說明，如果是使用 Cloudflare 託管，請記得選擇 non-proxied。

• 來到 Cloudflare DNS 設定頁面，將上一步驟複製的資料，依序新增 TXT 與 CNAME 兩筆記錄。

• 還記得上一步驟的提示內容，CNAME 記錄 ❶的設定要設定為 non-proxied，簡單來說就是要確認 Proxy 狀態 ❷，取消橘色雲朵狀態後，再儲存設定 ❸。

• 回到主機管理介面，網域狀態變成 Point your domain 網域指向 ❶，請點擊 Point domain 按鈕 ❷。

• Point domain 提示視窗中有兩筆 CNAME 資料，需要到 DNS 設定中填寫。

• 回到 Cloudflare DNS 設定頁面，依序填入前一個步驟中的兩筆 CNAME 資料，分別是類型 ❶、名稱 ❷、目標 ❸，完成後記得點擊儲存 ❹。

• DNS 設定完成，在兩筆 CNAME 記錄提示視窗中有提示，DNS 設定需要 24小時等待生效，不過實際操作過程，這個等待的時間很快。
• 接著回到主機管理介面 ❶，我們就要將這個生效的網域名稱 ❷，Make primary domain 設定為主要網域 ❸。

• 以這篇教學文章為範例，將 kirei.tw ❶ Make primary 設定為主要網域 ❷。

• 回到主機管理介面，可以看到網域設定整個流程完成，也已經設定為主要網域。上方的 WordPress 網站網址與網站控制台也從臨時網址改成正式的網域網址了。

• 點擊網站網址後，來到 WordPress 網站網址已經變成我們設定的網域名稱了。

• 網站前台已經是網域名稱的網址，後台還沒有，所以我們需要再執行修改 WordPress 位址 (網址) 與 網站位址 (網址)，讓網站可以正確的以網域名稱的網址來呈現。
• 回到主機管理介面 Info ❶，找到 Database access 的 Open phpMyAdmin 按鈕 ❷，這在主機設定步驟中有提過，這是一個透過網頁就可以管理修改資料庫的管理工具。

• 打開 phpMyAdmin 資料庫管理介面，找到 wp_options 資料表，接著找到 siteurl 與 home 兩個欄位，點擊編輯。

• 填入正確的網站網址。

• 確認 wp-options 資料表 ❶的 siteurl 與 home 兩個欄位 ❷ 都已經修改成正確的網站網址了。

• 回到 WordPress 網站控制台，到設定/一般設定，確認 WordPress 位址 (網址) 與 網站位址 (網址)，都已經正確修改為目前網域網址了。

• 除了透過 phpMyAdmin 來修正 WordPress 位址 (網址) 與 網站位址 (網址)，也可以利用主機管理提供的 Tools/Search and replace 搜尋與取代（注意事項一），來修正這個網址問題。

---

Theme / Plugin 佈景與外掛

接下來開始進入個人網站的建立步驟，教學內容會以 Blocksy 佈景主題為範例，這是一款免費的佈景主題，有著漂亮的樣式設計與運作效果，非常適合旅遊、美食、烹飪、親子、個人工作室等等網站使用。

安裝佈景主題/子佈景主題

• 登入 WordPress 網站控制台，接著到外觀❶/佈景主題❷/安裝佈景主題，搜尋佈景主題請輸入：blocksy❸，找到以後請點擊安裝❹。

• Blocksy 佈景主題找到後，請點擊安裝就可以開始安裝佈景主題了。

• 佈景主題安裝啟用後，會看到佈景主題啟用成功的通知區塊，同時提示安裝附加功能外掛程式 Blocksy Companion，這是提供佈景主題額外功能所需的外掛程式，建議點擊安裝，教學文章需要匯入範本來做示範，因此點擊安裝 Blocksy Companion 外掛程式。

• Blocksy Companion 外掛程式安裝啟用後，會來到佈景主題功能設定頁面，請點擊入門網站，準備匯入網站範本。

• Blocksy 佈景主題提供了非常漂亮的網站範本，可以直接匯入套用，扣掉 PRO 付費版本外，還有許多免費範本可以使用。

• 這次教學內容以建立個人網站為例，所以我們挑選 News 這個網站範本，請往下捲動頁面至底找到 News，找到後請點擊匯入按鈕。

• 接著開始匯入網站範本步驟，首先是要不要安裝子佈景主題的選項，為了將來方便維護，這裡建議安裝，請勾選，接著請點擊下一步。

• 接下來的步驟是安裝並啟用外掛程式。
  • Stackable 外掛程式，是一款區塊編輯附加功能外掛程式，可以讓文章頁面的編輯工作更輕鬆，建議勾選安裝。
  • WPForms 外掛程式，是一款聯絡表單外掛程式，可以幫網站建立聯絡表單，同樣的建議勾選安裝。

• 匯入內容，這個步驟會匯入一些預建好的內容，像是文章、頁面、小工具，為了方便示範，建議勾選匯入。

• 網站範本匯入的時間不長，稍候一下。

• 範本匯入完成後，會跳出入門網站已經匯入成功的提示視窗，點擊查看網站，可以看到示範網站的樣式，點擊自訂，就會開啟佈景主題設定項目。

• 開啟網站首頁，可以看到一個非常漂亮的新聞內容樣式的網站已經建立完成。

• 點擊自訂來到佈景主題設定頁面，在右側任意區塊移動滑鼠時❶，可以看到編輯區塊浮現編輯按鈕，點擊就可以進行編輯❷。

Apperance / Customize 佈景主題樣式修改

Blocksy 佈景主題提供的設計在免費版本就非常多，幾乎可以滿足多數網站的樣式需求，接下來會透過佈景主題提供的設計功能來調整網站樣式，圖片非常多，謝謝大家耐心閱讀。

• 在設定 Blocksy 佈景主題時，有一個小技巧可以留意，當滑鼠移到右側頁面區塊時，會浮現編輯區塊範圍與編輯按鈕，點擊就可以開始編輯。首先就是替換網站標誌 LOGO。

網站標誌 LOGO

• 首先，點擊鉛筆圖示就可以開始修改網站標誌 LOGO。

• 上傳圖片替換成自己的網站標誌❶，標誌高度❷大家可以依據自己的圖檔做設定，這裡示範調整為 48，如果想要在網站標誌旁同時顯示網站標題❸，那麼這裡需要啟用，想要顯示網站說明❹也是一樣操作，完成後請記得點擊發佈按鈕❺。

頁尾版權 Copyright

• 接著我們修改頁尾的網站版權設定。

• 在版權文字編輯器中，填寫網站的版權宣告。

• 完成以後，就可以在網站前台，看見頁尾網站版權宣告的樣式。

色彩 Color

• Blocksy 佈景主題，提供了一個非常棒的色彩設計，可以選擇不同的調色盤配色，讓網站的整體顏色配置更好。

• 在整體色彩調色盤，點擊三個小點選單圖示，選擇色彩調色盤。

• 佈景主題預設就提供了額外 8種漂亮的色彩調色盤，方便大家選擇各自喜愛的顏色組合來建立自己的網站展示效果。文章範例這裡選擇 調色盤 ＃3，來搭配網站標誌 LOGO 橘色效果。

• 選擇設定整體色彩調色盤後，右側就可以看到套用色彩配色的效果，記得點擊發佈才會套用效果。

• 回到網站首頁，可以看到色彩效果比預設的配色活潑鮮豔許多。

行動呼籲 Call To Action

• 在頁首有一個很重要的設計，就是 CTA button 行動呼籲按鈕，可以讓訪客快速的到達網站建立的特別功能，例如聯絡表單、訂閱系統、會員登入…等。

• 如果主要列沒有出現這個按鈕❶，可以自己新增，佈景主題也提供非常多的設定可以讓我們設計出非常漂亮的 行動呼籲 Call To Action 按鈕，像是按鈕樣式❷、按鈕大小尺寸❸、按鈕文字❹、按鈕連結❺。

• 點擊設計，可以對按鈕做更細部的設計❶，例如 標籤文字字型❷、標籤文字色彩❸、按鈕色彩❹、框線圓角半徑❺、邊框間距❻、邊界❼，設定完成一樣記得點擊發佈❽。

社交網路服務 Social Network Accounts

• 接著編輯上面列的社群圖示設定。

• 上面列目前顯示的預設範例是選單 2 與社交網路服務還有搜尋，因為首頁側邊欄已經有搜尋功能，上面列的搜尋可以選擇關閉。

• 編輯社交網路服務，這裡可以新增移除需要的社群圖示，例如臉書、IG…等。

• 點擊設計，可以開始對社群圖示的色彩進行設計❶，例如 圖示色彩❷、邊界❸，同樣的完成後請記得點擊發佈❹。

• 設計完社群圖示的樣式後，社群圖示的連結要到外觀/自訂的 一般。

• 找到社交網路服務帳號。

• 依序填入想要展示的社群連結，例如臉書、IG、X、YouTube…等，完成後一樣請記得點擊發佈。

網誌 結構 Blog Structure

• 接著我們針對網頁中間最重要的區塊進行設計，一樣滑鼠❶移到頁面中就可以看見編輯按鈕❷浮現。

• 佈景主題提供了五種網誌結構展示效果，可以挑選自己喜歡的樣式建立。

• 網誌結構有一個特別的設計就是”卡片選項”，這是樣式呈現很重要的一個設定。

• 資訊卡元素，大家可以選擇想要呈現的資訊，例如精選圖片、文章中繼資料、標題、內容摘要、閱讀全文按鈕。直接拖拉就可以改變展示的位置。

• 拖拉改變位置也可以直接在右側馬上預覽❶，感受樣式改變後的效果。右側向下三角形圖示❷點擊後，還可以單獨對元素內容作設計，非常多樣，大家可以好好測試，找出最適合自己網站的樣式效果。

• 點擊每個卡片選項的設計，就可以針對卡片細部做樣式設計，像是標題字型、標題字型色彩、內容摘要字型、內容摘要色彩、中繼資料字型、中繼資料字型色彩、多功能按鈕字型色彩、中繼資料按鈕背景、資訊卡背景色彩、資訊卡框線、資訊卡陰影、框線圓角半徑。

趨勢文章 Trending Posts

• 趨勢文章 Trending Posts 需要先確認在 Blocksy 設定的擴充功能中啟用，這裡才會出現。可以把它當作熱門文章來使用，它會根據訪客閱讀文章來統計並推薦成趨勢文章。

整體頁尾 Global Footer

• 整體頁尾 Global Footer，這裡可以插入小工具來設計整個區塊內容，同時可以選擇三欄的整是效果。

選單 Menu

• 網站範本的選單❸不符合自己的網站使用，所以需要新建一個選單，請到外觀❶/選單❷，點擊建立選單❹。

• 選單結構下的選單名稱❶填入自己的選單名稱，例如選單一，填寫完成後點擊建立選單❷。

• 接著在 新增選單項目中，找到想要建立選單的項目❶，直接拖拉到右側選單，或是點擊新增至選單❷，選單設定中的指定編輯中選單的顯示位置❸❹，要記得勾選，完成後請點擊儲存選單❺。

• 接著我們將首頁與文章分類分別拉到選單中，來建立網站自己的選單。

• 分別將分類拉到選單中，完成後一樣請記得點擊儲存選單。

• 回到網站前台，就可以看到自己設計的選單一效果了。

小工具 Widgets

• 小工具 Widgets 出現在首頁的資訊欄與頁尾區塊中，在這裡修改內容就可以套用效果。請到外觀❶/小工具❷，點擊三斜線的清單圖示❸，可以將目前使用的小工具列出來。

• 小工具清單檢視中，主要分成主要資訊欄❶與頁尾小工具區域❷，佈景主題範本目前有使用了五個頁尾小工具區域。

• 點擊小工具/清單檢視，就可以開始編輯小工具內容。

• 小工具內容的編輯，可以使用左側區塊功能，清單中的功能區塊都可以使用，可以依據自己網站需求來建立資訊欄內容。

• 修改完成後，回到首頁就可以看到右側資訊欄與下方頁尾小工具區域修改後的內容了。

Add New Post 新增文章

• 文章頁面內容可以說是 WordPress 網站的靈魂，編輯的方式類似。以下舊文章編輯模式跟大家介紹區塊編輯器的編輯方式。
• 來到文章清單，點擊文章/新增文章❶，或是直接點擊文章清單上方的新增文章按鈕❷，都可以快速開啟新文章的編輯畫面。

• 首次啟動區塊編輯器，會出現區塊編輯器歡迎視窗，可以點擊關閉或是瀏覽一下介紹。

• 來到文章編輯畫面，基本上區分為四個重要功能說明。
  • 首先就是左上角的 WordPress LOGO 圖示，點擊就會離開編輯畫面回到控制台。
  • 第二個部分就是左上方的功能選單。
  • 第三個部分就是右側的功能選單區域。
  • 第四個部分就是中間文章內容編輯區域。

• 開始編輯文章，除了文字輸入外，需要其他區塊功能時，可以點擊畫面中的左上角 + 圖示❶或是右側與滑鼠相伴的常用功能區塊 + 圖示❷，常見功能區塊只有六個，點擊瀏覽全部❸，就可以看到所有支援的功能區塊。

• 以這次的網站範本內容來說，搭配的是 Stackable 區塊外掛程式，所以提供了非常多的功能區塊可以選擇使用。

• 當文章內容的區塊越來越多時，可以點擊左上方的工具列選單三斜線圖示❶，區塊內容就會出現清單檢視模式，點擊就可以到該區塊，方便修改，這是非常常用的功能。
• 點擊文章內容中的功能區塊，就可以在右側區塊選單中看到相關的設計設定❷，方便大家調整區塊樣式或是功能，非常方便。

• 文章編輯完成後的單篇文章展示效果，我們可以到外觀/自訂，找到內容類型/單篇文章。

• 點擊內容類型/單篇文章，回來到單篇文章樣式的設計畫面，像是文章結構，可以讓我們決定單篇文章的樣式，例如需不需要側邊資訊欄的設計。

• 接下來我們設定單篇文章想要呈現的樣式內容，以文章元素來說，可以設定精選圖片、文章 標籤、分享框、作者框、文章導覽。頁面元素則有相關文章與留言兩項設定。

Maintenance 管理維護

• 以這次教學內容試用的 Kinsta 主機，在管理維護上可以說是非常簡單。如果網站發生嚴重錯誤，只需要登入主機管理介面，到 Backups/Environment backups/Daily❶，就可以找到每天自動備份的檔案，點擊還原 Restore to ❷就可以還原到發生問題的時間點之前，如果還是沒有辦法解決問題，右下角的 Kinsta 線上客服聯繫圖示❸點擊下去，就可以讓客服快速幫忙解決問題，非常方便。

• 至於 WordPress 網站管理的部分，如果有開啟留言功能的朋友，可以安裝一個防垃圾留言的外掛程式 Antispam Bee，登入 WordPress 控制台，接著到外掛 ❶/安裝外掛 ❷，搜尋外掛關鍵字請輸入 Antispam Bee ❸，找到後請點擊立即安裝 ❹。

• Antispam Bee 外掛程式繁體中文本地化完成，設定上非常簡單方便，基本上分成三個部分，垃圾留言篩選方式（依執行順序進行篩選）、進階設定（其他反垃圾留言工具）、其他設定（多種選項），可以依據自己網站需求勾選套用。

其他範例網站

https://wpmax.tw/mu/