WordPress 主要由佈景主題 (theme)、外掛 (plugin) 所組成，佈景主題提供了網站的主要框架，如：頁首 (header) 、頁尾 (footer) 等；外掛可以新增或延伸網站的功能，如：頁面編輯器、電子商務等。本篇文章將列出 WordPress 網頁設計會使用到的佈景主題與外掛以及參考連結，適用於想自己架設網站、網頁設計師、接案者。
Astra 是一個主打輕量的佈景主題，提供了許多範本，加快網站的開發速度。安裝 Starter Templates 後，可以選擇以整站或區塊的方式匯入範本網站；此外，在媒體庫也會加入 Pixabay 免費圖庫，讓你不用煩惱如何取得圖片素材。
Astra 是我第一個購買的佈景主題，一開始吸引我購買 Astra 的原因是它主打的「輕量」，Header Builder 與 Footer Builder 是它近年來新增的功能，使編輯頁首與頁尾更加方便。此外，Astra 提供了許多範本，可以快速生成各種網站頁面 (例如：首頁、關於頁、聯絡頁等)，增加網站開發的效率，若你對網站架構有一些基礎的了解，會比較不建議直接匯入整個網站，因為有些你用不到的頁面跟區塊，整理起來也是蠻費時的。
Blocksy 是基於的 Gutenberg 編輯器的佈景主題，除了輕量外，它的設定介面相當的直覺、乾淨，付費版還有很多好用的擴充功能，例如：Content Blocks (Hooks)，可以在頁面插入自訂區塊等功能。
Blocksy 目前是我的主力佈景主題，因為它的介面好看、好操作；Content Blocks 很方便，搭配 Stackable 還可以製作出客製文章列表，另外可以透過 Hooks，在頁面插入自訂區塊，進而取代 Elementor 的主題建構器，製作出相對輕量的範本。
Hello Elementor 是由 Elementor 所開發的佈景主題，基本上是完全空白的佈景主題，需要搭配 Elementor Pro 的主題編輯器，才可以建置出完整的網站，適合高度客製的網站，讓網站不受限於佈景主題。
只有網站需要全部客製的情況，我才會選擇 Hello Elementor，因為是幾乎完全空白的佈景主題，所以許多系統頁面也需要自己設定，例如：404 頁面、彙整頁面、搜尋結果頁面等，以上若沒有設定到，前台只會呈現相當簡陋的樣式。
Elementor 是 WordPress 頁面編輯器外掛 (Page Builder) 之一，目前已超過 500 萬次的下載安裝數，Elementor 最大的特色在於只要透過滑鼠拖拉元素不需要寫任何程式碼的情況下，就可以完成一個所見即所得的網站，簡單且容易上手。
詳細介紹與操作：WordPress 網站編輯器 – Elementor 教學
Elementor 大大的降低了網站開發的難度，它擁有視覺化的操作介面，即使不會程式碼也可以設定出複雜的頁面排版，雖然使用 Elementor 加快了網站的開發速度，但其複雜的結構同時也會影響網站的效能，像是部落格、最新消息等會有很多篇的文章，就不適合使用 Elementor 進行編排。
JetEngine 是 Crocoblock 的 Elementor 擴充外掛之一，它擁有許多功能，如：自訂文章類型 (Post Types)、自訂文章列表樣式 (Listings)、自訂欄位 (Meta boxes) 等，透過 Query 的設定可以組合出千變萬化的功能，讓 Elementor 可以做出獨一無二、方便管理的客製網站。
詳細介紹與操作：Elementor 教學 – 如何使用 JetEngine 客製網站
JetEngine 就像是一顆萬靈丹，同時支援 Elementor 以及 Gutenberg，JetEngine 的功能相當強大，讓我省下安裝不少外掛，例如：自訂文章類型 (Post Types)、Taxonomies、Meta box 等，在開發客製網站時相當有幫助，可以設定出多樣的功能；雖然部分設定相對複雜，需要經過好幾次的嘗試才可以達成想要的效果。
Stackable 是基於 WordPress 區塊編輯器的區塊編輯外掛，Stackable 提供許多網頁設計常用的 Blocks，例如：Icob Box、Image Box 等，還可以透過 UI Kits 快速匯入版型，增加網站開發效率。
基本上只要不是排版很複雜的頁面，都可以使用 Stackable 製作出來，它的 Columns 功能跟 Elementor 的 Section 很類似，使用方式大同小異；另外可以透過迴圈來設定客製的文章列表，唯一不足的是網頁平板與手機的設定沒有 Elementor 這麼直覺。
區塊編輯器迴圈設定可以參考上面的影片，透過迴圈的設定可以自己定義文章列表的樣式。
把網頁設計交給我，讓您更專注在產品開發與銷售。
網站架設方案請參考：https://hend.design/service/
