如何創建古騰堡模板
已發表: 2018-12-14使用 Gutenberg Blocks 構建頁面和帖子的優勢之一是能夠將它們保存為模板。 為古騰堡創建模板是幫助加快發布過程的好方法。 有幾種方法可以創建它們。 在本文中,我們將看到如何創建古騰堡模板。
我們將介紹創建它們的三種方法:
- 創建一個佈局以添加到您的古騰堡庫以導出或克隆。
- 創建佈局以在您想要使用它時進行複制和粘貼。
- 創建佈局以添加為頁面、帖子或自定義帖子類型的默認佈局。
這些方法讓我們只重用塊。 不會包含其他設置。
為什麼要創建古騰堡模板
設計頁面或帖子佈局後,您可以保存塊列表及其屬性以供重複使用。 這使您可以在創建內容方面領先一步,因為您不必專注於佈局。 塊模板允許您擁有一致的設計。
塊模板可以包含佔位符內容。 它們可以是靜態的或動態的。 您可以定義編輯器會話的默認狀態。 您甚至可以將模板導入或導出為 JSON 文件,這樣您就可以在多個網站上重複使用您的設計或與他人共享。 您可以鎖定它們,以便用戶可以添加內容但不能更改塊。
方法 1:創建佈局模板
佈局模板讓您可以使用最初添加的多選功能,讓我們可以同時移動或刪除多個塊。

我們可以一次選擇一個或多個塊並將其添加到我們的全局可重用塊庫中。 這使得將它們導出為 JSON 文件變得容易。
示例佈局模板

我創建了一個簡單的佈局,我可以將其用作博客文章、產品評論等。很容易將其保存到庫中以重複使用。

將光標放在要包含的第一個塊上,然後將鼠標拖動到最後一個塊以突出顯示它們。

在第一個塊上方,您會看到左側的三個點。 單擊圓點並選擇Add to Reusable Blocks 。

頂部的綠色消息欄將顯示該塊已創建。 為佈局指定一個對您有意義的名稱,然後選擇Save 。

綠色欄中的消息將顯示該塊已更新。 您已經創建了佈局!

要使用它,請創建一個新頁面或發布並打開選項(三個點)。 在工具下,選擇管理所有可重用塊。

這將顯示所有塊的列表。 在這裡,您可以將塊導出和導入為 JSON 文件。 可重用塊是全局的。 如果您編輯,那麼您將編輯原件。 為了保留原始帖子並使用佈局創建新帖子,您需要將其導出、重命名並導入佈局。
重複的帖子

幸運的是,我們還有另一種選擇。 一個名為 Duplicate Post 的插件為 Gutenberg 塊添加了克隆功能。

在重複帖子設置中,啟用塊。

我現在在 Blocks 庫中有一個克隆選項。 克隆您想要的佈局,然後進行編輯。 每個佈局都是全局的,因此每次要使用佈局時都必須進行克隆和編輯。
方法 2:創建古騰堡模板的簡單替代方法

這種方法只是一個簡單的作弊方法,但確實有效。 首先,創建一個您想要重複使用的佈局,包括任何占位符內容。

接下來,切換到代碼編輯器。 為此,請選擇右上角的三個點。 在編輯器下,選擇代碼編輯器。

突出顯示並複制代碼。

將代碼粘貼到文本編輯器中並保存以供重複使用。

當您準備好使用模板時,只需創建一個新帖子,切換到代碼編輯器,然後粘貼代碼。


我現在有一個新帖子,我可以開始向其中添加內容。
方法 3:創建自定義帖子類型
塊模板是一個參數。 您可以將參數添加到頁面和帖子中,也可以創建新的帖子類型。 佈局將與該帖子類型相關聯,因此當您創建該帖子類型時,默認情況下會顯示佈局。
這非常適合為不同類型的文章創建佈局。 例如,您可以擁有產品評論帖子類型、假期摘要帖子類型、食譜帖子類型等,當您加載帖子類型時,它會自動為您提供與之關聯的佈局。
創建模板包括:
- 動態設置默認狀態。
- 將其註冊為特定帖子類型的默認佈局。
聲明模板
模板本身將被聲明為一個塊類型數組。 這是在 JavaScript 或 PHP 中完成的。 正如古騰堡開發人員手冊所示,它看起來像這樣:
const template = [
[ 'block/name', {} ], // [ blockName, attributes ]
];或這個:
'template' => array( array( 'block/name' ), ),
在自定義帖子類型中註冊模板
自定義帖子類型也可以註冊模板。 它可能看起來像這樣:
function myplugin_register_book_post_type() {
$args = array(
'public' => true,
'label' => 'Books',
'show_in_rest' => true,
'template' => array(
array( 'core/image', array(
'align' => 'left',
) ),
array( 'core/heading', array(
'placeholder' => 'Add Author...',
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add Description...',
) ),
),
);
register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );該數組標識塊的來源和塊的名稱。 在此示例中,數組使用“核心/段落”。 這意味著該塊來自 WordPress 核心(而不是插件),並將其命名為段落(標識要使用的塊)。
在頁面和帖子中註冊模板
如果您將模板添加到頁面或帖子,它會在您每次創建頁面或帖子時自動加載。 我更喜歡將它們添加到特定的自定義帖子類型,因為您有更多的創作自由,並且通過使模板更容易找到來簡化內容創建過程。
如果您決定將它們添加到頁面或帖子中,您可以使用以下代碼:
function my_add_template_to_posts() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/paragraph', array(
'placeholder' => 'Add Description...',
) ),
);
$post_type_object->template_lock = 'all';
}
add_action( 'init', 'my_add_template_to_posts' );嵌套模板
您甚至可以在 Container 塊(例如,列塊)中嵌套模板。 這是通過為塊本身分配嵌套模板來完成的。 例如:
$template = array( array( 'core/paragraph', array( 'placeholder' => 'Add a root-level paragraph', ) ), array( 'core/columns', array(), array( array( 'core/column', array(), array( array( 'core/image', array() ), ) ), array( 'core/column', array(), array( array( 'core/paragraph', array( 'placeholder' => 'Add a inner paragraph' ) ), ) ), ) ) );
鎖定模板
您可以使用以下代碼鎖定模板:
'template_lock' => 'all', // or 'insert' to allow moving
具有自定義帖子類型的示例模板
我想創建我們在上面看到的名為 Books 的自定義帖子類型。 它將顯示佈局模板並包括圖像、標題和段落。
代碼將被粘貼到functions.php 文件中。 向 PHP 文件添加代碼時,始終使用子主題。 如果不這樣做,當您更新主題時,代碼將被覆蓋。

您必須手動編寫代碼(我建議使用我展示的代碼示例)。 一種選擇是創建您想要的佈局,然後查看代碼(單擊右上角的三個點,然後在“編輯器”部分中選擇“代碼編輯器”)。 這將顯示您已經製作的佈局中的塊及其屬性,以便您可以提前知道如何在代碼中排列塊。

進入主題函數(functions.php) 並粘貼代碼。 我在最底部粘貼了代碼。 這是一個測試站點,我不打算保留代碼,所以我沒有使用子主題。

一個新的帖子類型被添加到名為 Books 的儀表板菜單中。 它包括一個列表和一個添加新鏈接。 我點擊了新增,我的新模板被添加到編輯器中,我可以簡單地開始添加內容。
這些塊按照它們在代碼中出現的順序放置,並包括它們被分配的屬性。 您可以在代碼中放置任意數量的塊,並為它們提供所需的任何屬性。 您可以根據需要創建任意數量的自定義帖子類型,並且每個類型都可以具有唯一的默認佈局。 此示例包含佔位符文本。
結束的想法
這就是我們對如何創建古騰堡模板的看法。 這三種方法都很好用。 如果您不想創建新的自定義帖子類型,可重用模板或其中一種複制方法可能是更好的選擇。 我喜歡自定義帖子類型,因為它可以輕鬆選擇要創建的內容類型,並且模板已為您預先排序。
如果您對代碼感到滿意,那麼自定義帖子類型很容易製作,並且它們在 WordPress 中最方便使用。 創建模板以添加到您的functions.php 的主要缺點是您在代碼中而不是在Gutenberg 編輯器中創建佈局,因此它不是可視化的。
我喜歡您可以將預製內容添加到模板中。 這對於佔位符文本來說非常有用,可以向貢獻者顯示信息的去向。 可重複使用的模板是加速和簡化工作流程的好方法,也是創建頁面和帖子佈局進行共享的好方法。
我們希望聽到您的意見。 已經創建了古騰堡模板? 在下面的評論中讓我們知道您的體驗。
精選圖片來自 Nadia Snopek / shutterstock.com
