新手指南:如何使用WordPress區塊模式

WPressize Me

05/13/2023

新手指南:如何使用WordPress區塊模式

最後更新於2024年5月23日由編輯部 | 評審:Syed Balkhi

您想學習如何在您的網站上使用WordPress區塊模式嗎?區塊模式允許您快速添加常用的設計元素到您的文章或頁面布局中。

在這篇文章中,我們將向您展示如何使用WordPress區塊模式,以及如何找到更多模式在您的網站上使用。

我們將在本指南中涵蓋的主題:

  • 什麼是WordPress區塊模式?
  • 如何在WordPress中使用區塊模式
  • 如何在區塊編輯器中創建模式
  • 如何在站點編輯器中創建模式
  • 在WordPress中管理模式
  • 在您的網站上找到更多區塊模式
  • 如何創建和分享您的區塊模式
  • 手動創建WordPress區塊模式
  • 如何在WordPress中移除區塊模式
  • 可重用區塊發生了什麼變化?

什麼是WordPress區塊模式?

WordPress區塊模式是一組預製的設計元素,可以用來更快地創建自定義內容布局。WordPress附帶了一個直觀的編輯器,通常稱為區塊編輯器。它允許用戶使用常見的內容元素的區塊來創建漂亮的文章和頁面布局。

然而,不是所有的WordPress用戶都是設計師,也不想每次在需要創建文章或頁面時都花時間製作布局。區塊模式為這個問題提供了簡單的解決方案。WordPress預設附帶了一堆有用的區塊模式。

流行的WordPress主題也提供了它們自己的模式,您可以在撰寫內容時使用這些模式。這些模式包括像是預建的多欄布局,媒體和文本模式,行動號召模式,標題,按鈕等等。

您可以在WordPress.org網站上找到更多模式,甚至可以創建和共享您自己的模式。接下來,我們來看看如何輕鬆使用WordPress區塊模式來創建漂亮的網站內容。

如何在WordPress中使用區塊模式

預設情況下,WordPress附帶了幾個有用的區塊模式,您可以在您的網站上使用。您的WordPress主題和一些插件也可能添加它們自己的模式。

要使用區塊模式,您需要編輯想要使用區塊模式的WordPress文章或頁面。在文章編輯畫面上,點擊新增區塊[+]按鈕以打開區塊插入器。從這裡轉到‘模式’標籤以查看可用的區塊模式。

您可以向下滾動觀看所有可用的區塊模式。您還可以在不同類別中查看區塊模式,例如精選,按鈕,欄,標題等等。或者,您還可以點擊‘瀏覽所有模式’按鈕來查看區塊模式。在這裡,您可以在彈出窗口中看到更大的預覽圖。

一旦找到想要嘗試的模式,只需點擊插入到您的文章或頁面的內容區域中。該模式將在內容編輯器中出現並帶有替代內容,您可以編輯並替換為自己的內容。

只需指向並點擊模式內的任何區塊以編輯並更改其內容以符合您的需求。您仍然會擁有每個區塊的所有選項。例如,如果它是一個封面區塊,您可以更改封面顏色或背景圖片。

您可以在您的文章或頁面中添加任意多的模式。您也可以刪除模式以從文章或頁面中移除它,就像刪除任何WordPress區塊一樣。

使用區塊模式,您可以快速為您的文章和WordPress網站創建漂亮的布局。最終,區塊模式幫助您節省手動排列區塊的時間,每當您需要添加標題,畫廊,按鈕等等時都會節省大量時間。

如何在區塊編輯器中創建模式

WordPress使得在區塊編輯器中創建模式變得非常容易,您可以稍後重複使用。當編輯一篇文章或頁面時,只需選擇想要包含在模式中的區塊,然後點擊‘創建模式’。

您可以通過按下鍵盤上的Shift鍵並點擊來選擇多個區塊。然而,如果您的區塊排列使得難以選擇它們,可以使用文檔總覽頁面的列表視圖。

創建模式會彈出一個彈出窗口。您需要為您的模式提供一個名稱並選擇一個類別。

下面,您將看到一個開關來保持模式同步或不同步。

  • 同步模式:當您或其他用戶編輯模式時,這些更改將在下次使用該模式時保存。
  • 不同步模式:在插入文章或頁面後對這些模式進行的更改將不影響原始模式。

點擊‘創建’按鈕以保存您的模式。下一次想要使用該模式時,只需在區塊插入器中查找其名稱或類別。

如何在站點編輯器中創建模式

如果您正在使用支持完全站點編輯器的區塊主題,那麼您還可以在站點編輯器中創建模式。打開外觀»編輯頁面以訪問站點編輯器。

您現在將進入站點編輯器界面。從左側邊欄中點擊‘模式’以繼續。您將看到所有可用的模式和類別。要創建新模式,點擊添加[+]按鈕,然後選擇‘創建模式’。

這將彈出一個窗口,您需要為您的模式提供一個名稱,選擇一個類別,並決定是否希望該模式同步或不同步。點擊‘創建’以繼續。

WordPress將創建一個空白畫布供您創建您的模式。從這裡,您可以添加區塊來設計您的模式。

一旦完成,不要忘記點擊‘保存’按鈕以保存您的模式。

在WordPress中管理模式

如果您正在使用支持完全站點編輯器的區塊主題,那麼您可以在站點編輯器中管理模式。打開外觀»編輯頁面以訪問站點編輯器。

在模式頁面上,您可以點擊一個模式來編輯它。你還可以點擊模式旁邊的三點菜單來複製,匯出或刪除它。

要管理所有的模式,點擊側邊欄中的‘管理我的所有模式’選項卡。這將顯示您所有模式的列表。現在,您可以編輯,匯出或刪除它們。

如果您正在使用經典主題(不支持完全站點編輯器的WordPress主題),那麼您可以訪問外觀»模式頁面來管理模式。從這裡,您可以添加,刪除和匯出您的區塊模式。

在您的網站上找到更多區塊模式

預設情況下,WordPress附帶了一些常用的區塊模式。WordPress主題可能還會將它們自己的模式添加到您的網站。但是,您可以在您網站上的區塊插入器中找到更多的區塊模式。只需前往WordPress模式目錄網站來查看更多區塊模式。

在這裡,您將找到由WordPress社區提交的區塊模式。要使用其中一個區塊模式,只需點擊查看模式,然後點擊‘複製模式’按鈕。

接下來,您需要返回您的WordPress博客並編輯想要插入此區塊模式的文章或頁面。在編輯屏幕上,右擊並從瀏覽器菜單中選擇‘粘貼’或按下CTRL+V(在Mac上按Command+V)。

如何創建和分享您的區塊模式

想創建您自己的WordPress區塊模式並與世界分享嗎?WordPress使得創建區塊模式變得超級簡單,您可以在自己的網站上使用或與全球所有WordPress用戶分享。只需訪問WordPress模式目錄網站並點擊‘新模式’鏈接。

注意:您需要登錄或創建一個免費的WordPress.org帳號來保存您的模式。登錄後,您將進入區塊模式編輯頁面。這與默認的WordPress區塊編輯器相同,您可以使用它來創建您的模式。

只需添加區塊來創建您的模式布局。您可以使用像組,封面,畫廊等布局區塊來組織您的布局。也有免版稅的圖像可供使用在您的媒體區塊中。WordPress媒體庫將允許您輕鬆找到並在您的模式中使用這些圖像。

一旦對您的區塊模式滿意,您可以將其保存為草稿或提交給模式目錄。在提交您的區塊模式之前,請確保您已閱讀模式目錄指南。您可以點擊‘我的模式’鏈接來管理您所有的區塊模式。它將顯示所有您已分享的模式,草稿模式,以及您收藏的模式。

如果您只想創建供自己使用的區塊模式,那麼您可以將它們保存為草稿。之後,從我的模式頁面中複製並粘貼到您的WordPress網站上。

手動創建WordPress區塊模式

您也可以手動創建區塊模式,並將它們添加到您的WordPress主題或自定義代碼段插件如WPCode。只需在WordPress中創建一個新文章或頁面。在內容區域中,使用區塊創建一個自定義布局或區塊集合,您希望保存為一個模式。

之後,切換到代碼編輯器模式。從這裡,您需要複製在代碼編輯器中看到的所有內容。

接下來,打開一個簡單的文本編輯器如記事本並粘貼代碼。您將在下一步中需要它。

現在,您已準備好註冊您的區塊為一個模式。為此,只需將以下代碼複製並黏貼到您的主題的functions.php文件或WPCode等代碼段插件中(推薦使用)。更多詳細資訊,這是添加自定義代碼到WordPress的完整指南。

function wpb_my_block_patterns() { register_block_pattern( 'my-plugin/my-awesome-pattern', array( 'title'       => __('兩欄雜誌布局','my-theme'), 'description' => _x('一個簡單的兩欄雜誌風格布局,帶有大圖片和美化文字','my-theme'), 'categories'  => array('columns'), 'content'     => '您的區塊內容代碼在這裡' ) ); } add_action('init', 'wpb_my_block_patterns');

現在,將您之前複製的原始區塊數據粘貼為content參數的值。換句話說,您需要替換文本‘您的區塊內容代碼在這裡’為您的區塊代碼。請務必保留周圍的單引號。

最後,不要忘記更改標題和描述為您自己的,並保存更改。您現在可以訪問您的網站並編輯文章或頁面。您新註冊的區塊模式將出現在區塊插入器中。

如何在WordPress中移除區塊模式

您可以輕鬆地在WordPress中移除或取消註冊任何區塊模式。假設您想要移除在上面範例中創建的區塊模式。只需將以下代碼複製並貼到您的主題的functions.php文件或WPCode中:

function wpb_unregister_my_patterns() { unregister_block_pattern('my-plugin/my-awesome-pattern'); } add_action('init', 'wpb_unregister_my_patterns');

在這個範例中,‘my-plugin/my-awesome-pattern’是我們在註冊時使用的模式名稱。您可以使用此代碼取消註冊由主題或插件創建的任何區塊模式。您只需要知道用於註冊模式的名稱。

移除核心WordPress模式

核心WordPress模式對所有WordPress用戶都是可用的,這意味著它們可能被過度使用,甚至可能不匹配您的WordPress主題。如果您不想使用模式,則只需避免將其添加到您的內容中。然而,如果您運行一個多作者的WordPress網站,那麼您可能希望防止所有用戶使用這些核心模式。

要移除所有核心WordPress模式,只需將以下代碼添加到您的主題functions文件或WPCode中:

remove_theme_support('core-block-patterns');

可重用區塊發生了什麼變化?

區塊模式和可重用區塊都旨在解決一個類似的問題:提供用戶輕鬆添加常用區塊的選項。為了解決這個問題,WordPress核心團隊將可重用區塊合併到模式中。要擁有與可重用區塊相同的功能,您現在可以使用同步模式。當您或其他用戶編輯模式時,這些更改將在下次使用該模式時保存。

我們希望本指南幫助您學習如何在您的網站上使用WordPress區塊模式。您也許還想查看我們的掌握WordPress區塊編輯器指南或這些方便的WordPress快捷方式來提高生產力。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道以獲取WordPress視頻教程。您還可以在Twitter和Facebook上找到我們。



Related Posts

  • 2024-07-28
  • WordPress 基础知识

WordPress主题定制器提供了出色的功能,使你无需触碰代码即可创建一个视觉上吸引人的站点。然而,导航各种自定义选项有时可能让人觉得不知所措。在这篇文章中,我们将引导你了解默认面板,并教你如何像专业人士一样使用WordPress主题定制器。

到文章结尾,你将能够使你的网站看起来更加精致和专业。

閱讀更多
  • 2024-07-26
  • WordPress 基础知识

默认情况下,WordPress会在30天后自动删除垃圾箱中的内容。然而,有些用户可能希望更频繁或手动清空垃圾箱。在本文中,我们将向您展示如何限制或禁用WordPress自动清空垃圾箱。

閱讀更多
  • 2024-07-23
  • WordPress 基础知识

您是否想在WordPress博客文章中嵌入视频?视频可以为您的网站带来活力,并且是增加用户参与度的绝佳方式。WordPress使得从YouTube、Vimeo、Facebook、Twitter等视频托管网站嵌入视频变得非常简单。在这个初学者指南中,我们将向您展示如何在WordPress博客文章、页面和侧边栏小部件中轻松嵌入视频。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>