fbpx
Stackable 編輯內容新體驗

什麼是 WordPress 區塊版面配置目錄 (Patterns)?

世界上每天都有成千上萬人透過 WordPress 建立的網站,但暫時沒有一套機制,讓所有的使用者可以輕鬆 [保存 Saved]、[重用 Reused] 和 [共享 Shared] 網站製作的元件,例如版面配置、欄位規劃、圖片組合方式、複雜結構的表格和行動呼籲區塊等等。建基於這是複雜和巨大的工作,WordPress 官方決定推出這個專案,名為「WordPress 區塊版面配置目錄 (Block Patterns)」的全球性項目應運而生,類似的例子像 Adobe 的創作者分享園地,讓全球的創作者「共享」大家的版面設計資源,當然基於「開源精神」,大家可以下載、收改並重新發佈自己的版本。這有賴於 WordPress 區塊編輯器 提供豐富和多樣性的生態環境。

【觀念】如何在 WordPress 網站使用「區塊版面配置」功能?

如果你曾經使用過像 Elementor 這類簡易的 WordPress 頁面編輯器,相信應該有用過它們數量龐大的「範本庫 Template Library」來快速制作專業的頁面。WordPress 官方在這領域原本是沒有任何著墨和發展。在 2022 年睦續開放的「區塊版面配置」就是往這個方向踏出重要的一步。區塊版面配置其實是文字格式的內容,並且跟複製及貼上文字一樣,使用者只需要在區塊編輯器上複製並貼上區塊版面配置的內容,就能立即得到相對應的版面效果。

  1. 在 WordPress 區塊編輯器中開啟任何文章或頁面。
  2. 將游標放在要新增區塊版面配置的位置。
  3. 按住 Ctrl (Windows) 或  (macOS) 搭配按下 V 鍵或點擊滑鼠右鍵並從選單中選取 [貼上],以貼上剪貼簿中的內容。

WordPress 區塊版面配置目錄 | 專屬頁面

WordPress 區塊版面配置目錄 | 專屬頁面
WordPress 區塊版面配置目錄 | 專屬頁面

暫時在 WordPress 官方網站 之上還未找到這個服務的入口,可能因為仍有不少改進空間,在我們的測試時也發現有一點 Bug 或錯誤之處。但完整版應該會在 2022 年中後期就開通,加上暫時可以動用的預製區塊非常少,不少分類只有零碎的選擇,但收到不少情報往後會允許「來自世界各地的設計師」上傳自己的區塊範本,屆時將會百花齊放,各種風格和功能的區塊,會多到使用者花多眼亂和選擇困難,期待這個服務的後續發展。

基礎介面使用和控制

基礎介面使用和控制
基礎介面使用和控制

建議將這個頁面加進你的瀏覽器書籤 (Bookmark) 方便往後隨時隨地可以來這裡「複制」合適的區塊到你的網站之上,因為暫時來說,這服務的入口不太好找。

步驟一:

直接搜尋區塊版面配置,不過暫時提供選擇不多,太細分的關鍵字可能會出現找不到的情況,要注意。

步驟二:

從 7 大分類裡挑選合適的選擇,包含[文字內容]、[多重欄位]、[按鈕]、[圖片]、[圖庫]、[精選] 或 [標題] 可供站長「複制和貼上」。

從 7 大分類裡挑選合適的選擇

從 7 大分類裡挑選合適的選擇
所見即所得的「區塊庫」,從 7 大分類裡挑選合適的選擇

介面非常簡單,如果你有使用 免費圖庫素材 的體驗,這類似大家在選擇合適的圖片,只不過它們是一推區塊組合,多用數次應該可以很快掌握到這個技巧。

步驟一:

從 7 大分類裡挑選合適的選擇,包含[文字內容]、[多重欄位]、[按鈕]、[圖片]、[圖庫]、[精選] 或 [標題] 可供站長「複制和貼上」。

步驟二:

可以篩選「最新的在前」或「我的最愛」優先排序。

步驟三:

區塊組合的預覽,點擊「複制」可以直接在區塊編輯器套用效果。

【方法一】複制滿意的區塊備用

複制滿意的區塊備用
複制滿意的區塊備用

步驟一:點擊「複制」按鈕

選對了區塊嗎?那就點擊複制即可。

【方法一】在「區塊編輯器」貼上區塊

在「區塊編輯器」貼上區塊
在「區塊編輯器」貼上區塊

步驟一:回到「區塊編輯器」並套用

套用的意思是指,Ctrl + V 或「貼上」你剛剛「複制」的區塊。

步驟二:微調區塊組合的細節

也許你複制的區塊組合的「預覽圖片」很精美華麗,但請有心理準備,套用的範本未必能 100% 還原出來,要記住重點,貼的材料本身就存在於區塊編輯器,例如上方是我們常用的「圖庫區塊」,你需要變通一點就明白原理。

【方法二】在「區塊編輯器」的 [版面配置] 新增

【方法二】在「區塊編輯器」的 [版面配置] 新增
【方法二】在「區塊編輯器」的 [版面配置] 新增

步驟一:點擊「+」按鈕

新增 1 個全新區塊。

步驟二:從「區塊」分頁切換至「版面配置」分頁

版面配置頁面的內容是從官方那邊提取,區塊組合的數量會隨年月慢慢新增。

步驟三: 分類篩選器

從各種分類裡快速顯示不同的區塊選擇,提供預覽效果。

步驟四:點「區塊組合」即可以套用

這個是非常直觀的操作,點擊後會把相關的區塊新增到右方「文章」或「頁面」。

區塊內容符合「回應式網頁設計」

區塊內容符合「回應式網頁設計」
區塊內容符合「回應式網頁設計

所有區塊範本都符合現代的「回應式網頁設計」規範,所以各位站長不用擔心,官方當然知道大的憂慮和困惑,你也可以在下拉式選單套用 3 種寬度測試,包括是 [目前寬度 (960px)]、[目前寬度 (960px)] 或 [目前寬度 (960px)] 等等。

測試「回應式網頁設計」

測試「回應式網頁設計」
測試「回應式網頁設計」

按區塊群兩側的「拉杆」可以向左或右拖動,控制顯示不同寬度的實時測試,跟據使用體驗,大部分都通過這類測試,相信未來開放創作者上傳,也必須要求符合這一規定。

WordPress.org 會員帳號功能:新增「我的最愛」

WordPress.org 會員帳號功能:新增「我的最愛」
WordPress.org 會員帳號功能:新增「我的最愛」

部分站長可能已經擁有 WordPress.org 會員帳號,在登入後可以將「喜愛的區塊」打分和加入自己的喜愛清單,方便往後重複使用和記錄不來。申請帳號是免費的,也建議新手建立一個,不少國際活動或行為,如 WordCamp 、上傳外掛 / 佈景主題、參與翻譯工作或加入義工等等,這個帳號是必不可少。

如何找到「我的最愛」區塊?

如何找到「我的最愛」區塊?
如何找到「我的最愛」區塊?

在 WordPress 區塊版面配置目錄 (Patterns) 首頁的「搜尋區塊版面配置」附近,就會找到「我的最愛」的入口,當然前題是你已經有 WordPress.org 會員帳號並在登入狀態。

管理「我的最愛」的區塊庫

管理「我的最愛」的區塊庫
管理「我的最愛」的區塊庫

步驟一:管理「我的最愛」分頁

要注意,這個頁面「並非公開」,只有你自己看得到。

步驟二:區塊組合的列表

現在就不用再大海撈針找區塊範本,只需從自己喜愛的區塊選擇,加快工作進度。

【範例】標題 (Header) 區塊組合

帶有傾斜疊加和文本的圖像
帶有傾斜疊加和文本的圖像
帶標題的大標題
帶標題的大標題
帶有半色調圖案的標題區域
帶有半色調圖案的標題區域

【範例】多重欄位 (Columns) 區塊組合

2 欄位的文字 + 圖庫
2 欄位的文字 + 圖庫
3 欄位的帶圖片語句
3 欄位的帶圖片語句
 3 欄位的價目表 (Price List)
3 欄位的價目表 (Price List)

【範例】按鈕 (Buttons) 區塊組合

帶有圖像背景的按鈕連結
帶有圖像背景的按鈕連結
帶有文本和按鈕的傾斜背景
帶有文本和按鈕的傾斜背景
兩個帶有文本和按鈕的圖像
兩個帶有文本和按鈕的圖像

【範例】圖片 (Images) 區塊組合

左右兩張圖片對稱排列
左右兩張圖片對稱排列
行動號召配上背景圖片
行動號召配上背景圖片
交叉對錯的圖片排列
交叉對錯的圖片排列

【範例】圖庫 (Gallery) 區塊組合

2 欄式圖片顯示
2 欄式圖片顯示
夥伴 Logo 標誌
夥伴 Logo 標誌
4 欄式佈局:3 張圖片 + 文本解說
4 欄式佈局:3 張圖片 + 文本解說

【範例】精選 (Featured) 區塊組合

背景圖片配上「引言」
背景圖片配上「引言」
單純色彩背景配上文字描述
單純色彩背景配上文字描述
活動通告和詳情
活動通告和詳情

【範例】文字內容 (Text) 區塊組合

左邊圖片 + 右邊簡介
左邊圖片 + 右邊簡介
帶圖片背景的圖文解說
帶圖片背景的圖文解說
上方標題 + 左方圖片 + 右方文本內容
上方標題 + 左方圖片 + 右方文本內容

總結:

相信你已經初步掌握「WordPress 區塊版面配置目錄」的應用?我們認為這是非常值得推廣的官方項目,也許暫時推廣的信息或教學並沒有太多。但這個讓 WordPress 區塊編輯器 更方便的應用,在不久將來可能成為創作者的分享園地,設計師可以好好把握這個機會,雖然官方仍未釋出怎樣獲得上傳作品的資格,但現在已經讓我們體驗到官方發展這塊的決心。

常見問題 FAQ

什麼是 WordPress 區塊版面配置目錄 (Patterns)?

它讓所有的使用者可以輕鬆 [保存 Saved]、[重用 Reused] 和 [共享 Shared] 網站製作的元件,例如版面配置、欄位規劃、圖片組合方式、複雜結構的表格和行動呼籲區塊等等。建基於這是複雜和巨大的工作,WordPress 官方決定推出這個專案,名為「WordPress 區塊版面配置目錄 (Block Patterns)」的全球性項目應運而生,類似的例子像 Adobe 的創作者分享園地,讓全球的創作者「共享」大家的版面設計資源,當然基於「開源精神」,大家可以下載、收改並重新發佈自己的版本。這有賴於 WordPress 區塊編輯器 提供豐富和多樣性的生態環境。

為什麼我找不到 WordPress 區塊版面配置目錄的網站入口?

暫時在 WordPress 官方網站 之上還未找到這個服務的入口,可能因為仍有不少改進空間,在我們的測試時也發現有一點 Bug 或錯誤之處。但完整版應該會在 2022 年中後期就開通,加上暫時可以動用的預製區塊非常少,不少分類只有零碎的選擇,但收到不少情報往後會允許「來自世界各地的設計師」上傳自己的區塊範本,屆時將會百花齊放,各種風格和功能的區塊,會多到使用者花多眼亂和選擇困難,期待這個服務的後續發展。

前往 WordPress 區塊版面配置目錄網站:
https://tw.wordpress.org/patterns

參考資料和引用文獻:

學員人數:6,500+ 人(持續增加之中)

中文語系的 WordPress - Facebook 社團列表

發表您的留言

加入我們的 Facebook 學習社團免費的教學資源、交流和解決問題!

是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術