每次新版本的 WordPress 發佈之前都會發佈一個該版本的 Field Guide,說明這個版本的一些重大變動。而 WordPress 5.9 Filed Guide 也於近日發佈了。內容大多是針對開發者的一些注意事項,但一般使用者還是能從這些內容去知道這次版本的一些重大變動,也為這些變動提早做準備。
theme.json 基本結構介紹
在 WordPress 5.8 引進了一個新的功能 theme.json,用來設定區塊編輯器以及個別區塊的樣式,而對於即將於 WordPress 5.9 推出的全站編輯 (Full Site Edit) 更是扮演著很重要的角色。
theme.json 是 JSON (JavaScript Object Notation) 格式檔案,如果你對 JSON 格式不熟悉,可以參考這篇文章。
theme.json 結構
基本的 theme.json 結構如下:
{
"version": 1,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {}
}
version: theme.json 格式的版本號,目前只有一個唯一的版號 1。WordPress 5.8 會忽略不同於當前版本號的 theme.json
settings: 可以啟用或停用功能。
styles: 設定佈景主題的預設樣式
customTemplates:設定在 templates 目錄中的區塊範本。例如你可以設定某個區塊範本可以在哪個內容類型使用。
templateParts:設定在 parts 目錄中的區塊範本組件。
theme.json JSON Schema
因為 theme.json 的設定繁多,如果你要確認 theme.json 可以使用哪些設定,可以參考 theme.json 的 schema。
JSON schema 是用來描述一個 JSON 檔案包含哪些欄位,以及欄位的說明和格式。
外觀自訂器 (Customizer) 在 WordPress 5.9 的角色
全站編輯即將在 WordPress 5.9 推出,對於使用者來說將會是全然不同的操作體驗。在全站編輯的模式下,網站上的所有外觀都可以透過網站編輯器來編輯,也因為這樣,將來若你在 WordPress 5.9 上啟用了支援全站編輯的佈景主題,那麼你將不會看到外觀自訂器 (Customizer)。
但如果你啟用的佈景主題不支援全站編輯,那麼你仍然可以用外觀自訂器來客製化你的外觀。
另外要注意的是,過去你可以在外觀自訂器中預覽未啟用的佈景主題,但在全站編輯下你是無法預覽未啟用的佈景主題的,因為網站編輯器只能在已啟用的佈景主題中使用,但目前已經有人開了一個 ticket,提出希望能夠預覽未啟用的區塊佈景主題。
結論
如果你要編輯或預覽區塊佈景主題,你要先啟用它。
如果你要預覽非區塊佈景主題,則可以依照過去的方式在外觀自訂器中進行預覽。
WordPress 只會在非區塊佈景主題顯示外觀自訂器,或是你使用的外掛有透過 customize_register action 來啟用外觀自訂器。
區塊語法 Block Grammar
我們在「什麼是全站編輯」這篇文章中提到,開發者會使用使用 HTML 範本以及區塊註解 (Block Comment) 而不是 PHP 來描述區塊範本和區塊範本組件。
這篇文章即要帶你認識基本的區塊語法。
首先,一個基本的區塊是由 HTML 註解來呈現的。WordPress 會將這個註解內容編譯並且以 HTML 的方式呈現。
<!-- /-->
在區塊註解中,會以一個用 wp 為前綴和區塊名稱來開頭。例如以下的區塊就是一個搜尋的區塊
<!-- wp:search /-->
區塊註解可以是一個 self-closed 的註解,也可以用開始和結束標籤來包含著 HTML 內容。例如前面提到的搜尋區塊,就是一個單行的 self-closed 註解,因為搜尋區塊不會包含其他內容。
下面的範例是一個段落區塊,中間包含著 HTML 內容,因為段落會包含著其他內容。
<!-- wp:paragraph -->
<p>Welcome to the world of blocks.</p>
<!-- /wp:paragraph -->
透過網站編輯器 (Site Editor) 來編輯範本
在之前的文章提到,要新增或修改範本及範本組件有三種方式,其中一種就是透過網站編輯器來修改。
如果要透過網站編輯器來編輯網站的範本,可以從 [外觀]->[編輯器] 進入。進入之後預設會顯示首頁的頁面編輯。
編輯範本
在範本清單頁面會顯示目前網站的範本,預設會顯示佈景主的的範本。
如果範本被編輯過,則在 icon 上會多一個藍點提示。
如果範本是由使用者新增,則 Added by 會顯示使用者資料。
如果範本是使用者新增的,則可以透過右方的管理項目來刪除範本
如果佈景主題預設的範本被修改過,則可以透過管理項目選單來回復成預設的範本。
如何建立 template 和 template part
建立區塊範本 (Template) 和區塊範本組件 (Template part) 的方式基本上可分為三種:
- 手動建立。建立一個包含區塊標記的 HTML 檔案
- 使用網站編輯器 (site editor)
- 在區塊編輯器中使用範本編輯模式 (template editing mode)
Elementor 架站服務上線!
今天偶然發現 Elementor 的架站服務上線了,一年 $89 美金。包含了主機 (GCP),一個 Elementor Pro 授權,20GB 硬碟,可以用免費的 Elementor 網域,當然也可以用自己的網域。
不過 Elementor 似乎還沒有很積極在推廣,因為在首頁或整個網站都沒有太的的屆紹,甚至連名字我都覺得好像還沒取好,只是單純取名為 HOSTED ELEMENTOR WEBSITE,就連臉書也都沒有提及。
至於好不好用就等待勇者進行測試囉!
什麼是全站編輯 (Full Site Editing)?
- 所有頁面上看到的內容都是一個區塊,例如 Logo 或是網站標題
- 你可以在編輯器編輯範本或範本組件
- 全站編輯會移除「自訂」和「小工具」選單
- 開發者會使用 HTML 範本而不是 PHP,以及使用區塊註解(block comments)和標記而不是 PHP 函式
編輯器和佈景主題如何配合
當你在網站編輯器或是範本編輯器儲存設計時,WordPress 會將設計儲存在資料庫中。在佈景主題中的檔案不會被更新,網站會使用儲存的範本。
WordPress 會儲存內容和標記在兩個新的內容類型 (post type):wp_templates 和 wp_template_part
佈景主題設定檔 (theme.json)
theme.json是用來設定區塊的預設值,例如內容寬度、文字顏色或背景色等外觀設定。
你也可以用來啟用或是關閉功能。
降低佈景主題開發的障礙
全站編輯將降低佈景主題的開發障礙,對於佈景主題作者來說,不需要再處理自訂以及小工具和 post meta boxes。
支援全站編輯的佈景主題將會更容易被建置,而且會包含更少的檔案和更少的 CSS。
如何測試全站編輯
通常在 WordPress 正式發佈之前都會有一段時間,而這段時間網站管理者或是開發者就可以透過測試版本來進行測試,避免正式版本釋出後更新到網站出問題,開發者也可以提早針對有問題的功能進行相對應的修改。隨著 WordPress 5.9 即將發佈,建議站長和開發者儘早測試新版本在自己網站上和客製化功能的相容性。本篇文章即在介紹如何測試最新版本 WordPress 的全站編輯功能。
步驟1 – 安裝 WordPress
如果你要測試開發中的 Gutenberg 功能,至少要 WordPress 5.8 以上的版本。另一個方式是安裝開發中的 WordPress 分支版本。如果你安裝開發中的 WordPress 分支版本,你可以選擇搭配 Gutenberg 外掛進行測試,或是不使用 Gutenberg 外掛也可以,因為 Guteberg 外掛會合併進入到之後發佈的 WordPress 區塊編輯器中。
步驟2 – 安裝 Gutenberg
要讓全站編輯功能可以啟用,你必須要安裝最新版本的 Gutenberg 外掛。你可以在 WordPress 後台進行安裝,或是到 WordPress 官方外掛目錄下載。https://wordpress.org/plugins/gutenberg/。
你也可以使用開發中的 Gutenberg 外掛,但這不是必需的。你可以從 Gutenberg 的 Github 存放庫來下載最新開發中的 Gutenberg。
git clone https://github.com/WordPress/gutenberg
下一步使用命令列工具到 Gutenberg 的目錄下執行
npm install
最後再執行
npm run build
如果你沒有完成以上步驟,在 WordPress 後台會看到相關的提示訊息
步驟3 – 安裝區塊佈景主題 (Block Theme)
最後你需要安裝一個支援全站編輯的區塊佈景主題。你可以使用將來在 5.9 版本中內建的預設佈景主題 Twenty twenty-Two
以上就是測試全站編輯的準備步驟,接下來你就可以開始體驗全站編輯的功能囉!