什麼是 WordPress 塊模式以及如何使用它們?

已發表: 2022-05-20

前言
為什麼要關心塊模式?
WordPress中的塊模式是什麼?
塊模式的優點是什麼?
- 發展速度
- 獨特的設計
- 可靠的代碼庫
- 可重用性
- 創作自由
如何使用塊模式
- 使用古騰堡編輯器的塊模式庫
- 使用 WordPress 塊目錄
- 使用基於主題的塊模式
如何創建塊模式
結論

幾年前,WordPress 引入了一種構建網頁的新方法。 這項創新被稱為Gutenberg ,也稱為WordPress編輯器或簡稱WordPress 編輯器。 Gutenberg 為任何人提供了一種簡單的方式來構建豐富的內容。 它通過 WordPress Blocks 和 WordPress Block Patterns 做到這一點。

積木是古騰堡力量的基石。 就像心愛的兒童玩具一樣,WordPress 塊允許您通過以任何您喜歡的方式堆疊它們來構建頁面。 你可以取出你不想要的,如果你不喜歡你已經建立的東西,很容易重新開始。

您可以使用塊將視頻、圖像和創意設計添加到您的網站,而無需技術或編碼技能。 更簡單的是,您可以使用稱為塊模式的塊集合來為您的站點提供準備就緒的佈局。 使用您的內容自定義這些塊模式,然後就可以了!

今天,古騰堡項目已經發展到一個全新的水平。 隨著它的不斷發展,它正在為即將推出的全站點編輯器讓路,本月晚些時候將推出 WordPress 6.0 更新,讓您可以將塊應用於站點的所有部分,而不僅僅是帖子和頁面。 建立令人難以置信的網站並隨著時間的推移對其進行編輯將很快變得更加容易! 我們將在下一篇文章中詳細討論這個問題。

不過現在,讓我們談談 WordPress 塊模式、它們的作用以及它們為什麼對您很重要……

為什麼要關心塊模式?

即使是最好看的網站也需要不時更新,但是跟上在線業務不斷增長的需求會給您帶來問題。 即使您不知道如何編碼,您也必須快速進行更改。

如果你從頭開始,你最終會陷入類似的困境。 您需要快速整合您的網站。 作為網站所有者,您希望專注於創建內容和賺錢,並且您絕對不想浪費時間與代碼搏鬥。 然而,創建一個新設計可能需要幾天甚至幾週的時間。

這就是塊模式的用武之地:它們允許您以快速而美觀的方式構建您的網站。 您可以嘗試不同的塊組合,看看哪種最適合您。 您會發現,有數百種想法可供您使用。

另一方面,如果您不使用塊模式,您可能會被迫學習如何編碼。 即使您使用高級 WordPress 主題,您也必須編輯後端代碼以滿足您的需求。 進行更改所需的時間可能超出您的承受能力,如果您聘請專業人士為您處理,您的預算將會增加。

塊模式消除了大部分痛苦 - 編輯您的網站變得(我們敢說)很多樂趣。 您可以選擇幾種模式,嘗試各種組合,并快速擁有一個讓您的訪問者讚歎的正常運行的網站。

WordPress中的塊模式是什麼?

WordPress 塊模式是塊的預構建組合,您可以根據需要進行更改。 您可以有一個代表完整網頁的模式,或者您可以選擇一個代表您網站的一部分的模式,例如社交圖標菜單。 您無需知道如何編寫代碼即可使用它們,而且由於 Gutenberg 的編輯功能,您可以控製圖案最終的外觀。

塊模式的優點是什麼?

Gutenberg 和塊模式是相對較新的概念。 傳統上,WordPress 網站是使用網站構建器或通過從頭開始創建模板來創建的。 雖然這些方法效果很好,但它們通常需要大量的培訓或編碼經驗才能獲得最佳結果。 許多 WordPress 用戶還抱怨網站建設者創建的頁面很笨重,需要很長時間才能加載。

塊模式具有新的方法和獨特的優勢。 對於初學者和經驗豐富的網頁設計師來說,它們都是一種資產。 讓我們來看看最關鍵的好處。

發展速度

最重要的優勢是您無需編碼知識即可構建站點的速度。 由於塊模式是預先製作的,您只需選擇您想要的。 將它們放在頁面上並重新排列它們,直到您對站點的外觀感到滿意為止。

塊模式允許輕鬆定制。 您可以使用您喜歡的圖像並應用與您的品牌相匹配的顏色。 您將在幾天甚至幾小時內準備好一個工作網站,為您的業務提供動力!

獨特的設計

這個好處對任何不想要千篇一律的網站設計的網站所有者都很重要。 您可以根據您的特定需求重新排列塊模式。 挑選、混合和重新排列塊模式,直到找到您喜歡的組合。 您將輕鬆獲得一個在競爭中脫穎而出的獨特網站。

可靠的代碼庫

很有可能,您不想花時間編碼。 儘管如此,您仍想相信您的網站是健壯的。 您的網站應該在所有設備上看起來都很棒,具有不同的屏幕尺寸。 塊模式通過設計解決了這個問題。

大多數模式來自對自己的工作充滿熱情的開發人員。 這些專業人士重視他們的聲譽。 因此,當您選擇塊模式時,您可以放心,因為它經過了良好的編碼和測試。

您會發現這些模式也具有速度和性能優勢。 您網站的加載時間會影響您的 SEO,因此這可能會影響您的流量。 特別是,與使用流行網站構建器創建的許多主題相比,塊模式往往更輕巧且優化得更好。

可重用性

使用塊模式的另一個有趣的方面是您可以重用它們。 如果您有不同的網站,此功能非常方便。 您還可以在網站的不同頁面上重新調整模式的用途。

如果您為其他人建立網站,使用塊模式可能是達到最後期限和失去客戶之間的區別。 保存您最喜歡的模式,然後為您構建的每個站點自定義它們。

創作自由

塊模式最吸引人的好處之一是您獲得的創作自由。 從模板構建的網站迫使您停留在一個概念內。 對於喜歡表達自己的人來說,這可能很煩人。 但是,使用塊模式,您可以輕鬆探索不同的想法。

您所要做的就是滾動瀏覽許多可供您使用的豐富模式庫。 您可以選擇適合每個預算的選項; 許多模式是免費的。 最好的部分是你不必承諾任何組合。 如果您改變主意,只需單擊幾下即可探索新想法。

您可以找到網站任何部分的塊模式; 菜單、特色帖子、頁腳和頁眉、定價表等等! 您會驚訝於自己可以做的事情,而無需任何技術技能。

如何使用塊模式

使用古騰堡編輯器的塊模式庫

最簡單的方法是在您的 Gutenberg 編輯器中訪問塊模式庫。 以下是基本步驟。

  • 單擊編輯器右上角的藍色“加號”按鈕。
    WordPress 塊模式切換塊插入器
  • 然後,單擊“模式”選項卡。 您將看到一系列可供選擇的模式。
    選擇模式選項卡
  • 單擊您想要的模式,它將顯示在編輯器中。
    編輯塊圖案
  • 您現在可以通過調整它來滿足您的需求來製作您的圖案。
    編輯塊圖案

使用 WordPress 塊目錄

您還可以訪問 wordpress.org/patterns 上的 WordPress 塊模式目錄。 該目錄包含大量模式,您可以立即開始使用。
WordPress 塊模式目錄

這些模式是根據它們提供的功能進行組織的。 您可以找到頁面佈局、畫廊、基於視頻的設計等。 您可以查看哪些是最新的。 或者,如果您願意,可以按受歡迎程度對它們進行排序。

還有一個精選的精選模式列表。 這是您可以找到的一些最佳設計的選擇。 所有這些都可以免費使用,並且可以在商業網站上使用。

在庫中選擇圖案後,將鼠標懸停在顯示圖像上。 您將看到一個顯示“複製”的按鈕。 單擊它,然後將其粘貼到古騰堡編輯器中。 如果您有編碼經驗,也可以將其粘貼到您喜歡的代碼編輯器中進行更改。

或者,單擊縮略圖預覽圖案。 這將向您展示設計在網頁上的外觀。 您將看到一個藍色按鈕,可讓您複製圖案以用於您的設計。 複製模式後,打開 Gutenberg 編輯器。 單擊以指示您希望圖案出現的位置。 把它粘貼進去,你可以根據自己的喜好調整它。

使用基於主題的塊模式

某些主題使您可以訪問獨家模式集合。 這些可以是免費的或付費的。 每個主題在將模式添加到您的站點的方式上略有不同。 通常,您應該會看到一個瀏覽設計的選項。 然後,您可以將該模式導入您的頁面。

如何創建塊模式

如果您能勝任這項任務,請創建自定義塊模式。 如果您有一個在任何庫中都沒有的獨特想法,自定義佈局是最好的方法。 如果您喜歡創建自己的東西,這個選項也很有意義。

創建塊模式的第一步是決定它的用途或功能。 這是您將在所有頁面上使用的模式嗎? 您是否需要用於在您的網站上展示您的產品的佈局? 花點時間弄清楚並寫下你的想法。

然後,你想在一張紙上畫出圖案的草圖。 不要擔心它看起來有多好。 您不必創作藝術傑作。 你想要的一個簡單的佈局就足夠了。 重要的是你清楚你想要創造什麼。 這一步也將節省您的時間。

24/7 WordPress 支持

來自真正的 WordPress 專家

學到更多

最後一步是為您的塊模式創建代碼。 進行該過程的最簡單方法是使用插件。 轉到 WordPress 插件存儲庫。 輸入關鍵字“block patterns”作為您的搜索詞組。 您將看到幾個允許您創建模式的插件。 嘗試其中一些,看看哪一個適合您的首選工作流程。

如果您的想法對於插件來說太複雜而無法處理,您仍然可以創建塊模式。 挑戰在於,如果您不熟悉編碼,則需要雇用某人來幫助您。 但是,您仍然可以提出自己的想法並指導您的開發人員您想要什麼。 WordPress Codex 提供了有關如何編寫塊模式的詳細文檔。

完成創建模式後,您可以通過將其作為 WordPress 塊模式庫的一部分與社區共享。 這是一個很好的貢獻方式。 登錄到您的 WorPress.org 帳戶,如果您想分享您的阻止模式,請按照說明進行操作。

結論

WordPress 中的塊模式使所有技能水平的人都可以進行網站建設。 您不需要很多錢就可以擁有一個可以在競爭中脫穎而出的網站。 您的網站擁有比以往更快的獨特設計。 您還將獲得信心,您正在使用專為 WordPress 生態系統構建的代碼。 塊模式將不斷發展。 因此,當您使用它們時,您將成為這項技術自然進步的一部分。

借助 WordPress 塊模式,您可以專注於創建內容。 再也不用擔心如何構建您的網站而失眠了!

您所要做的就是選擇一個好的 WordPress 主機,設置您的網站,選擇主題,然後開始使用塊模式比以往更快地構建頁面。

作為你的下一步,給自己一些時間去嘗試。 玩轉想法,看看什麼適合你的喜好。 如果您還沒有準備好開始構建您的站點,請探索一些塊模式庫。 滾動瀏覽設計,看看有什麼可供您使用。 受到啟發只是時間問題。

當然,如果這個概念對你來說是新的,可能會有一個學習曲線。 這是完全正常的。 好消息是沒有硬性規定。 您決定如何以適合您需求的方式使用塊模式,您可以從今天開始!

網絡性能

加載時間很重要! 你知道你的網站有多快嗎?

學到更多