WordPress 佈景主題目錄 2021 回顧

根據 WordPress 官方的統計,2021年 一共增加了 1227 個佈景主題,其中只有 29 個是區塊佈景主題 (Block Theme)

如果你要找區塊佈景主題,可以透過 WordPress.org 的 Feature Filter 來過濾。在 Features 的部分勾選 Full Site Editing,然後點擊 Apply Filters 來顯示過濾的結果。

在這篇文章發佈的當下,原本 29 個區塊佈景主題已經成長到 35 個了,相信 2022 年會有更多的區塊佈景主題。

外觀自訂器 (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)

資料來源:https://developer.wordpress.org/block-editor/how-to-guides/themes/create-block-theme/#creating-the-templates-and-template-parts

Elementor 架站服務上線!

今天偶然發現 Elementor 的架站服務上線了,一年 $89 美金。包含了主機 (GCP),一個 Elementor Pro 授權,20GB 硬碟,可以用免費的 Elementor 網域,當然也可以用自己的網域。

不過 Elementor 似乎還沒有很積極在推廣,因為在首頁或整個網站都沒有太的的屆紹,甚至連名字我都覺得好像還沒取好,只是單純取名為 HOSTED ELEMENTOR WEBSITE,就連臉書也都沒有提及。

至於好不好用就等待勇者進行測試囉!

什麼是全站編輯 (Full Site Editing)?

  1. 所有頁面上看到的內容都是一個區塊,例如 Logo 或是網站標題
  2. 你可以在編輯器編輯範本或範本組件
  3. 全站編輯會移除「自訂」和「小工具」選單
  4. 開發者會使用 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

以上就是測試全站編輯的準備步驟,接下來你就可以開始體驗全站編輯的功能囉!

如何開發一個區塊佈景主題 (Block Theme) – 01 – 檔案結構

WordPress 5.9 即將在 1/25 發佈,這次將會導入全站編輯,除了對於使用者來說是一個全新的體驗,對於開發者來說開發的方式也相當的不同。這一系列的文章將會介紹如何開發一個 Block theme。

Block theme 檔案目錄結構

上圖是一個基本的區塊佈景主題的檔案目錄結構,其中有兩個檔案是每個佈景主題一定要有的:index.php and style.css.

如果一個佈景主題要被辨識為區塊佈景主題那麼就必需要在 templates 資料夾中新增一個 index.html 範本檔案。

functions.php 不是必要的。如果你需要新增客製化的程式才會需要新增這個檔案。同時 theme.json 也是非必要的,除非你要管理全域樣式 (global style)。

區塊範本 (Block Templates)

區塊範本是你的佈景主題的基礎檔案,他們是一些包含 HTML 語法的檔案,且必須要放在 templates 資料夾中。區塊範本檔案是遵循 WordPress 檔案目錄結構的,所以 /templates/index.html 會對應到傳統佈景主題下的 index.php,/templates/404.html 會對應到傳統佈景主題下的 404.php,以此類推。

如果 WordPress 無法在 templates 目錄中找到對應的 html 檔案,那麼就會尋找佈景主題根目錄下的 .php 檔。

區塊範本組件(Block Templates Parts)

範本組件不是必須的,如果要新增範本檔案則要新增在 parts 資料夾中。它是用來幫助佈景主題開發者有效地重複利用一些可重複使用的程式。一個範本組件基本上就是一個區塊,它是用來包含其他區塊的容器。範本組件檔案會放在 parts 資料夾中,同時跟範本檔案一樣,它們也是一些 html 檔案,同時遵循 WordPress 的檔案目錄結構。所以 parts/header.html 就會對應到傳統佈景主題下的 header.php。

WPCS.io – 建立 WaaS 的新選擇

WaaS (WordPress as a Service/Website as a Service) 是一個將網站打造成一個可重複販售商品的概念。像市面上許多的架站服務一樣,例如 Wix 或是 Squarespace。透過 WaaS 來銷售的好處是,你可以專注在某個利基市場,同時透過規格化的商品,降低每次銷售所需要的人力介入。這應該是很多用 WordPress 接案者的夢想。

在 WordPress 的領域中,過去要做 WaaS,很多人會透過 WP Ultimo 這個 WordPress 外掛來處理,WP Ultimo 是以 Multisite 為架構,因此當子網站一多時,可能會有水平擴展的問題,因為每個網站都是架設在同一個主機上,如果當中有某些站流量比較高,可能就會排擠到其他流量小的網站。

而現在有了另一個新選擇 WPCS,WPCS 是一個雲端的服務,跟 WP Ultimo 以 Multisite 為基礎不同,WPCS 的概念則是 Multi-tenant。在 Multi-tenant 的設計概念下,不同的網站所使用的資源會是獨立開來的,因此不會互相影響。

當然過去 Multi-tenant 在 WordPress 社群並不是沒有人討論和實作過,不過大多是直接從 WP 本身去處理。

WPCS 則是透過 kubernetes 技術來將每個網站的資料庫區分開來。

https://wpcs.io/articles/tutorial-how-to-start-a-waas-using-wpcs