WordPress編輯器教學：快速上手各種編輯器的操作攻略

還在為WordPress眾多編輯器而感到困惑嗎？這份「WordPress編輯器教學:快速上手各種編輯器的操作」攻略，將帶領你快速掌握經典編輯器、Gutenberg區塊編輯器、Elementor、Beaver Builder等常用編輯器的操作方法。 我們會循序漸進地解說每個編輯器的特色功能和實用技巧，例如建立美觀版面、高效管理媒體檔案等。 建議新手從Gutenberg區塊編輯器開始學習，它功能強大且內建於WordPress，學習曲線相對平緩。 熟練掌握後，再根據網站需求探索其他進階編輯器，以達到最佳效率。 透過本教學，你將不再被編輯器選項困擾，輕鬆建立出理想的WordPress網站。

這篇文章的實用建議如下(更多細節請繼續往下閱讀)

1. 從Gutenberg區塊編輯器入門： 如果你剛接觸WordPress，建議先熟悉內建的Gutenberg編輯器。它操作直覺，功能強大，透過學習新增、編輯和排列不同區塊（例如段落、圖片、標題），就能快速建立基本網頁和文章。善用「+」號按鈕和斜線「/」快速搜尋區塊，大幅提升效率。 熟悉後再考慮進階編輯器如Elementor或Beaver Builder。
2. 善用區塊組合與範本： 為了提升內容製作效率，不要每次都從零開始。學習如何將常用的區塊組合儲存為「區塊組合」，並善用Gutenberg或其他編輯器提供的範本功能。 這能節省大量時間，讓你的內容製作流程更流暢。考慮安裝像是Kadence Blocks或GenerateBlocks等外掛，以獲得更多區塊和範本選項。
3. 根據需求選擇編輯器： 經典編輯器簡單易上手，適合只想要簡單文字編輯的使用者；Gutenberg區塊編輯器功能強大且靈活；Elementor和Beaver Builder則提供更直觀的視覺化操作，適合追求精緻版面的使用者。 評估自身技術水平和網站需求，選擇最適合你的編輯器，才能事半功倍。 不要害怕嘗試，但專注於精通一個編輯器，再探索其他選項。

Gutenberg區塊編輯器入門指南

WordPress 的 Gutenberg 區塊編輯器，自 5.0 版本推出以來，已成為 WordPress 網站內容建立的主流方式。對於剛接觸 WordPress 的新手來說，Gutenberg 編輯器提供了一個直觀、靈活且功能強大的平台，可以輕鬆打造出美觀且專業的網站內容。本段將帶領你快速入門 Gutenberg 區塊編輯器，讓你不再對它感到陌生。

Gutenberg 區塊編輯器的核心概念：區塊

Gutenberg 編輯器的核心概念是「區塊」。你可以將網站上的所有內容，例如段落、圖片、標題、影片、按鈕等，都視為一個個獨立的區塊。透過堆疊和排列這些區塊，就能夠輕鬆創建出各種不同版型的頁面和文章。

使用區塊的好處：

• 靈活度高：可以自由組合和移動區塊，輕鬆調整頁面佈局。
• 一致性：透過重複使用相同的區塊樣式，確保網站風格一致。
• 易於維護：修改區塊樣式，可以一次性更新所有使用該區塊的頁面。

如何新增區塊

在 Gutenberg 編輯器中，新增區塊非常簡單：

1. 點擊「+」號按鈕：在編輯器中，你會看到一個「+」號按鈕，點擊它可以打開區塊選擇器。
2. 選擇區塊類型：區塊選擇器會顯示各種不同類型的區塊，例如「段落」、「圖片」、「標題」等。選擇你需要的區塊類型。
3. 輸入內容：選定區塊後，就可以在區塊中輸入內容，例如文字、圖片連結等。

或者，你也可以直接在現有區塊下方按下 Enter 鍵，快速新增一個段落區塊。也可以使用斜線「/」快速搜尋區塊。例如輸入「/圖片」就會出現圖片區塊選項。

常用的 Gutenberg 區塊

Gutenberg 編輯器內建了許多實用的區塊，以下列出一些常用的區塊：

• 段落：用於輸入文字內容。
• 標題：用於建立標題，共有 H1 到 H6 六種級別。
• 圖片：用於插入圖片。
• 影片：用於嵌入影片。
• 清單：用於建立有序或無序清單。
• 按鈕：用於建立可點擊的按鈕。
• 引用：用於引用他人內容。
• 欄位：用於建立多欄式佈局。
• 分隔符：用於在內容之間添加分隔線。
• 程式碼：用於顯示程式碼。

區塊設定與樣式調整

每個區塊都有自己的設定選項，可以讓你調整區塊的樣式和行為。點擊區塊後，你會在右側的側邊欄看到區塊設定面板。在這裡，你可以調整文字大小、顏色、背景顏色、對齊方式等。

區塊設定面板通常包含以下選項：

• 區塊特定設定：例如圖片區塊可以設定圖片大小、對齊方式等。
• 進階設定：可以添加 CSS 類別，方便自定義區塊樣式。

善用區塊組合與範本

為了提升效率，Gutenberg 編輯器也支援區塊組合與範本功能。你可以將常用的區塊組合儲存為區塊組合，方便日後重複使用。此外，你也可以使用現成的區塊範本，快速建立美觀的頁面佈局。許多外掛也提供額外的區塊以及範本可以使用，例如 Kadence Blocks 和 GenerateBlocks 等，它們擴展了 Gutenberg 的功能，讓你能更靈活地設計網站。

例如，Kadence Blocks 提供進階的區塊，像是進階文字、按鈕、圖示等等，讓設計更豐富。

熟悉 Gutenberg 區塊編輯器的基本操作後，你就能夠輕鬆創建出各種不同風格的網站內容。多加練習，善用各種區塊和設定選項，你也能成為 Gutenberg 編輯器高手！

經典編輯器：回歸簡潔操作

對於許多從WordPress早期就開始使用的用戶來說，經典編輯器仍然是他們心中的首選。即使在Gutenberg區塊編輯器推出後，經典編輯器仍然擁有廣大的使用者群體。它以簡潔直觀的操作介面和強大的文字處理能力而聞名。如果你追求的是一個專注於文字內容、避免過多視覺幹擾的編輯環境，那麼經典編輯器絕對值得你深入瞭解。

經典編輯器的優勢

• 簡潔易上手：經典編輯器的介面非常簡單，工具列上的按鈕一目瞭然，即使是初學者也能快速上手。
• 專註文字內容：經典編輯器提供了一個純粹的文字編輯環境，讓你能夠專注於撰寫內容，不受過多視覺元素的幹擾。
• 強大的文字處理功能：經典編輯器內建了豐富的文字格式設定選項，包括粗體、斜體、項目符號、編號列表、引用等等，能滿足你基本的文字編輯需求。
• HTML編輯模式：如果你熟悉HTML語法，可以在「文字」模式下直接編輯HTML程式碼，實現更精細的控制。
• 外掛支援：經典編輯器擁有龐大的外掛生態系統，你可以透過安裝外掛來擴充其功能，例如加入表格、程式碼高亮、SEO優化等。

如何使用經典編輯器

如果你還在使用WordPress 5.0或更高版本，並且想使用經典編輯器，可以透過以下幾種方式：

1. 安裝 Classic Editor 外掛：這是最簡單的方法。在WordPress後台的「外掛」>「安裝外掛」中搜尋「Classic Editor」，安裝並啟用它。這個外掛能讓你完全恢復到經典編輯器的使用體驗。
2. 使用 Code Editor 外掛：WordPress 內建程式碼編輯器。
3. 停用 Gutenberg 區塊編輯器：你也可以選擇停用Gutenberg區塊編輯器。不過，這種方法可能會影響到其他使用區塊編輯器的功能或外掛。

經典編輯器的常用技巧

• 使用快捷鍵：熟悉常用的快捷鍵可以大幅提升你的編輯效率。例如，Ctrl+B (Cmd+B) 加粗文字、Ctrl+I (Cmd+I) 斜體文字、Ctrl+Shift+L (Cmd+Shift+L) 項目符號列表等。
• 善用格式刷：格式刷可以快速複製文字格式，省去重複設定的時間。
• 插入媒體檔案：點擊工具列上的「新增媒體」按鈕，可以輕鬆上傳圖片、影片等媒體檔案，並插入到文章中。
• 預覽文章：在發布文章前，務必點擊「預覽」按鈕，檢查文章的排版和內容是否符合你的期望。

儘管Gutenberg區塊編輯器代表了WordPress的未來發展方向，但經典編輯器仍然是一個可靠且高效的選擇，特別是對於那些習慣傳統編輯模式，或只需要簡單文字排版的用戶來說。透過善用經典編輯器的功能和技巧，你仍然可以輕鬆創建出令人滿意的內容。

如果你想更深入瞭解經典編輯器，可以參考WordPress官方文件：Classic Editor。

WordPress編輯器教學:快速上手各種編輯器的操作. Photos provided by unsplash

Elementor：視覺化編輯器的魅力

Elementor是一款非常受歡迎的WordPress頁面建構器外掛，它讓您能夠以視覺化的方式設計和建立網站頁面，而無需編寫任何程式碼。如果您希望輕鬆創建具有吸引力且專業的網站，Elementor絕對是一個值得考慮的選擇。Elementor之所以迷人，在於它提供了一個完全拖放式的介面，讓您可以即時預覽變更，所見即所得，極大地簡化了網頁設計流程。

Elementor的核心功能

Elementor之所以受到廣泛歡迎，是因為它擁有多項強大的功能，使得網頁設計變得更加簡單和高效：

• 直觀的拖放介面：Elementor採用直觀的拖放介面，讓您可以輕鬆地將各種元素（例如：標題、文字、圖片、按鈕等）拖放到頁面上，並隨意調整它們的位置和大小。
• 即時預覽：在Elementor中，您可以即時預覽您所做的所有變更，而無需在編輯器和預覽模式之間來回切換。這讓您可以立即看到設計效果，並進行相應的調整。
• 豐富的範本庫：Elementor提供豐富的預製範本，涵蓋各種網站類型和頁面佈局。您可以直接使用這些範本，並根據自己的需求進行修改，從而節省大量的設計時間。 Elementor範本庫包含了各式各樣的設計，絕對能激發您的靈感。
• 大量的Widget(小工具)：Elementor提供了大量的widget，包括基本的標題、文本、圖像、按鈕，以及進階的滑塊、表單、價格表等等。這些widget可以幫助您輕鬆地建立各種不同功能的頁面。
• 響應式設計：Elementor支持響應式設計，讓您可以輕鬆地創建在各種裝置（包括桌面電腦、平板電腦和手機）上都能完美顯示的網站。您可以針對不同的裝置設定不同的樣式和佈局，以確保最佳的使用者體驗。
• 主題構建器：(Elementor Pro功能)Elementor Pro 提供了主題構建器功能，讓您可以完全控制網站的主題設計，包括頁首、頁尾、單一文章頁面和封存頁面等。
• 彈出視窗生成器：(Elementor Pro功能)利用彈出視窗生成器，您可以輕鬆建立各種彈出視窗，用於促銷活動、訂閱電子報或顯示重要訊息。
• 與行銷工具整合：Elementor可以與各種行銷工具整合，例如：Mailchimp、GetResponse等，讓您可以輕鬆地建立訂閱表單，並將潛在客戶資料匯入到您的行銷列表中。

如何開始使用Elementor

如果您想開始使用Elementor，可以按照以下步驟操作：

1. 安裝Elementor外掛：在WordPress後台中，前往「外掛」>「安裝外掛」，搜尋「Elementor」，然後安裝並啟用它。
2. 建立或編輯頁面：建立一個新的頁面，或編輯現有的頁面。在編輯頁面時，點擊「使用Elementor編輯」按鈕。
3. 熟悉Elementor介面：Elementor介面主要分為三個部分：左側的widget面板、中間的預覽區域和頂部的工具列。
4. 拖放widget：從widget面板中選擇您需要的widget，然後將它們拖放到預覽區域中。
5. 自訂widget：點擊預覽區域中的widget，然後在左側的widget面板中自訂它們的內容、樣式和進階設定。
6. 儲存並發布：完成頁面設計後，點擊「發布」按鈕以發布您的頁面。

Elementor的優點與缺點

Elementor的優點：

• 易於使用：Elementor擁有直觀的介面和拖放功能，即使是沒有程式設計經驗的使用者也能夠快速上手。
• 功能強大：Elementor提供豐富的功能和widget，可以滿足各種不同的網頁設計需求。
• 高度可定製：Elementor讓您可以完全控制頁面的外觀和佈局，從而創建獨一無二的網站。
• 響應式設計：Elementor支持響應式設計，確保您的網站在各種裝置上都能完美顯示。

Elementor的缺點：

• 頁面載入速度：如果使用不當，Elementor可能會導致頁面載入速度變慢。但您可以通過優化圖片、使用快取外掛和減少不必要的widget來改善頁面載入速度。
• 需要付費才能使用進階功能：Elementor的大部分核心功能都是免費的，但如果您需要使用進階功能（例如：主題構建器、彈出視窗生成器等），則需要購買Elementor Pro。

Elementor SEO優化技巧

使用Elementor建立網站時，SEO優化也十分重要。以下是一些Elementor SEO優化技巧：

• 使用SEO友善的URL：確保您的頁面URL包含關鍵字，並且簡短易讀。
• 優化標題標籤：使用H1、H2、H3等標題標籤來組織您的內容，並在標題中包含關鍵字。
• 優化圖片：為您的圖片添加ALT文字，並壓縮圖片大小以提高頁面載入速度。
• 建立內部連結：在您的內容中建立內部連結，以幫助搜尋引擎更好地瞭解您網站的結構。
• 使用SEO外掛：使用Rank Math等SEO外掛可以幫助您更好地優化您的Elementor網站。 Rank Math 與 Elementor 的整合讓您在編輯頁面的同時進行SEO設定。

總之，Elementor是一款功能強大且易於使用的WordPress頁面建構器，它可以幫助您輕鬆地建立具有吸引力且專業的網站。只要注意優化頁面載入速度和SEO，您就可以充分利用Elementor的優勢，打造成功的網站。

Beaver Builder：拖放式編輯的便捷

Beaver Builder 是一款強大的 WordPress 頁面建構器，以其直觀的拖放介面和豐富的模組而聞名。對於希望快速建立專業外觀頁面，又不想深入研究程式碼的用戶來說，Beaver Builder 絕對是一個理想的選擇。與 Gutenberg 和經典編輯器相比，Beaver Builder 提供了更高度的視覺化控制，讓您可以即時看到頁面的最終呈現效果。

Beaver Builder 的主要特色

• 拖放式介面： Beaver Builder 採用簡單直觀的拖放介面，讓您可以輕鬆地將各種模組（例如：文字、圖片、影片、按鈕等）添加到頁面中，並隨意調整它們的位置和大小。
• 豐富的模組庫： Beaver Builder 提供了豐富的預建模組，涵蓋了各種常見的頁面元素，例如：標題、段落、圖片、影片、滑塊、表格、聯絡表單等。您可以直接使用這些模組，或根據自己的需求進行自定義。
• 響應式設計： 使用 Beaver Builder 建立的頁面具有響應式設計，可以自動適應不同尺寸的螢幕，確保在桌機、平板和手機上都能提供最佳的瀏覽體驗。
• SEO 優化： Beaver Builder 產生的程式碼乾淨簡潔，有助於提升網站的 SEO 排名。同時，它也與各種 SEO 外掛（例如：Yoast SEO、Rank Math）完美兼容，讓您可以輕鬆地優化頁面的標題、描述和關鍵字。
• 主題兼容性： Beaver Builder 與大多數 WordPress 主題兼容，您可以將它與現有的主題一起使用，或選擇專為 Beaver Builder 設計的主題。

如何使用 Beaver Builder 快速建立頁面

以下是使用 Beaver Builder 快速建立頁面的基本步驟：

1. 安裝和啟用 Beaver Builder 外掛： 您可以從 WordPress 外掛目錄中搜尋並安裝 Beaver Builder，或者從 Beaver Builder 官方網站購買付費版本。
2. 創建新的頁面或文章： 在 WordPress 後台中，創建一個新的頁面或文章。
3. 啟動 Beaver Builder 編輯器： 在頁面或文章編輯器中，點擊「Beaver Builder」按鈕，啟動 Beaver Builder 編輯器。
4. 添加和配置模組： 從右側的模組面板中，選擇您需要的模組，將它們拖放到頁面中，並根據您的需求配置模組的屬性。
5. 調整頁面佈局： 使用拖放功能，調整模組的位置和大小，創建您想要的頁面佈局。
6. 預覽和發布： 預覽頁面，確認沒有問題後，點擊「發布」按鈕，發布您的頁面。

Beaver Builder 的進階技巧

除了基本的操作之外，Beaver Builder 還提供了許多進階技巧，可以幫助您更好地利用它的功能：

• 使用模板： Beaver Builder 提供了大量的預建模板，涵蓋了各種常見的頁面類型，例如：首頁、關於我們頁面、聯絡我們頁面等。您可以直接使用這些模板，或根據自己的需求進行修改。
• 創建自定義模組： 如果您需要特定的功能，Beaver Builder 允許您創建自定義模組，並將它們添加到模組庫中。
• 使用 CSS 自定義樣式： Beaver Builder 允許您使用 CSS 自定義頁面的樣式，讓您可以完全控制頁面的外觀。
• 善用快捷鍵： Beaver Builder 提供了許多快捷鍵，可以幫助您更快地完成操作。您可以在 Beaver Builder 的官方文檔中找到完整的快捷鍵列表。

Beaver Builder 是一款功能強大且易於使用的 WordPress 頁面建構器，可以幫助您快速建立專業外觀的網站。如果您正在尋找一款拖放式編輯器，那麼 Beaver Builder 絕對值得您考慮。您可以在Beaver Builder 的官方網站上了解更多資訊。

WordPress編輯器教學:快速上手各種編輯器的操作結論

透過這篇「WordPress編輯器教學:快速上手各種編輯器的操作」攻略，我們已經探索了經典編輯器、Gutenberg區塊編輯器、Elementor和Beaver Builder等常用WordPress編輯器的核心功能和實用技巧。 從簡潔易用的經典編輯器，到功能強大的Gutenberg區塊編輯器，再到視覺化操作的Elementor和Beaver Builder，每種編輯器都各有千秋，適合不同需求的使用者。

希望這份教學能幫助你克服WordPress編輯器選項眾多的困擾。記住，選擇最適合你自身技能和網站需求的編輯器纔是最重要的。 無論你選擇哪種編輯器，熟練掌握其基本操作、善用其特色功能，都是建立高品質網站的關鍵。 持續練習，探索更多技巧，你將能更有效率地創作內容，並最終達成你的網站目標。 別忘了，這只是你WordPress之旅的開始，還有更多精彩的功能等著你去發現！

再次強調，這份「WordPress編輯器教學:快速上手各種編輯器的操作」攻略的目標，是讓你不再被編輯器選項所困擾，從容地建立和管理你的WordPress網站。 我們鼓勵你持續學習，不斷提升你的WordPress技能。

WordPress編輯器教學:快速上手各種編輯器的操作 常見問題快速FAQ

Q1：我剛接觸WordPress，不知道從哪個編輯器開始學習比較好？

建議新手從Gutenberg區塊編輯器開始學習。它功能強大且內建於WordPress，學習曲線相對平緩。您可以透過直覺的拖放式操作和豐富的區塊類型，快速掌握WordPress網站內容建立的基本概念。熟悉了基本操作後，再根據網站需求探索其他進階編輯器，例如Elementor或Beaver Builder，以達到最佳效率。

Q2：經典編輯器似乎很簡單，但它有什麼優勢？

經典編輯器最大的優勢在於其簡潔易上手的介面和強大的文字處理能力。對於習慣傳統文字編輯方式的使用者，或只需要簡單文字排版而不需要繁複視覺效果的用戶來說，經典編輯器是一個高效且可靠的選擇。它提供豐富的文字格式設定選項，並支持HTML編輯模式，讓您有更大的控制權，尤其是對於需要精確控制網頁顯示的專業人士而言，仍然是重要的工具。此外，其龐大的外掛生態系統也讓您能夠透過外掛擴展其功能。

Q3：Elementor和Beaver Builder都是視覺化編輯器，它們之間有什麼不同？有什麼優缺點？

Elementor 和 Beaver Builder 都是功能強大的視覺化編輯器，但它們的重點和風格有所不同。Elementor 強調快速建構和豐富的模組，提供大量預設範本和widget，讓您輕鬆地建立各種不同的頁面，適合追求快速上手和視覺效果的使用者。Beaver Builder 則更注重高度的可定製性，提供更精細的佈局控制，適合需要高度客製化網站外觀的使用者。Elementor 需要額外購買 Pro 版本才能解鎖更多功能，而 Beaver Builder 則在價格上可能更有彈性。

選擇哪一個取決於您的網站類型、預算和個人偏好。如果您重視速度和靈活性，Elementor 是不錯的選擇；如果您重視高度可定製性，Beaver Builder 更適合您。請謹慎評估自身需求，並考慮試用不同的編輯器，以找到最適合您的選擇。